Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Cross-sell Products

Cross-sell products with checkboxes to add to their order, to generate extra revenue.

Industries

  • Bicycles
  • Computers & Electronics
  • Fitness & Supplements
  • Furniture & Homewares
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Animal & Petcare
  • Arts & Crafts
  • Books & Stationary
  • Food & Beverages

Wireframe

Cross-sell Products

Coding Instructions

Open up your product template Skeletal/products/template.html.

Then in the "site_value" section of that file add the below. If you don't have a site_value section on your product page template, create one :

Note : Don't have the site value in the site value, the one below is coded assuming you have no other site value tag

[%site_value id:'footer_javascript'%]
<script type="text/javascript" language="javascript">
    (function($) {
        $.extend({
        // For child product multi-add to cart function
                checkValidQty: function() {
                    var found = 0;
                    $("#multiitemadd :input").each(function() {
                        if ($(this).attr('id').match(/^qty/)) {
                            if ($(this).val() > 0) {
                                found = 1;
                            }
                        }
                    });
                    if (found == 0) {
                        $.fancybox("Please specify a quantity before adding to cart");
                        return false;
                    }
                    return true;
                }
            });
    });
    function nRemoveSku(sku) {
      $("#qty"+ sku).val(0);
    }
    function nAddSku(sku) {
      $("#qty"+sku).val(1);
    }
    $(".nUpsellWidget--list--toggle").click(function(){
      var isChecked = $(this).prop('checked');
      var skuDetails = $(this).attr('data-product');
      if (isChecked == true) {
          nAddSku(skuDetails);
      }else {
            nRemoveSku(skuDetails);
        }
    });
</script>
[%/site_value%]

Open up your buying options template, Skeletal/products/includes/buying_options.template.html.

Just under the multiplier_qty block, replace the entire buying options section with the following code :

Note that in the [%param *ifempty%] tag of the crosssell tag we have the regular singular buying options, if you've made adjustments to your buying options feel free to move them into this ifempty param instead of replacing them.

[%crosssell id:'[@SKU@]' limit:'' show_all:'1'%]
    [%param header%]
        <div class="nUpsellWidget">
            <div class="row">
                <div class="col-md-12">
                    <div class="nUpsellWidget--title">
                        <h3>Compliment your order with the below</h3>
                    </div>
                </div>
            </div>
            <div class="nUpsellWidget--list" 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">
                    [%crosssell id:'[@sku@]' limit:'4' show_all:'1'%]
                        [%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">
                                <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" class="nUpsellWidget--list--toggle" data-product="[@rndm@][@SKU@]"> Add to my order</p>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        [%/param%]
                    [%/crosssell%]
                </div>
                <div class="nUpsellWidget--buyingOptions">
                    <div class="row btn-stack">
                        <div class="col-xs-12 col-md-4">
                            <input type="integer" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="1" placeholder="Qty" class="form-control qty input-lg">
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <a onclick="javascript:$.addMultipleCartItems('multiitemadd'); return false;" class="nUpsellWidget--buyingOptions--button btn btn-lg btn-block btn-success"><i class="fa fa-shopping-cart"></i> Add To Cart</a>
                        </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>
            </div>
    [%/param%]
    [%param *body%]
        <!--Keep this empty-->
    [%/param%]
    [%param *ifempty%]
        <form class="buying-options">
            <input type="hidden" id="model[@rndm@][@SKU@]" name="model" value="[@model@]">
            <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb" value="[@thumb@]">
            <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku" value="[@SKU@]">
            <div class="row btn-stack">
                <div class="col-xs-12 col-md-4">
                    <input type="number" min="[@min_qty@]" class="form-control qty input-lg" id="qty[@rndm@][@SKU@]" name="qty" value="[%data id:'min_qty' if:'ne' value:'0' %][@min_qty@][%/data%][%data id:'min_qty' if:'eq' value:'0' %]1[%/data%]" size="2"/>
                </div>
                <div class="col-xs-12 col-md-4">
                    [%if [@store_quantity@] > 0 AND [@preorder@] %]
                    <button type="button" title="Add to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-loads" 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"></i> Pre-Order Now</button>
                    [%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
                    <button type="button" title="Add to Cart" class="addtocart btn btn-success btn-block btn-lg btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-shopping-cart icon-white"></i> Add to Cart</button>
                    [%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
                    <button type="button" title="Add to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-loads" 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"></i> Backorder</button>
                    [%else%]
                    <a class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#notifymodal"><i class="fa fa-envelope"></i> Notify Me</a>
                    [%/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>
        </form>
    [%/param%]
[%/crosssell%]

Then add this to the stylesheet:

<style>
    .nUpsellWidget label {
        cursor:pointer;
    }
</style>