Add - To - Cart Button Issue

Shopify Discussion
,
1

When I click on add to card or buy it now, disappear for 1 sec and appear again.

eslamibrahim_0-1718025564943.png
eslamibrahim_0-1718025564943.png400×195 31.5 KB

eslamibrahim_1-1718025565389.png
eslamibrahim_1-1718025565389.png400×198 39.8 KB

1 Like
2

Hello @eslamibrahim , Please share the preview link or share the live store link.

3

please share url @eslamibrahim

4

https://level-up.gg/

5

Hi @eslamibrahim

Please follow the instructions below.

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2.

With button Add to cart

Find the file product-form.js. Search for the following JS snippet

this.submitBtn.setAttribute('aria-disabled', 'true');

Please disable this JavaScript code by commenting it as follows:

//this.submitBtn.setAttribute('aria-disabled', 'true');

With button Buy It Now

Find the file portable-wallets.en.js. Search for the following JS snippet

attributeChangedCallback(t, n, r, a) {
        n !== r && t === "disabled" && a && (r ? (a.setAttribute("aria-disabled", "true"),
        a.setAttribute("disabled", "true")) : (a.removeAttribute("aria-disabled"),
        a.removeAttribute("disabled")))
    }

Please fix it to

attributeChangedCallback(t, n, r, a) {
        n !== r && t === "disabled" && a && (r ? (
        a.setAttribute("disabled", "true")) : (a.removeAttribute("aria-disabled"),
        a.removeAttribute("disabled")))
    }

If it helps you, please like and mark it as the solution.

Best Regards

6

I solved it button Add to cart, but button Buy It now I didn’t find That file portable-wallets.en.js

7

Hi @eslamibrahim

It’s like a third-party app has created the file portable-wallets.en.js and it’s being served through a CDN instead of existing within your theme, hmm.

I have an alternative solution. Please add the code below to the end of the product-form.js file.

(() => {
    setTimeout(() => {
        if(location.pathname.includes("/products/")) {
        const targetNode = document.querySelector('.shopify-payment-button__button');
        const config = { attributes: true, attributeFilter: ['aria-disabled'] };
        const callback = function(mutationsList, observer) {
            for(let mutation of mutationsList) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'aria-disabled') {
                    mutation.target.removeAttribute('aria-disabled');
                }
            }
        };
        const observer = new MutationObserver(callback);
        if (targetNode) {
            observer.observe(targetNode, config);
        }
        }
    }, 1000)
})()

If it helps you, please like and mark it as the solution.

Best Regards

8

Hi @eslamibrahim ,

We’re happy to see that our suggestion helped you solve the issue: https://community.shopify.com/c/shopify-discussions/add-to-cart-button-issue/m-p/2612376#M447067

Can you kindly give us likes? This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance.