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

Technical Q&A
1

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); 
      c**onsole.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!

2

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

3

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