Radio buttons generator instead of select/options one

cedrichadjian
Tourist
22 0 2

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?

Replies 6 (6)
iDoThemes
Trailblazer
161 34 56

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.

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line
cedrichadjian
Tourist
22 0 2

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
Trailblazer
161 34 56

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

screencast 2021-10-04 10-26-14.gif

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line
PaulNewton
Shopify Partner
3501 234 685

 


@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):

screencast 2021-10-04 10-26-14.gif


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

 

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
cedrichadjian
Tourist
22 0 2

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
Shopify Partner
3501 234 685

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"]')

 

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com