All things Shopify and commerce
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello, is there an easy way to update the cart drawer without refreshing. Because changing all the innerHTML of all objects is a lot of work and they do not display exactly the same for when for example more of the same products are added to cart. When I refresh the cart looks good again though, so is there no easier way to update the cart drawer. I currently have this code: https://codeshare.io/7JBEXL and it looks like this for URL: https://interiorglows.com/products/cotton-buffalo-plaid-rug-soft-durable-home-decor?variant=49834624.... After refreshing it looks way better so easily that's why im asking.
After refreshing:
Please I need help with this!
Hello @AmeliaIsabella can you please show how, I tried that yesterday and it did not work
tried this but didnt work:
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: JSON.stringify(data),
dataType: 'json',
contentType: 'application/json',
success: function(response) {
console.log('Product added to cart:', response);
fetch(`${routes.cart_url}?section_id=cart-drawer`)
.then((response) => response.text())
.then((responseText) => {
const html = new DOMParser().parseFromString(responseText, 'text/html');
const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
for (const selector of selectors) {
const targetElement = document.querySelector(selector);
const sourceElement = html.querySelector(selector);
if (targetElement && sourceElement) {
targetElement.replaceWith(sourceElement);
}
}
})
.catch((e) => {
console.error(e);
});
},
error: function(XMLHttpRequest, textStatus) {
console.error('Error adding product to cart:', textStatus);
}
});