Personalized checkout and custom promotions with Shopify Scripts
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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024