Problemas al añadir al carrito

La UI del carrito no se refresca por defecto

En casi todos los sitios ecommerce, el icono, la burbuja, el mini-cart o el drawer del carrito no se refresca automáticamente cuando Dialog añade un producto. El producto sí está en el carrito — los visitantes simplemente no ven el cambio hasta que recargan. Toda tienda tiene que verificar esto.

La solución depende de tu vía de instalación. Elige la sección correspondiente.

Shopify (Online Store 2.0 o theme legacy)

Qué hacer: prueba en tu tienda y dinos si está roto. El equipo Dialog se encarga de los fixes específicos del theme en menos de 48 horas.

Cómo probar:

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

Si no se actualiza, escribe a support@askdialog.com con el nombre del theme y una captura. Parcheamos el listener específico del theme de nuestro lado y listo.

Para info, lo que conectamos es un listener sobre el evento DOM dialog:cart:updated que re-fetch la sección Shopify correcta (cart-icon-bubble, tu mini-cart, etc.) vía la Sections API. No hay trabajo de tu lado.

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:

1. Abre tu storefront con los devtools del navegador.
2. Pega esto en la consola: document.addEventListener('dialog:cart:updated', e => console.log('cart event', e)).
3. Abre Dialog y añade un producto.
4. 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). Si el evento nunca se dispara, escribe al soporte.

¿Necesitas ayuda?

Escribe a support@askdialog.com con tu vía de instalación y una captura. Podemos apuntarte a los selectores correctos y código de ejemplo.