Add to Cart button doesn't work on products with variants (sometimes)

Technical Q&A
1

I just noticed the “Add to Cart” button becomes disabled as soon as I pick a variant of one of my products, like a hat size, making it impossible to add those items to my cart. However, I can add an item if I don’t pick a variant or if there is only one variant available or if I refresh the page after selecting a variant.

My website (and product page to test issue): https://grayfoxww.com/products/flexfit-branded-hat-white

Thank you in advance!

2

The sites theme has a console error:

global.js?v=138967679220690932761645924793:810 Uncaught TypeError: pickUpAvailability.fetchAvailability is not a function
    at VariantSelects.updatePickupAvailability (global.js?v=138967679220690932761645924793:810:26)
    at VariantSelects.onVariantChange (global.js?v=138967679220690932761645924793:746:10)

Issues like this can often stem from modifications made to the related product template, such as invalid html, or important javascript not being output.

3

Thank you for finding the issue. How would I go about fixing it? I’m really not well-versed in coding to go at it by myself. I had a hard enough time describing the issue. Haha

4

GrayFox_1-1652613471190.png
GrayFox_1-1652613471190.png1920×1080 222 KB

I found the code that needs to be altered, I just don’t know how to alter it.

5

Hi @GrayFox ,

Please go to sections > main-product.liquid file, find ‘pickup-availability’. Please check the declaration of pickup-availability.js file, is it like the following screenshot?

Screenshot.png
Screenshot.png1226×473 41.1 KB

If the declaration is correct, please go to Assets and create the file pickup-availability.js

Screenshot.png
Screenshot.png1175×428 40.9 KB

After that, copy the following code and paste it in: https://github.com/Shopify/dawn/blob/main/assets/pickup-availability.js

Hope it helps!

6

Hi, I tried this and I already had the pickup-availability.js function. It did not work. I still cannot add to cart.

7

Hey @GrayFox ,

If you want to continuously monitor and test your store for issues like “add-to-cart not working” and “checkout not working”, you can use this free app called Store Watchers - Automated Testing & Monitoring Solution for Shopify.

This app will help you monitor whether your functionalities are operational or not. If any issue occurs and your customer is facing it then you can take immediate steps to fix these issues and offer your customer a great purchasing experience.

Hope this helps :slightly_smiling_face:

8

I was having the same issue, turns out that it happens when my variants have the “/” symbol in their names, I switched from “2 - Sky Blue / Matte” to “2 - Sky Blue Matte” and now the Add to cart button works again on my variants.
I hope this helped!

9

Was this symbol in the code?

How can I see if that is my issue?