Liquid Generating Different HTML for Variants Depending on Whether It Has An Id or Class Attribute

BigRavenYoga
New Member
1 0 0

We're running into a weird issue in a Minimal theme when it comes to generating product variants…

The first (original, unmodified Minimal) example generates one kind of HTML, and the second a completely different kind of HTML. The first example completely ignores everything that we've put in the loop and generates its own <option> values (plus a label), while the second appears to use what we've put in the loop and does not generate a label.

By all appearances, if the <select> element contains an id or class attribute, Shopify's Liquid ignores everything in the loop and just does what it wants; the loop can even be removed completely and it will still generate all of the necessary option elements. Can anyone confirm or deny this or shed any light onto what's going on?

Example 1 (from the original Minimal theme)

 

 

<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>

 

 

The above generates the following HTML. Note the unrequested "selector-wrapper" div, the unrequested label element, and two (2) select elements, the first of which is visible and the second of which is forced hidden but matches the code in our templated loop. Everything inside the "selector-wrapper" div is unasked-for and automatically generated, while what we actually want displayed is styled with "display:none":

 

 

<div class="selector-wrapper">
	<label for="productSelect-option-0">Format</label>
	<select class="single-option-selector" data-option="option1" id="ProductSelect-product-template-option-0">
		<option value="Printed">Printed</option>
		<option value="Greeting Card Download">Greeting Card Download</option>
		<option value="Wall Hanging Download 6x6">Wall Hanging Download 6x6</option>
	</select>
</div>
<select name="id" id="ProductSelect-product-template" class="product-single__variants" style="display: none;">
	<option selected="selected" data-sku="" value="40702205952193"> Printed - $5.95 USD </option>
	<option data-sku="" value="40702205919425"> Greeting Card Download - $2.97 USD </option>
	<option data-sku="" value="40702205984961"> Wall Hanging Download 6x6 - $2.97 USD </option>
</select>

 

 

Example 2 (identical, but with id and class attributes removed from <select> element)

 

 

<select name="id">
	{% 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>

 

 

This generates different HTML — no "selector-wrapper" div, and our templated select element does NOT have "display: none" forced on it:

 

 

<select name="id">
	<option selected="selected" data-sku="" value="40702205952193"> Printed - $5.95 USD </option>
	<option data-sku="" value="40702205919425"> Greeting Card Download - $2.97 USD </option>
	<option data-sku="" value="40702205984961"> Wall Hanging Download 6x6 - $2.97 USD </option>
</select>

 

 

Adding any attribute to the <select> element in our template triggers the autogenerate of the "selector-wrapper" div. Does anyone know what's going on?

(Upon further reflection…I wonder if the JS used by Minimalist to manage the main image switch when a different variant is selected isn't modifying the DOM to add the extra select wrapper and hiding the generated one? The main image switch stops working if I remove the select ID/class attributes…)

0 Likes