Radio buttons generator instead of select/options one

[cedrichadjian]

Hey there, is there any Shopify library I could use to generate radio buttons instead of using something like:

    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

 Or do I need to implement my own custom-made radio buttons?

[iDoThemes]

It will really depend on the theme you are using. Some have theme settings to toggle between swatch buttons or a drop down, but if you one only has dropdowns, you'll need to develop your own solution.

[cedrichadjian]

Hey thanks for your reply, below is the script that is generating the select/option section, can you please let me know what exactly I should remove and then add to make it work as radio? I'm a developer so I know how to code the CSS/JS logic of radio, but I'm just not figuring out where exactly select/option logic is occurring. 

<script>
  // I think it's for the popup modal
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant,
      selector,
      translations: {
      add_to_cart : "{{ 'products.product.add_to_cart' | t }}",
      sold_out : "{{ 'products.product.sold_out' | t }}",
      unavailable : "{{ 'products.product.unavailable' | t }}"
    } 
  });
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });


    {% if settings.enable_linked_option %}
    {% if product.available and product.options.size > 1 %}
    Shopify.linkOptionSelectors({{ product | json }});
    {% endif %}
    {% endif %}

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
	{% endif %}
                                         
     // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
     $('.selector-wrapper').hide();
     $('.selector-wrapper-secton').hide();
    {% endif %}
    
    // Auto-select first available variant on page load. Otherwise the product looks sold out.
    {% assign found_one_in_stock = false %}
    
    {% for variant in product.variants %}
    
    {% if variant.available and found_one_in_stock == false %}
    
    {% assign found_one_in_stock = true %}
    
    {% for option in product.options %}
    $('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
    {% endfor %}
    
    {% endif %}
    
    {% endfor %}
    
    $('.product-single .single-option-selector').wrap('<div class="selector-arrow">');
  });   

  
</script>

[iDoThemes]

Most themes don't remove that selector and I'd advise against removing it.  The usual process for add to cart is to serialize the form and POST it to the add to cart end point. The selector is part of that form and lets the back-end know which variant is to be added. 

The usual process is to hide the selector if javascript is enabled, then change the selector when different swatch buttons are selected.  If javascript is disabled then the selector will work as a fall back. You can try out some of free Shopify themes that have swatch buttons and see how it works. Here's an example of a store I'm working on (I've unhidden the selector):

[PaulNewton]

---

@iDoThemes wrote:

You can try out some of free Shopify themes that have swatch buttons and see how it works. Here's an example of a store I'm working on (I've unhidden the selector):

---

And on other stores with multiple choices, more than 1 variant options , to see the underlying selector for themes following standard conventions some CSS to use in devtools or userstyle extensions. Useful if you need to figure out a weird setup of options.

.product-single .single-option-selector, select.single-option-selector {
 display: block !important;
 visibility: visible !important;
 opactiy: 1 !important;
}

[cedrichadjian]

I see. Thank you for your answer. I have actually worked on one before and it was pretty stressful to achieve it, I do remember making a request to get the variant ID of the combination, I asked this to check whether there's an easy and proper way to do it via some sort of library or use the existing code to modify it accordingly.

[PaulNewton]

Theme implementations vary wildly and not all hidden selectors may have the variant ID in the <option>'s value attribute.

And not all older themes will even have the <select> and newer themes may not either instead puking out custom html components.

Otherwise just grab the <select> if it exists generally targeting the following structure in selector queries

<form method="post" action="/cart/add">

<select name="id">

document.querySelector('form[action="/cart/add"] select[name="id"]')