Cross-sell Products

Cross-sell Products

This tweak will add cross-sell items to the product page so customers can easily add additional products to their cart. Adding cross-sell items are a great way to generate extra revenue and recommend additional products.

The cross-sell items that are checked will be added to cart when the customer clicks the 'Add to Cart' button.

Wireframe

Cross-sell Products

Install the Cross-Sell add-on

The Cross-Sell add-on is required to setup and display cross-sell products, this can be installed for free through the Neto Add-on Store.

  1. When logged in to your Control Panel navigate to the Add-on store by clicking Addons in the sidebar.
  2. Locate the Cross Sell Products add-on under the Product Management category.
  3. Click Install and when prompted by the pop-up click Install again to begin the installation.

Coding Instructions

  1. Open up your product template at the following location: /httpdocs/assets/themes/[THEME-NAME]/products/template.html.
  2. Paste the following code snippet at the very top of this file.
[%site_value id:'footer_javascript'%]
    <script type="text/javascript" language="javascript">

        // Reset inputs using callback API
        function multiItemAddCallback(){
            $("#multiitemadd input[type='checkbox']:checked").prop('checked', false)
            $("#multiitemadd .qty").val(1)
        }

        $(document).ready(function(){

            // When a cross-sell item is added or removed
            $(document).on('change', '.nCrossSellItem input[type="checkbox"]', function(){

                // Set a 1 or 0 quantity based on whether the checkbox is ticked.
                var isChecked = ($(this).prop('checked') ? 1 : 0);

                // Get the item SKU
                var sku = $(this).attr('data-product');

                // Adjust the quantity
                $("#qty" + sku).val(isChecked);
            });

            // Cross-sell add to cart
            $(document).on('click', '.addMultipleCartItems', function(){
                $.addMultipleCartItems('multiitemadd');
            });

            // Add callback function
            nAddMultiItemsCallbacks.push(multiItemAddCallback)
        });
    </script>
[%/site_value%]
  1. Open up your buying options template at the following location /httpdocs/assets/themes/[THEME-NAME]/products/includes/buying_options.template.html.
  2. Take a copy of your existing buying options form <form class="buying-options">...</form> (This usually begins under the multiplier_qty block). Keep this copy seperate, you'll need it for a later step.
  3. Replace your buying options form with the following code below.
  4. In the [%param *ifempty%] parameter of the cross-sell code snippet paste in your old buying options form code from step 4. This is the buying options that will display if no cross-sell products are assigned to the product.
[%crosssell id:'[@SKU@]' limit:'4' show_all:'1'%]
    [%param *header%]
        <h3>Compliment your order with the below</h3>
        <div id="multiitemadd">
            <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
            <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
            <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
            <div class="row">
    [%/param%]
    [%param *body%]
                <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
                <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
                <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
                <input type="hidden" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="0" placeholder="Qty">
                <div class="col-sm-6 nCrossSellItem">
                    <div class="row">
                        <label>
                            <div class="col-xs-3">
                                <img class="img-responsive" src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'/%]">
                            </div>
                            <div class="col-xs-9">
                                <h4>[@model@]</h4>
                                <p>[%format type:'currency'%][@price@][%/format%]</p>
                                <p><input type="checkbox" data-product="[@rndm@][@SKU@]"> Add to my order</p>
                            </div>
                        </label>
                    </div>
                </div>
    [%/param%]
    [%param *footer%]
            </div>
            <div class="row btn-stack">
                <div class="col-xs-12 col-md-4">
                    <input class="form-control qty input-lg" type="integer" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="1" placeholder="Qty" >
                </div>
                <div class="col-xs-12 col-md-4">
                    [%IF [@store_quantity@] > 0 AND [@preorder@] %]
                        <button type="button" title="Add [@model@] to Cart" class="btn btn-warning btn-block btn-lg btn-loads addMultipleCartItems" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]">
                            <i class="fa fa-clock-o icon-white" aria-hidden="true"></i> Pre-Order Now
                        </button>
                    [%ELSEIF [@store_quantity@] > 0 AND ![@preorder@] %]
                        <button type="button" title="Add [@model@] to Cart" class="btn btn-lg btn-block btn-success btn-loads addMultipleCartItems" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]">
                            <i class="fa fa-shopping-cart" aria-hidden="true"></i> Add To Cart
                        </button>
                    [%ELSEIF [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
                        <button type="button" title="Add [@model@] to Cart" class="btn btn-warning btn-block btn-lg btn-loads addMultipleCartItems" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]">
                            <i class="fa fa-clock-o icon-white" aria-hidden="true"></i> Backorder
                        </button>
                    [%ELSE%]
                        <a class="btn btn-info btn-lg btn-block" title="Notify Me When [@model@] Is Back In Stock" data-toggle="modal" data-target="#notifymodal">
                            <i class="fa fa-envelope" aria-hidden="true"></i> Notify Me
                        </a>
                    [%END IF%]
                </div>
                <div class="col-xs-12 col-md-4">
                    [%if [@config:show_wishlist@]%]
                        <div class="product-wishlist">
                            [%in_wishlist id:'[@SKU@]' %]
                                [%param if_true%]
                                    <a class="wishlist_toggle btn btn-lg btn-block btn-warning" rel="[@SKU@]"><span class="remove" rel="wishlist_text[@SKU@]"><i class="fa fa-star"></i></span></a>
                                [%/param%]
                                [%param if_false%]
                                    <a class="wishlist_toggle btn btn-default btn-lg btn-block" rel="[@SKU@]"><span class="add" rel="wishlist_text[@SKU@]"><i class="fa fa-star-o"></i> Add To Wishlist</span></a>
                                [%/param%]
                            [%/in_wishlist%]
                        </div>
                    [%/if%]
                </div>
            </div>
        </div>
    [%/param%]
    [%param *ifempty%]
        <!-- Insert your existing buying options form code here -->
    [%/param%]
[%/crosssell%]
  1. This code snippet uses our default buying options logic. If you have any customisations to your buying options logic they will need to be applied the logic in the footer parameter ([%param *footer%]).
  2. Open up your theme stylesheet, typically found at the following location /httpdocs/assets/themes/[THEME-NAME]/css/style.css and insert the following class at the end of the file.
    .nCrossSellItem label {
        cursor: pointer;
        display: block;
    }

Important Notes

  • When the 'Add to Cart' button has been clicked, all quantities from cross-sell product will be erased. For a customer to re-add more cross-sell product to the cart, these values will need to be re-entered.

Was this article useful?

Be notified when this page is updated. Optional.