Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
Hi all,
I have been trying to edit the variant select code for the last hour, but I'm starting to think that the code is being replaced by some javascript that I don't know about. Main point is whatever I do to this code, it doesn't seem to show up on the live page view.
Here is the code in the product-template
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants"> {% for variant in product.variants %} {% if variant.available %} <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option> {% else %} <option disabled="disabled"> {{ variant.title }} - {{ 'products.product.sold_out' | t }} </option> {% endif %} {% endfor %} </select>
Here is the code when I load the page.
<select class="single-option-selector" data-option="option1" id="ProductSelect--option-0"><option value="Default Title">Default Title</option><option value="Buster">Buster</option></select>
Notice how class="product-single__variants" became class="single-option-selector"
What I'm trying to do is use jquery to track when a selection is changed and use that data somewhere else.
I tried this
console.log('script triggered'); //WORKS
$(function(){ console.log('function triggered'); //WORKS $('.single-option-selector').change(function(){ var data= $(this).val(); alert(data); console.log('triggered change'); //DOES NOT WORK }); $('.single-option-selector') .val('two') .trigger('change'); });
I can see the above code is being executed, but the selector change does not trigger as it should.
Any help or insight would be appreciated!
@Michael_Holmes Do you use Shopify's option_selection.js in your assetes?
Found it in my theme.js. Thanks for the reply.
User | RANK |
---|---|
3 | |
2 | |
2 | |
1 | |
1 |