Re: Ajax Cart not update

Solved

Why doesn't my Ajax Cart update immediately after adding a product?

suresh-prevaj
Tourist
7 1 0

 mini cart not update while i'm adding to cart the product. but when refreshing the page it will update the minicart on the product. where I need to check the files.

 

Accepted Solutions (4)

Rishihuptech
Shopify Partner
643 118 129

This is an accepted solution.

Hi @suresh-prevaj 
Can you tell me which theme you are having this issue and URL of the store.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

suresh-prevaj
Tourist
7 1 0

This is an accepted solution.

Rishihuptech
Shopify Partner
643 118 129

This is an accepted solution.

Hi @suresh-prevaj 
Upon checking i found that the product page is made with page builder app, That's why the cart is not working.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Rishihuptech
Shopify Partner
643 118 129

This is an accepted solution.

Hi @suresh-prevaj 
You can use the below code to refresh the cart

<script>
document.addEventListener("DOMContentLoaded", function() { 
$('.gp-button-base').on('click',function(){
   setTimeout(function() {
   jQuery.getJSON('/cart.js', function(cart) {
        let cartData = cart.items;
        document.dispatchEvent(new CustomEvent('cart:build' , {bubbles: true})); 
        document.dispatchEvent(new CustomEvent('cart:refresh', {
            bubbles: true,
             detail: cartData
        })); 
   });
   }, 1000); 
   });
});
</script>
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 8 (8)

Rishihuptech
Shopify Partner
643 118 129

This is an accepted solution.

Hi @suresh-prevaj 
Can you tell me which theme you are having this issue and URL of the store.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
suresh-prevaj
Tourist
7 1 0

This is an accepted solution.

Rishihuptech
Shopify Partner
643 118 129

This is an accepted solution.

Hi @suresh-prevaj 
Upon checking i found that the product page is made with page builder app, That's why the cart is not working.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
suresh-prevaj
Tourist
7 1 0

yes. i got this. is there any possible to refresh the cart after add to cart. on the js.

Rishihuptech
Shopify Partner
643 118 129

This is an accepted solution.

Hi @suresh-prevaj 
You can use the below code to refresh the cart

<script>
document.addEventListener("DOMContentLoaded", function() { 
$('.gp-button-base').on('click',function(){
   setTimeout(function() {
   jQuery.getJSON('/cart.js', function(cart) {
        let cartData = cart.items;
        document.dispatchEvent(new CustomEvent('cart:build' , {bubbles: true})); 
        document.dispatchEvent(new CustomEvent('cart:refresh', {
            bubbles: true,
             detail: cartData
        })); 
   });
   }, 1000); 
   });
});
</script>
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
suresh-prevaj
Tourist
7 1 0

for this code i'm using on the console. but it doesn't work. or how can i use the above mentioned code. also where i to place this code. js code

 

suresh-prevaj
Tourist
7 1 0

the code doesn't update the cart. it's running while clicking the addtocart. Is there any alternative code. please let me know.

 

suresh-prevaj
Tourist
7 1 0

@Rishihuptech wrote:

Hi @suresh-prevaj 
You can use the below code to refresh the cart

 

<script>
document.addEventListener("DOMContentLoaded", function() { 
$('.gp-button-base').on('click',function(){
   setTimeout(function() {
   jQuery.getJSON('/cart.js', function(cart) {
        let cartData = cart.items;
        document.dispatchEvent(new CustomEvent('cart:build' , {bubbles: true})); 
        document.dispatchEvent(new CustomEvent('cart:refresh', {
            bubbles: true,
             detail: cartData
        })); 
   });
   }, 1000); 
   });
});
</script>

 

<script>
document
.addEventListener("DOMContentLoaded", function() {
$('.gp-button-base').on('click',function(){
setTimeout(function() {
var cart = fetch(window.Shopify.routes.root + 'cart.js').then(response => response.json()).then(data => { return data });
Shopify.onItemAdded(cart);
}, 1000);
});
});</script>
for this code is work on the website. but it has problem Shopify.onItemAdded(cart); for this line need the cart itemline object. how i get this cart itemline.