trigger function on a variant selection change

Highlighted
Shopify Partner
13 0 0

Hi

 

I am trying to follow the following instructions to trigger some function when the user changes variant on the product page.

 

https://help.shopify.com/en/themes/customization/products/variants/use-products-with-multiple-option...

 

I have put on top of "product.template.liquid" the following code:

 

<script>
// <![CDATA[
var selectCallback = function(variant, selector) {
console.log("callback")
}
// initialize multi selector for product
jQuery(function($) {
new Shopify.OptionSelectors("product-select", { product: , onVariantSelected: selectCallback });
});
// ]]>
</script>

 

I'm not sure what should be in front of "product:". If I put nothing (as in the tutorial), I have a "syntax error", and if I put the liquid tag "{{product}}" I have the error "productDrop" is not defined. I have no idea why it does not work, I thought I had followed the instructions correctly.

 

Anyone sees the problem?

0 Likes
Highlighted
Shopify Expert
2684 67 814

What theme you're using (and/or shop url)?

 

Most recent themes have the variant selection code in their theme javascript files. Shopify-built themes usually use slate.Variants, however, say, Boundless still uses option_selection.js library, but the code which replaced selectCallback is in it's theme.js.liquid asset under Product.prototype.

Other themes may use different code.

 

Most older themes  already has option_selection.js and only the ancient ones do not have any variant selection code, but in this case it's definitely better to upgrade to a newer theme.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Shopify Partner
31 0 3

Hi there, Not sure if it matters now to you, but may be help others who are looking for similar issue.

below line should replace product parameter:

product: {{ product | json }}

So the full line would look like this 

new Shopify.OptionSelectors("product-select", { product: {{ product | json }}  , onVariantSelected: selectCallback });

 

Hope this helps someone.

Cheers!

Navin 

0 Likes