Simple question: How to edit the variant select code for minimal theme?

New Member
7 0 0

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!

 

0 Likes
Highlighted
Excursionist
30 3 3

@Michael_Holmes Do you use Shopify's option_selection.js in your assetes?

 

Are you looking for a new store or have a problem? Let me know!
0 Likes
Highlighted
New Member
7 0 0

Found it in my theme.js. Thanks for the reply.

0 Likes