I have changed the dropdown variant selection in to radio buttons in minimal theme but having issue

numairnj
Visitor
1 0 0

 

I have changed the dropdown variant selection in to radio buttons in minimal theme but having now  think javascript is not running ,  i am unable to open menu on mobile and product images are not working.

page link

https://www.jacquard.pk/collections/winter/products/yellow-blooms?variant=31198498062447 

 

OLD CODE

 

 

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

 

 

 new code 

 

 

<div id="ProductSelect-{{ variant.id }}" class="product-variants infiniteoptions">
  <ul>{% for variant in product.variants %}
  <li class="{% cycle 'odds': 'odd', 'even' %}">
  {% if variant.available %}<input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" {% if forloop.first %}checked="checked"{% endif %} />
  <label for="radio_{{ variant.id }}" class="radio">
  {{ variant.title | escape }}
  
  </label>
  {% else %}
  <input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" disabled="disabled" />
  <label for="radio_{{ variant.id }}" class="radio">
  {{ variant.title }} (out of stock)
  </label>
  {% endif %}
  </li>
  {% endfor %}</ul>
</div>



 

 

id="ProductSelect-{{ section.id }}"

when ever i remove this everything on page stop working

 

Reply 1 (1)

AvidBrio
Shopify Expert
295 17 29

@numairnj  this code snippet work for me, can you share the web console error log.  


If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com