Solved

Add - To - Cart Button Issue

eslamibrahim
Shopify Partner
22 0 2

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

 

 

 

eslamibrahim_0-1718025564943.png

 

eslamibrahim_1-1718025565389.png

 

 

Accepted Solution (1)
BSSCommerce-B2B
Shopify Expert
484 93 108

This is an accepted solution.

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

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 7 (7)

Darshanp712
Shopify Partner
131 19 14

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.

ProtoMan44
Shopify Partner
353 28 56

please share url @eslamibrahim 

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
eslamibrahim
Shopify Partner
22 0 2

BSSCommerce-B2B
Shopify Expert
484 93 108

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

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
eslamibrahim
Shopify Partner
22 0 2

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

BSSCommerce-B2B
Shopify Expert
484 93 108

This is an accepted solution.

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

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-B2B
Shopify Expert
484 93 108

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency