d
Topic
Posts:
27
11 months ago

Convert variant drop down menu to radio buttons This post is outdated

Hi all,

I'm trying to convert the variant drop down menu to radio buttons. I got radio buttons to show up on the front end, with the info that I need associated with them. But I can't get rid of the drop down. If I delete it, my radio buttons disappear and the drop down stays! Ladies and gentlemen of the jury, that does not make sensth.

Here's my original code:

{% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}{{ product-form }}" name="id" class="multi_select">
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "Title") %}
      <div class="select">
        <label>{{ product.options[0] }}</label>
        <select id="product-select-{{ product.id }}{{ product-form }}" name="id">
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    {% endif %}

 

Here's my code with the radio buttons:

    {% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}{{ product-form }}" name="id" class="multi_select">
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    	
	  <div id="product-select-{{ product.id }}{{ product-form }}" name="id" class="multi_select">
         {% for variant in product.variants %}
            <input type="radio" name="qty" {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} <br>
            <p class="variant_price">{{ variant.price | money_without_trailing_zeros }} <span>(${{ variant.sku }})</span></p>
         {% endfor %}
      </div>
    
    {% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "Title") %}
      <div class="select">
        <label>{{ product.options[0] }}</label>
        <select id="product-select-{{ product.id }}{{ product-form }}" name="id">
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
      <div id="product-select-{{ product.id }}{{ product-form }}" name="id" class="multi_select">
          {% for variant in product.variants %}
            <input type="radio" name="qty" {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} <br>
            <p class="variant_price">{{ variant.price | money_without_trailing_zeros }} <span>(${{ variant.sku }})</span></p>
          {% endfor %}
      </div>
    {% else %}

 

Even if I could get the buttons to stay and the <select> to go, would my radio buttons even work?

Any advice on this would be appreciated. Thanks in advance!

i
Replies
Rob Shopify Employee
Posts:
61
11 months ago

Hi Amanda,

Hopefully perhaps one of the developers will jump in if I'm off base but your code looks good to me and I can't see that there would be any issues with changing the drop down to radio.  I did find a few forum posts on an external site that mentioned the code to make radio buttons is very similar to our walkthrough here:   

https://help.shopify.com/themes/customization/showcase-products/add-color-swatches

If you ignore the fact that it is to create color swatches, and look at it as changing drop down to radio buttons as the variants would normally be a drop down option it could help ensure that the code works as well as it should.  

I also had a colleague look at the code as well and he felt it looked fine but the walkthrough above could help significantly too.

Rob
Shopify Guru

Rob Shopify Guru
Posts:
27
11 months ago

Hi Rob,

I appreciate the link. I did the walkthrough and I feel like I made some progress, but the site still won't register my radio buttons as it would if I select something from a drop down. I select the radio button, but when I Add to Cart, it doesn't register my selection.

Here's what I have for the radio buttons now:

<div id="product-radio-{{ product.id }}{{ product-form }}" name="id" class="multi_select">
         {% for variant in product.variants %}
            <input type="radio" name="qty" {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} <br>
            <p class="variant_price">{{ variant.price | money_without_trailing_zeros }} <span>(${{ variant.sku }})</span></p>
         {% endfor %}
      </div>

And here is what I have to register the buttons, but it doesn't work:

 

<script type="text/javascript">
      // <![CDATA[  
        $(function() {    
          $product = $('.product-' + {{ product.id }});
          new Shopify.OptionSelectors("product-radio-{{ product.id }}{{ product-form }}", { product: {{ product | json }}, onVariantSelected: selectCallback{% if template contains 'product' %}, enableHistoryState: true{% endif %} });          
        });
        
        
      // ]]>
    </script>