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

[suresh-prevaj]

 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.

[Huptech-Web · Accepted solution]

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

[suresh-prevaj · Accepted solution]

https://www.darkhorsecoffeecompany.com/
theme : DHCC

[Huptech-Web · 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.

[Huptech-Web · Accepted solution]

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

[suresh-prevaj · Accepted solution]

https://www.darkhorsecoffeecompany.com/
theme : DHCC

[Huptech-Web · 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.

[suresh-prevaj]

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

[Huptech-Web · 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>

[suresh-prevaj]

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]

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]

---

@Huptech-Web 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.

---