Le panier ne se met pas à jour

La solution dépend du chemin d’installation. Choisissez la section qui correspond — ou identifiez d’abord votre chemin si vous ne savez pas. Sur Shopify, la solution est un snippet ci-dessous (et nous écrivons la glue spécifique au thème si ça ne suffit pas) ; sur GTM et les installs custom, c’est un petit bout de code qui appartient à votre développeur.

Shopify (Online Store 2.0 ou thème legacy)

Comment tester :

Ouvrez une page produit.
Ouvrez le drawer Dialog et ajoutez un produit.
Vérifiez que l’icône / bulle / mini-cart se met à jour tout de suite (sans reload).

Si ça ne se met pas à jour, ajoutez ce snippet dans votre thème (dans votre theme.liquid ou un fichier JS dédié) :

(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 votre thème utilise un nom de section panier différent ou un cart drawer, le sélecteur peut être différent — vérifiez le HTML de votre thème pour trouver le bon ID d’élément. Si le snippet ne prend pas sur votre thème, c’est un des cas que l’équipe Dialog gère pour vous : écrivez à paul@askdialog.com avec le nom du thème et une capture d’écran, et nous écrivons la glue spécifique au thème — en général sous 48 heures.

Install Google Tag Manager

À savoir : ça ne marchera pas tout seul. Votre dev frontend doit le câbler. Le widget déployé via GTM peut bien émettre l’event panier, mais aucun tag GTM ne peut rafraîchir l’UI panier de votre storefront à votre place — c’est by design, GTM n’a pas accès à l’état de votre application.

Ce que votre dev doit faire : s’abonner à l’event DOM dialog:cart:updated dans le code de votre storefront et rafraîchir l’UI panier en conséquence (re-render l’icône, re-fetch le mini-cart, ce que votre stack utilise).

document.addEventListener("dialog:cart:updated", function () {
  // Re-render votre icône panier, re-fetch votre mini-cart, etc.
  // Le code exact dépend de votre stack.
});

Si vraiment aucun dev frontend ne peut faire ça, l’install GTM forcera les visiteurs à recharger — acceptez le trade-off ou basculez sur un autre chemin d’installation.

Install React ou Vue (avec nos composants)

À faire : abonnez-vous à l’event dialog:cart:updated dans votre storefront, comme sur GTM.

Le callback addToCart que vous passez au SDK est le bon endroit pour rafraîchir votre état panier — c’est vous qui contrôlez ce qui y tourne. Mais l’event est aussi émis sur document et embarque le panier mis à jour sur event.detail.cart, donc vous pouvez l’écouter globalement et vous passer d’un re-fetch si vous voulez.

Un listener React drop-in à monter une fois à la racine de votre app :

import { useEffect } from 'react';

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

      if (!cart) return;

      // Dialog a déjà ajouté l'item au panier.
      // Déclenchez ici l'UI panier de votre storefront.
      await refreshCart();
      openCartDrawer();
      updateCartBubble();
    };

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

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

  return null;
};

Rendez <DialogCartListener /> une fois près de la racine de votre arbre (par ex. dans votre <Layout>). Le même pattern marche en Vue 3 avec onMounted / onUnmounted dans un setup script.

Les deux patterns marchent (callback ou event DOM). Choisissez celui qui colle à la façon dont votre état panier est géré.

Install SDK vanilla

Pareil que React / Vue — rafraîchissez votre UI soit dans le callback addToCart, soit via l’event dialog:cart:updated. Voir la Référence SDK pour la signature du callback.

Le contrat universel

Quel que soit le chemin d’installation, Dialog émet un event DOM dialog:cart:updated sur document à chaque fois qu’il ajoute un produit via l’assistant. Si votre UI panier l’écoute et se rafraîchit, c’est réglé.

Pour vérifier que l’event se déclenche bien :

Ouvrez votre storefront avec les devtools navigateur.
Collez ceci dans la console : document.addEventListener('dialog:cart:updated', e => console.log('cart event', e)).
Ouvrez Dialog et ajoutez un produit.
Vous devez voir cart event logué.

Si l’event se déclenche mais que l’UI ne se rafraîchit pas, le souci est dans votre code de refresh (ou votre thème, sur Shopify) — c’est la part du contrat côté développeur. Si l’event ne se déclenche jamais, c’est un vrai bug de notre côté : écrivez au support avec vos étapes de reproduction.