d
Topic
Posts:
27
May 03, 2016

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
May 05, 2016

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
May 09, 2016

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>

 

viral.w3nuts Member
Posts:
10
Last edited June 19, 2017

Hi Friends,

Looking for similler requirements.
NEED TO CONVERT SIZE DROPDOWN SELECTION INTO RADIO BUTTONS

did you get any working solution ?

Currently my original selection dropdown code is as following. I tried many suggestion but varient selection using radio didnot registering selection on checkout.

<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
  <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>

 

viral.w3nuts Member
Posts:
10
June 24, 2017

Hello Friends

I figure out solution for my similer requirements. It might help you.

I have replaced following original code snipets from product-template.liquid

<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
  {% for variant in product.variants %}
	{% if variant.available %}
	  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
		{{ variant.title }}
	  </option>
	{% else %}
	  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
	{% endif %}
  {% endfor %}
</select>

 

Following Solution worked for me. Ref.
I have replaced above code with following code snipets

<div 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">
				  <strong>{{ variant.title | escape }}</strong> for <span class="bold-blue">{{ variant.price | money }}</span>
				  {% if variant.price < variant.compare_at_price %}<del>{{ variant.compare_at_price | money }}</del>{% endif %}
			  </label>
		  {% else %}
			  <input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" disabled="disabled" />
			  <label for="radio_{{ variant.id }}" class="radio">
				  <strong>{{ variant.title }}</strong> is temporarily unavailable
			  </label>
		  {% endif %}
	  </li>
  {% endfor %}</ul>
</div>

 

Posts:
12
11 months ago

have you ever found a solution to this? I'm facing the same issue.

Posts:
3
9 months ago

Hi Gince, did you end up finding a fix for this?

Martino Harly Member
Posts:
19
8 months ago

are there instructions how to do this ? i need to convert my project from select to radio also.

Posts:
12
8 months ago
g
1
upvotes

Hi there, yes I found a  solution, this should help you. https://goo.gl/JESkzv

 

 

 

 

 

Martino Harly Member
Posts:
19
8 months ago

ohh nice thank you.

i got it to work but during page load the select drop down visible for few seconds. not til the css hides them. is there a way to make it so they dont show up at all.

Posts:
12
Last edited 8 months ago

1. Hide it on page load using Java script.

2. Use a preloader.

Martino Harly Member
Posts:
19
Last edited 8 months ago

any chance that you are using option_selection.js for the original select drop down?

edit: not sure why..... but its working and sufficient hidding it with css. wasnt working last time. must be the order they were loaded or something.

 

Thanks guys