d
Topic
Posts:
27
May 03, 2016

Convert variant drop down menu to radio buttons

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
November 09, 2017

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

Posts:
3
10 months ago

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

Martino Harly Member
Posts:
22
10 months ago

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

Posts:
12
10 months ago
g
1
upvotes

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

 

 

 

 

 

Martino Harly Member
Posts:
22
10 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 10 months ago

1. Hide it on page load using Java script.

2. Use a preloader.

Martino Harly Member
Posts:
22
Last edited 10 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

Posts:
7
Last edited 14 days ago

Hey guys I found a little work around that you can use to convert your select drop down into a look alike input field. 

Just add the script to your main js file or into your liquid file that contains your select lists.

Once you use this script on which ever select list you want to open all you would need to do is edit some of your css. Though the css is a bit tricky, make sure you look into the following psuedo classes :checked :focus :hover ::before ::after.

<script>
var getOption1 = $('#element option').length;
$('#element select').attr('size',getOption1).css({"overflow":"auto","height":"auto"});
</script>

After some css this is what I ended up with..

So far everything is looking good for chrome.. Now I will have to adjust my css to for firefox and safari.

If you need to see this in action go here...

Anyway hope this helped anyone who was looking for an easy solution.