Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
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
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.
@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
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 %}