Add to Cart button non responsive on homepage.

[TimEasy]

Hi all, when clicking the add to cart button the homepage, I get no response.

If I then refresh the page, the items are showing in the cart. 

I can't seem to find any fix. Any ideas would be much appreciated.

https://synxsound.com/

[TheUntechnickle]

Hey @TimEasy.

Hope you're doing great!

I dug deep into your store and found when the ATC button is clicked on homepage, it throws an error in the console relating to product-form.js. We'll need to fix that in order to make the ATC work. Attached the screenshot of the error:

We'd love to fix this for you, for free. Please DM or email your collaborator code and we'll try to fix it.

Thanks,
Shubham | Untechnickle

[goldi07]

Hello @TimEasy 

This issue usually happens because of JavaScript conflicts, theme customizations, or Shopify's cart AJAX functionality not working correctly. Here’s what you can try to fix it:

Troubleshooting Steps
1.Check the Console for Errors

. Open the homepage.
. Right-click > Inspect > Console (or press F12 > Console tab).
. Look for any errors in red. If you see any, share them here.

2.Test in a Fresh Theme

. Try enabling a Shopify default theme (like Dawn) and see if the issue persists. If the issue is gone, it's likely a theme customization causing it.
3.Force a Cart Update After Adding

. Add this JavaScript snippet inside theme.liquid before </body>:

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.product-form button[type="submit"]').forEach(button => {
        button.addEventListener('click', function () {
            setTimeout(() => {
                fetch('/cart.js').then(response => response.json()).then(data => {
                    document.dispatchEvent(new Event('cart:updated'));
                });
            }, 1000);
        });
    });
});

.This forces a cart update after adding an item.
4.Check theme.js or cart.js

Some themes use cart.js for AJAX cart updates. Look for fetch('/cart/add.js') or similar and ensure it’s properly handling responses.
5.Disable App Conflicts

.If you've recently installed any apps, disable them one by one and test again.

Thank you 😊

[TimEasy · Accepted solution]

Hi all,

Thank you for your help.

When clicking the add to cart button, this error appears:

product-form.js:99 TypeError: Cannot read properties of null (reading 'classList')
at HTMLElement.fetchQuantityRules (product-info.js:61:69)
at pubsub.js:20:7
at Array.forEach (<anonymous>)
at publish (pubsub.js:19:28)
at product-form.js:76:15

I told ChatGPT my problem and it gave me the following response:

 

I followed instruction and now the issue is resolved.

[goldi07]

ok great 😊