i want to use variant selector as radio button on debut theme

AvidBrio
Shopify Expert
293 17 21

I am trying to implement https://shopify.github.io/liquid-code-examples/example/product-variant-selector
product variant selector as a radio but it not working in the debut theme 
only first variant added to cart  but I selected other variant option 

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
Replies 3 (3)
Jayvin
Shopify Partner
284 42 85

Hi,

Whenever a particular radio button is clicked, you have to select the appropriate variant option in the original 'select', that's the big picture.

Themes already have scripts that already all these selection . You first need to look what the original scripts is doing and then hook up your own custom codes to work with it.

 

AvidBrio
Shopify Expert
293 17 21

@Jayvin thanks for your valuable answer. 

you can check your debut theme code with my code reference that was good for you what was working or not.

i know the selector not working for the radio button I already try some solution from community answer but that was not working. if you can provide the working code snippet that was great for the community 

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
john12
Shopify Partner
23 0 5

The most recent version of Debut successfully updates variants on inputs with the class name single-option-selector. I have working radio buttons based on a metafield ( product.metafields.product_selector.type == 'radio' ). No need for js customizations. Just customize how it looks with css, but don't use css to target the single-option-selector class.

{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
  {% for option in product.options_with_values %}
  {% assign i = forloop.index %}
  {% assign i0 = forloop.index0 %}

  {% if product.metafields.product_selector.type == 'radio' %}
    <fieldset class="product-form__controls-group" 
      id="SingleOptionSelector-{{ i0 }}" 
    >
    <legend>{{ option.name }}</legend>
      {%- for value in option.values -%}
      {%- assign variant_label_state = true -%}
      {%- if product.options.size == 1 -%}
        {%- unless product.variants[forloop.index0].available -%}
          {%- assign variant_label_state = false -%}
        {%- endunless -%}
      {%- endif -%}

      <input type="radio" 
          class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          {% unless variant_label_state %} disabled="disabled"{% endunless %}
          value="{{ value | escape }}"
          data-index="option{{ i }}"
          name="{{ option.name | handleize }}"
          id="SingleOptionSelector-{{ option.name | handleize }}-{{ value | escape }}"
      >
          <label for="SingleOptionSelector-{{ option.name | handleize }}-{{ value | escape }}">
            {{ value }}
          </label>
      {%- endfor -%}
    </fieldset>
  {% else %}
    <div class="selector-wrapper js product-form__item">
      <label for="SingleOptionSelector-{{ i0 }}">
        {{ option.name }}
      </label>
      <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
         id="SingleOptionSelector-{{ i0 }}"
         data-index="option{{ i }}"
       >
        {% for value in option.values %}
        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
        {% endfor %}
      </select>
    </div>
  {% endif %}
                
  {% endfor %}
</div>
{% endunless %}