Product variant selection radio buttons are disallowing (disabling) buy now button

Technical Q&A
1

Hey guys, been stuck on this for ages, so if anyone could help, I’d really appreciate it.

Basically as I didn’t want the default size dropdown, I decided radio buttons would be better as I could style them like swatches. I did it like so:

{% for variant in product.variants %}
                
                  {% if variant.available %}
                    

                  {% else %}
                    

                   {% endif %}
                  
                    
                  

              {% endfor %}

As for the script it’s referencing:

var ps = null;
    window.doSelectVariant = function(variantId) {
      if (ps) {
        ps.classList.remove("price-selected")
      }
      ps = document.getElementById("radio_container_" + variantId)
      ps.classList.add("price-selected")
      document.getElementById("radio_" + variantId).click()
    }

Anyway, this actually works fine on the add to cart button. However, the buy now button is greyed out/disabled, there’s no javascript event on the buy now button either so removing the disabled classes/attributes means it’s clickable, but doesn’t send me to checkout at all. Weird scenarios it does work though: If I add to cart, it suddenly becomes avaialable OR if I select a variant then refresh, it becomes available.

My assumption is this is not working for some reason as it’s not selecting a default variant? Does anyone have any ideas or any javascript that could assist in sending my customers to the checkout, even if it’s some custom stuff.

I’m using Debut and all the product file code is in product-template.liquid, none of the other files

2

Nevermind lads, somehow just doing a default selection on the radios with some simple JS meant it worked, lol. Cheers anyway!