Syncing cart updates with custom themes

Understanding the issue

When Chatty AI adds, updates, or removes items from a customer's cart, most Shopify themes automatically refresh the cart display. However, some custom themes — especially those with custom-built cart drawers or non-standard Ajax cart implementations — don't follow Shopify's standard cart behavior.

This causes a common problem: the AI successfully updates the cart, but the cart UI doesn't refresh. Customers see an outdated cart and may think the AI isn't working.

Signs your theme needs this fix

• Cart drawer doesn't update when AI adds products
• Cart icon badge (item count) stays the same after AI changes
• Cart total doesn't reflect AI-added items

How Chatty cart events work

Chatty dispatches a custom JavaScript event called chatty:cart:changed whenever the AI modifies the cart. Your theme can listen for this event and trigger a cart refresh.

Event details

How to add event to your theme

To sync your cart UI with Chatty AI updates, add an event listener that refreshes your cart when the event fires.

1. Open your theme's JavaScript file (commonly theme.js or cart.js).
2. Add the following code:

document.addEventListener('chatty:cart:changed', function() {
  // Replace this with your theme's cart refresh function
  refreshCart();
});

Example: Custom Cart Drawer

window.addEventListener('chatty:cart:changed', async (e) => {
  // Fetch updated cart
  const cart = await fetch('/cart.js').then(r => r.json());
  
  // Update cart count badge
  document.querySelector('.cart-count').textContent = cart.item_count;
  
  // Refresh cart drawer content
  refreshCartDrawer(cart);
});

Test the integration

After adding the event listener:

1. Go to your store and open the chatbox
2. Ask the AI to add a product to your cart
3. Confirm the cart UI updates without a page refresh
4. Test removing and updating items through the AI as well