how can I refresh my add to cart info when I click in add to bag?
I am creating a second way to add products in a cart. (complete your look)
when I click in add to bag is calling the function I created , and is adding to the cart!
but I can’t see this new item added in the cart at the first time
Just if I refresh the page.
But I don’t wanna, I would like to see this with out refresh .
you can see that in the develop page here:
here is my function:
Hi @DaviAmaral ,
You have to use fetch and add a listener so fetch will run whenever there is changes
I am trying different way, but none off them is working :
<script>
function addtocartSuggestion_1(){
var variant = $("#variants_1").val();
console.log(variant);
var items = [{ quantity: 1, id: variant }];
$.ajax({
type: "POST",
url: '/cart/add.js',
data: { items: items },
success: function(data) {
console.log('success');
document.dispatchEvent(new CustomEvent('cart:build' , {bubbles: true }));
document.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true }));
},
dataType: 'application/json'
});
$("#CartBubble").addClass("cart-link__bubble--visible");
document.addEventListener('cart:updated', function() {
console.log("teste");
});
document.dispatchEvent(new CustomEvent('cart:build' , {bubbles: true }));
document.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true }));
document.dispatchEvent(new CustomEvent('cart:update ', {bubbles: true }));
}
</script>
if you go to this link https://tkeescanada.myshopify.com/collections/clothing/products/jogger-core
you can see is just work when u add at the second time
I think I found the solution, but I need to see if I can do something a little better
The problem was the cart was a little slow to show values.
so I used that, and now is showing the cart:
<script>
function addtocartSuggestion_1(){
var variant = $("#variants_1").val();
console.log(variant);
var items = [{ quantity: 1, id: variant }];
$.ajax({
type: "POST",
url: '/cart/add.json',
data: { items: items },
success: function(data) {
console.log('success');
},
dataType: 'application/json'
});
// Now I will do a get to show the itens from cart
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
}));
});
}, 400);
}
</script>
I need to reload the page for see changes in the cart drawer (Dawn theme).
jQuery(“.quantity__button.increment”).on(“click”, function(e) {
e.preventDefault();
var variant = $(this).attr(‘data-variant-id’);
console.log(“Variant:”, variant);
var items = [{ quantity: 1, id: variant }];
console.log(“Items:”, items);
$.ajax({
type: “POST”,
url: ‘/cart/add.json’,
data: { items: items },
success: function(data) {
console.log(‘Success’);
console.log(“Data sent in AJAX!”);
document.dispatchEvent(new CustomEvent(‘cart:build’, { bubbles: true }));
document.dispatchEvent(new CustomEvent(‘cart:refresh’, { bubbles: true }));
},
dataType: ‘application/json’
});
// Now I will do a get to show the items from cart
setTimeout(function() {
jQuery.getJSON(‘/cart.js’, function(cart) {
console.log(“Check data sent in cart?”);
let cartData = cart.items;
document.dispatchEvent(new CustomEvent(‘cart:build’, { bubbles: true }));
document.dispatchEvent(new CustomEvent(‘cart:refresh’, {
bubbles: true,
detail: cartData
}));
});
}, 400);
});
I found a helpful solution for updating the cart drawer in Shopify’s Dawn theme after adding a product. You can check out the step-by-step guide I came across here: How to Update Cart Drawer in Shopify’s Dawn Theme