Why does selecting a new variant disable my 'Add to cart' button?

Technical Q&A
1

I just added a gift card product to my site. It is using the same product template as all of the other products, but when you choose a different denomination/variant for the gift card, the Add to cart button becomes disabled. If you reload the page, it reactivates the button, but again if you choose any other denomination it disables the Add to cart button. Going back to the original variant does not reset the button. In other words, the issue doesn’t appear to be a particular variant, rather it’s the act of selecting a new variant that disables the button.

As I said, I’m using the same product template and this isn’t an issue with any other product. I’m using Dawn 9.0.0, but I just tested with my old Dawn 7.0.1 and the same thing happened. Also, though I’m not sure if this means anything, the Add to cart button is a different color for the gift card than it is for any other product (but only on 9.0.0, not on 7.0.1).

If I use Inspect, I can see that the action of clicking a variant adds the disabled attribute to the button. I just have no clue why.

Here’s the link: https://repurposedgallery.com/products/e-gift-card

Any ideas?

2

Possibly related to a bug in a function added by this comment

// START code added to hide non-selected variants -JR

Try adding images to the variants, there some weird error on your gift card page.

caught TypeError: Cannot read properties of undefined (reading 'alt')
    at VariantRadios.filterMedia (global.js?v=131969580919270855461683252870:837:63)
    at VariantRadios.onVariantChange (global.js?v=131969580919270855461683252870:820:10)

Where ‘alt’ is part of the filterMedia() function in global.js trying to read the images value for the image alt attribute.

So when it’s not found, cannot be read, it errors out and the rest of the script fails including swapping the add-to-cart button back to enabled.

If you need this debugged and fixed you can contact me directly for services.
Please provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

3

Winner, winner, chicken dinner!

Thank you, @PaulNewton . That code stopped working with the upgrade from Dawn 7.0.1 to 9.0.0, so I should have deleted it anyway. I just did and it resolved the issue.

4

Hi Paul

We have the same issue on our page https://adnams.co.uk/collections/gift-vouchers/products/adnams-e-gift-voucher?variant=40876797362355

I have added images to variants but still not working

Rob

5

Hi Paul, I am experiencing the same issue and can’t get help from Shopify since last week. Would you please help me? I really need this to be fixed. Thank you!