ShopSite Forums

Hi,

I am looking for a way to add conditional logic to the cross-sell area of my shopping cart template.

Ideally, this is based on the order quantity of a particular product. Specifically, if the shopper orders more than 5 pounds of coffee, I want to cross-sell a choice of bags to go with it.

I'm expecting I'll need to access the [-- SC_JAVASCRIPT extras --] to pull this off...

Anyone have tips?

Thank you,
Gerry

Do you have other products with cross sell items that you want to display always, with just a quantity of 1. Or, can customers mix and match products/coffees, and once they hit 5 products/coffees, you want to display the global cross sell?

A quick option would be to add style="display: none;" to the containing element for the cross sell (or example <div id="crosssell" style="display: none;">), then add some javascript that checks to see if there are 5 products in the cart, if there are, remove the display: none;. The following javascript will work for the DIV example I used. You can place this code in the 'text at the bottom of the shopping cart screen' field under Commerce Setup > Order System > Shopping Cart.

<script type="text/javascript">
var $ = ss_jQuery, jQuery = ss_jQuery;
if (number_products >= 5) {$("#crosssell").show();}
</script>

Hi Lauren,

I had not thought about using CSS and JS but this is very cool.

The thing is that I need to key it off of the quantity of a product, rather than the number of products in the cart.... so that once someone orders 5 pounds or more, they get the option to buy bags as a cross-sell in the cart.

Could I set the script to be triggered by one of those variables? Would it need to loop through?

<script type="text/javascript">
var $ = ss_jQuery, jQuery = ss_jQuery;
if (ss_quantity >= 5) {$("#crosssell").show();}
</script>

Like this?

<script type="text/javascript">
<!--
for (i = 0; i < number_products; i++) {
if (ss_quantity[i] >= 5) {
$("#crosssell").show();
}
}
// -->
</script>

That looks good to me. Try it out to make sure it works correctly.

Not working... something must be off!

Okay... I caught my mistake... the correct code is:

<script type="text/javascript">
var $ = ss_jQuery, jQuery = ss_jQuery;
for (i = 0; i < number_products; i++) {
if (ss_quantity[i] >= 5) {$("#crosssell").show();}
}
</script>