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
Preparation Checklist
Before you start this tweak, it's a good idea to run through our preparation checklist below:
- Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
- Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
- Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
- The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.
Install the Cross-sell addon
The Cross-sell addon is required to setup and display cross-sell products, this can be installed for free through the Neto by Maropost Addon Store.
- When logged in to your Control Panel navigate to the Add-on store by clicking Addons in the sidebar.
- Locate the Cross-sell Products add-on under the Product Management category.
- Click Install and when prompted by the pop-up click Install again to begin the installation.
Coding Instructions
Step 1: Open the product template
The product template can be found here /httpdocs/assets/themes/[THEME-NAME]/products/template.html.
Step 2: Add the code into the template
Paste the following code at the very top of this template.
[%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%]Step 3: Open the product buying options template
The buying options template can be found here /httpdocs/assets/themes/[THEME-NAME]/products/includes/buying_options.template.html.
Step 4: Copy buying options form
Take a copy of the existing buying options form <form class="buying-options">...</form>. Keep this copy seperate, you'll need it for a later step.
Step 5: Replace the buying options form
Replace your buying options form with the following code below.
[%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%]Note: 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%]).
Step 6: Paste old buying options
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.
Step 7: Style the cross-sells
Open up your theme stylesheet, typically found at the following location /httpdocs/assets/themes/[THEME-NAME]/css/style.css and insert the following code:
.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.