I’m working on a custom product template and made my own add to cart button. The item gets added to the cart successfully, but the cart drawer doesn’t update automatically. I have to manually refresh the entire page to see the new item in the cart drawer.
I tried using a function from the existing cart.js file to refresh the cart after adding items, but it’s not working as expected.
refreshCartDisplay() {
if (this.tagName === 'SHOPPING-CART-ITEMS') {
fetch(`?section_id=shopping-cart-drawer`).then((res) => res.text()).then((htmlText) => {
const parser = new DOMParser().parseFromString(htmlText, 'text/html');
const elements = ['shopping-cart-items', '.shopping-cart__bottom'];
for (const element of elements) {
const currentEl = document.querySelector(element);
const newEl = parser.querySelector(element);
if (currentEl && newEl) {
currentEl.replaceWith(newEl);
}
}
}).catch((error) => {
console.error(error);
});
} else {
fetch(`${
cart_routes.url
}?section_id=main-shopping-cart`).then((res) => res.text()).then((htmlText) => {
const parser = new DOMParser().parseFromString(htmlText, 'text/html');
const newContent = parser.querySelector('shopping-cart-items');
this.innerHTML = newContent.innerHTML;
}).catch((error) => {
console.error(error);
});
}
}
When I check the response, I get HTML content but the cart drawer still shows as empty even though items were added successfully.
looks like youre fetching the wrong section id. try using cart-drawer instead of shopping-cart-drawer - thats what dawn uses by default. also make sure your calling the refresh function after the add to cart ajax completes, not before
Had similar issues when I customized my Dawn cart functionality. The problem is usually with the context - your refresh function checks this.tagName === 'SHOPPING-CART-ITEMS' but if you’re calling it from your custom button, this won’t reference the shopping cart element. Try calling the function with the proper context by using document.querySelector('shopping-cart-items').refreshCartDisplay() or bind it correctly. Also worth checking if the cart drawer is actually open when you’re trying to refresh it - Dawn sometimes doesn’t update closed drawers. You might need to trigger the drawer opening event along with the refresh.
Check if you’re updating the cart count badge along with the drawer content. Dawn theme has multiple cart elements that need syncing - the drawer items, the count bubble, and sometimes the cart total. After your fetch completes successfully, you should dispatch a custom event or call the theme’s built-in cart update methods. I ran into this exact issue last month and found that the cart object in memory wasn’t being updated even though the server-side cart was correct. Try adding a fetch to /cart.js after your section update to refresh the JavaScript cart object, then manually update any cart count displays. Also double-check that your section ID matches exactly what’s defined in your sections folder - case sensitivity matters here.
When I faced this exact issue with Dawn, the problem was that the cart drawer wasn’t actually listening for updates after my custom ajax call. You need to trigger Dawn’s built-in cart refresh mechanism after adding items. Try calling document.querySelector('cart-drawer')?.renderContents() or dispatch a cart updated event with document.dispatchEvent(new CustomEvent('cart:updated')) after your add to cart completes. The theme has its own event listeners waiting for these signals. Your refresh function looks correct but Dawn might be using different selectors internally. I also noticed that calling the refresh too quickly sometimes fails - the add to cart response needs to fully process server-side before fetching the updated section. Adding a brief 200ms timeout before refreshing solved the race condition for me.
check your console for any js errors when the refresh runs. sometimes the cart drawer elements dont get replaced properly if theres a timing issue with the dom parsing. try adding a small delay before calling refreshCartDisplay() or wrap it in a setTimeout to let the add-to-cart request fully complete first.