Cart problem

Shopify Discussion
,

Topic summary

A Shopify developer is experiencing display issues with their cart drawer when adding products without a page refresh.

The Problem:

  • When products are added to the cart, the cart drawer doesn’t display correctly
  • Multiple instances of the same product show formatting issues
  • After a full page refresh, the cart displays properly

Current Approach:

  • The developer is manually updating innerHTML for cart elements
  • They’ve shared their current code implementation via CodeShare
  • Screenshots demonstrate the visual difference between the broken state and post-refresh corrected state

Attempted Solution:

  • Tried using AJAX to add items and fetch the cart-drawer section
  • Attempted to replace specific elements (cart-drawer-items, .cart-drawer__footer) using DOM manipulation
  • This approach did not resolve the display issues

Status: The issue remains unresolved. The developer is seeking a simpler method to update the cart drawer dynamically without requiring a full page refresh, as their current section-replacement strategy isn’t working.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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=49834624745811. After refreshing it looks way better so easily that’s why im asking.

Schermafbeelding 2025-02-05 220544.png
Schermafbeelding 2025-02-05 220544.png1919×1079 317 KB

Schermafbeelding 2025-02-05 220535.png
Schermafbeelding 2025-02-05 220535.png1919×1079 327 KB

After refreshing:

Schermafbeelding 2025-02-05 220930.png
Schermafbeelding 2025-02-05 220930.png1919×1079 321 KB

Please I need help with this!

2

Hello @AmeliaIsabella can you please show how, I tried that yesterday and it did not work

3

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);
}
});