Add to cart issues

The fix depends on your install path. Pick the matching section.

Shopify (Online Store 2.0 or legacy theme)

What to do: test it on your store and tell us if it’s broken. The Dialog team handles theme-specific fixes within 48 hours.

How to test:

Open a product page.
Open the Dialog drawer and add a product.
Check whether the cart icon / bubble / mini-cart updates immediately (no reload).

If it doesn’t update, email support@askdialog.com with the theme name and a screenshot. We patch the theme-specific listener on our side and you’re done.

If you’re curious, what we wire is a listener on the dialog:cart:updated DOM event that re-fetches the right Shopify section (cart-icon-bubble, your mini-cart, etc.) via the Sections API. There’s no work for you to do.

Google Tag Manager install

What to do: this won’t work out of the box. Your frontend developer has to wire it. The GTM-deployed widget can fire the cart event, but no GTM tag can refresh your storefront’s cart UI for you — that’s by design, GTM doesn’t have visibility into your application state.

What your developer needs to do: subscribe to the dialog:cart:updated DOM event in your storefront’s code and refresh the cart UI accordingly (re-render the cart icon, re-fetch the mini-cart, whatever your stack does).

document.addEventListener("dialog:cart:updated", function () {
  // Re-render your cart icon, re-fetch the mini-cart, etc.
  // Exact code depends on your stack.
});

If you genuinely have no frontend developer who can do this, the GTM install will leave your visitors having to reload — accept the trade-off, or move to one of the other install paths.

React or Vue install (with our components)

What to do: subscribe to the dialog:cart:updated event in your storefront, the same way as on GTM.

The addToCart callback you pass to the SDK is the right place to refresh your cart state — you control what runs there. But the event is also fired on document and carries the updated cart on event.detail.cart, so you can listen globally and skip a re-fetch if you want.

A drop-in React listener you can mount once at the root of your app:

import { useEffect } from 'react';

export const DialogCartListener = () => {
  useEffect(() => {
    const handleDialogCartUpdated = async (event: any) => {
      const cart = event.detail?.cart;

      if (!cart) return;

      // Dialog already added the item to the cart.
      // Trigger your storefront cart UI here.
      await refreshCart();
      openCartDrawer();
      updateCartBubble();
    };

    document.addEventListener('dialog:cart:updated', handleDialogCartUpdated);

    return () => {
      document.removeEventListener('dialog:cart:updated', handleDialogCartUpdated);
    };
  }, []);

  return null;
};

Render <DialogCartListener /> once near the top of your tree (e.g. inside your <Layout>). The same pattern fits Vue 3 with onMounted / onUnmounted in a setup script.

Both patterns work (callback or DOM event). Pick the one that fits how your cart state is managed.

Vanilla SDK install

Same as React / Vue — refresh your UI either inside the addToCart callback or via the dialog:cart:updated event. See the SDK reference for the callback signature.

The universal contract

Whatever the install path, Dialog emits a DOM event named dialog:cart:updated on document every time it adds a product through the assistant. If your cart UI listens for it and refreshes, you’re done.

To verify the event fires at all:

Open your storefront with browser devtools.
Paste this in the console: document.addEventListener('dialog:cart:updated', e => console.log('cart event', e)).
Open Dialog and add a product.
You should see cart event logged.

If the event fires but your UI doesn’t refresh, the issue is in your refresh code (or your theme, on Shopify). If the event never fires, email support.

Need help?

Email support@askdialog.com with your install path and a screenshot. We can point you to the right selectors and example code.