Convert option varients to radio buttons

momoluca
Tourist
3 0 2

Hello everyone!,

First time poster here im a bit stuck on a tricky problem but I am almost there! I want convert our stores existing selector into radio buttons

(This is what I have so far)

Screenshot 2021-09-16 at 16.39.47.png

The probelm is when i submit nothing happens

However i know the radio submission does work as i tested it using this code:

<div class="selector-wrapper">
 <ul> {% for variant in product.variants %}
   <li>         
        <label for="radio_{{ variant.id }}" class="radio"><input id="radio_{{ variant.id }}" type="radio" name="id" {% if forloop.first %}checked="checked"{% endif %} value="{{ variant.id }}">
                        {{ variant.title }} - {{ variant.price | money }}
         </label>
   </li>

      {% endfor %}
  </ul>

</div> 

This is what I have so far:

 

{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item lf-variant-{{ option.name }}">
<div class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% if option.name != 'Color' %}
<input type='radio' value="" checked="checked">Select {{ option.name }}</option>
{% endif %}
{% for value in option.values %}
<input type='radio' value="{{ value | escape }}">{{ value }}</option>
{% endfor %}
</div>
</div>
{% endfor %}
{% endunless %}

This is how it supposed to look like 

 

Screenshot 2021-09-16 at 16.35.28.png

 

All help appreciated!

KetanKumar
Shopify Partner
23689 2385 8698

@momoluca 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
momoluca
Tourist
3 0 2