I have an issue with my cart drawer that sometimes when I add a product onto my cart in my cart drawer with the add on products, the drawer will automatically close when I click add. I added this javascript down below and I believe it might be the reason I’m having the issue. Is there a way that I can update it where it will still work normally and update my header with the count but not close my drawer randomly?
The issue could also be coming from somewhere else but I’m not sure!
The cart drawer closes because some JS is doing one of these:
Running location.reload()
Redirecting to /cart
Re-rendering the <cart-drawer> element
Using fetch('/cart.js') in a way that forces a hard refresh
The solution is to intercept the Add to Cart event, update the cart asynchronously, and manually update your header count — WITHOUT replacing the drawer DOM.
Great so how would I do that? Is there any specific code that I can add to fix this or update my existing code?
Use this code and update me if it works
document.addEventListener(‘click’, async (e) => {
const btn = e.target.closest(‘[data-add-on-button]’);
if (!btn) return; // Only run for your add-on buttons
e.preventDefault();
btn.disabled = true;
const variantId = btn.dataset.variantId;
// Add item to cart using AJAX
const response = await fetch(‘/cart/add.js’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ id: variantId, quantity: 1 })
}).then(res => res.json()).catch(() => {});
// Update header count (without closing drawer)
const cartData = await fetch(‘/cart.js’).then(res => res.json());
const countEl = document.querySelector(‘[data-cart-count]’);
if (countEl) countEl.textContent = cartData.item_count;
btn.disabled = false;
});
Do you get the code and does it work?
I’m still seeing issues now when I add that with my header count not being updated correctly when I go out of the cart drawer?
Hey @userr123
Share your store URL and Password if enabled so I can have a proper look and help you out.
(also the other replies on the post looks AI generated so most likely that won’t work for you)
Best,
Moeed
@userr123 Sometimes the cart drawer closes because the add-to-cart action is refreshing or re-rendering the whole cart instead of just updating the count.
Check your script for anything that forces a reload (like replacing the cart HTML or refreshing the page).
Make sure the code only updates the cart count with AJAX and doesn’t touch the drawer element.
Also look at any recent apps or custom scripts,
some of them override the cart update event and cause the drawer to close randomly.
Hi @userr123
It sounds like the drawer is closing because your script triggers a full cart update or a form submission that the theme interprets as a page change. Instead, intercept the add-to-cart event with event.preventDefault(), update the cart via AJAX, then update the header count manually. This avoids the drawer closing while keeping functionality intact.