CODEWITHSUNDEEP
shopifyliquid-layoutshopify-app
infinitywarior
infinitywarior

Reputation: 379

Shopify product variants option display in radio button

I want to show the product variant options as radio buttons like here enter link description here

But my current theme shows the options as dropdowns. Iwant to list it as above. Can anyone please help me know how to render it like that of above link. Need to know only the template code . I will work on the CSS part on my own.

{% if product.options.size > 1 %}

// how to display the product options with label(like color) and its options(Red,Yellow)

{% endif %}

Upvotes: 2

Views: 7243

Answers (3)

DESHRAJ
DESHRAJ

Reputation: 104

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

Upvotes: 2

Balamurugan
Balamurugan

Reputation: 1

{% comment %}
Filename : product-template.liquid
code for displaying variants as radio buttons instead of select option
Note : Please don't remove existing selectbox, Hide with display options
<div class="selector-wrapper js product-form__item" style="display:none;">
{% endcomment %}

{% unless product.has_only_default_variant %}

  {% for option in product.options_with_values %}
        {% assign my_option =  forloop.index0  %}
    <div>  
      {% for value in option.values %}
        <input  
        type="radio" 
        name="{{option.name}}" 
        onclick="return bala(this.name,this.value, this.id);"
               value="{{ value | escape }}"
        id="SingleOptionSelector-{{ my_option }}"
                              >
        <label for="{{option.name | handleize}}-{{value | escape | handleize}}" class="{{option.name | downcase}}">
          {{value}}
        </label>

      {% endfor %}
    </div>
  {% endfor %}
{% endunless %}    


<!--  Javascript For changing selectbox value with radio button selection -->
 <script>    
    function bala(name, value, id)
    {
      $('#'+id).val(value).trigger('change')
    }  
  </script>

Upvotes: 0

Up at Five
Up at Five

Reputation: 56

You could do something like this. Noting that the for= in the label should match the id in the input.

 {% unless product.has_only_default_variant %}
  {% for option in product.options_with_values %}
    <div>  
      {% for value in option.values %}
        <input 
        type="radio" 
        name="{{option.name}}" 
        value="{{ value | escape }}"
        id="{{option.name | handleize}}-{{value | escape | handleize}}">
        <label for="{{option.name | handleize}}-{{value | escape | handleize}}" class="{{option.name | downcase}}">
          {{value}}
        </label>
      {% endfor %}
    </div>
  {% endfor %}
{% endunless %}

Upvotes: 1

Related Questions