El carrito no se actualiza

La solución depende de tu vía de instalación. Elige la sección correspondiente — o identifica tu vía primero si no estás seguro. En Shopify el arreglo es un snippet de abajo (y escribimos el pegamento específico del theme si no basta); en GTM e instalaciones custom es un pequeño trozo de código que pertenece a tu developer.

Shopify (Online Store 2.0 o theme legacy)

Cómo probar:

Abre una página de producto.
Abre el drawer Dialog y añade un producto.
Verifica que el icono / burbuja / mini-cart se actualice inmediatamente (sin recargar).

Si no se actualiza, añade este snippet en tu theme (en tu theme.liquid o un archivo JS dedicado):

(function () {
  document.addEventListener("dialog:cart:updated", function () {
    fetch(window.location.origin + "?sections=cart-icon-bubble")
      .then(function (r) { return r.json(); })
      .then(function (data) {
        var bubble = document.getElementById("cart-icon-bubble");
        if (bubble) bubble.innerHTML = data["cart-icon-bubble"] ?? "";
      });
  });
})();

Si tu theme usa un nombre de sección de carrito diferente o un cart drawer, el selector puede diferir — revisa el HTML de tu theme para encontrar el ID del elemento correcto. Si el snippet no funciona en tu theme, este es uno de los casos que el equipo de Dialog gestiona por ti: escribe a paul@askdialog.com con el nombre del theme y una captura, y escribimos el pegamento específico para tu theme — normalmente en 48 horas.

Instalación Google Tag Manager

Qué hacer: esto no funcionará out of the box. Tu developer frontend tiene que conectarlo. El widget desplegado vía GTM puede disparar el evento del carrito, pero ningún tag GTM puede refrescar la UI del carrito de tu storefront por ti — es by design, GTM no tiene visibilidad sobre el estado de tu aplicación.

Lo que tu developer debe hacer: suscribirse al evento DOM dialog:cart:updated en el código de tu storefront y refrescar la UI del carrito en consecuencia (re-renderizar el icono, re-fetchear el mini-cart, lo que use tu stack).

document.addEventListener("dialog:cart:updated", function () {
  // Re-renderiza tu icono de carrito, re-fetchea tu mini-cart, etc.
  // El código exacto depende de tu stack.
});

Si realmente no tienes developer frontend que pueda hacer esto, la instalación GTM dejará a tus visitantes teniendo que recargar — acepta el trade-off o pasa a otra vía de instalación.

Instalación React o Vue (con nuestros componentes)

Qué hacer: suscríbete al evento dialog:cart:updated en tu storefront, igual que en GTM.

El callback addToCart que pasas al SDK es el sitio correcto para refrescar tu estado del carrito — tú controlas lo que corre allí. Pero el evento también se dispara en document y lleva el carrito actualizado en event.detail.cart, así que puedes escucharlo globalmente y saltarte un re-fetch si quieres.

Un listener React drop-in para montar una vez en la raíz de tu app:

import { useEffect } from 'react';

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

      if (!cart) return;

      // Dialog ya añadió el item al carrito.
      // Dispara aquí la UI del carrito de tu storefront.
      await refreshCart();
      openCartDrawer();
      updateCartBubble();
    };

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

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

  return null;
};

Renderiza <DialogCartListener /> una vez cerca de la raíz de tu árbol (ej. dentro de tu <Layout>). El mismo pattern funciona en Vue 3 con onMounted / onUnmounted en un setup script.

Ambos patterns funcionan (callback o evento DOM). Elige el que encaje con cómo gestionas tu estado del carrito.

Instalación SDK vanilla

Igual que React / Vue — refresca tu UI dentro del callback addToCart o vía el evento dialog:cart:updated. Ver la Referencia del SDK para la firma del callback.

El contrato universal

Sea cual sea la vía de instalación, Dialog emite un evento DOM dialog:cart:updated en document cada vez que añade un producto vía el asistente. Si tu UI del carrito lo escucha y se refresca, listo.

Para verificar que el evento se dispara:

Abre tu storefront con los devtools del navegador.
Pega esto en la consola: document.addEventListener('dialog:cart:updated', e => console.log('cart event', e)).
Abre Dialog y añade un producto.
Debes ver cart event loggeado.

Si el evento se dispara pero tu UI no se refresca, el problema está en tu código de refresh (o tu theme, en Shopify) — esa es la parte del contrato de tu developer. Si el evento nunca se dispara, es un bug real de nuestro lado: escribe al soporte con tus pasos de reproducción.