Problèmes d'ajout au panier

L’UI panier ne se rafraîchit pas toute seule par défaut

Sur quasi tous les sites ecom, l’icône, la bulle, le mini-panier ou le drawer panier ne se rafraîchit pas automatiquement quand Dialog ajoute un produit. Le produit est bien dans le panier — les visiteurs ne voient juste pas le changement avant d’avoir rechargé. Tous les stores doivent vérifier ça.

La solution dépend du chemin d’install. Choisis la section qui correspond.

Shopify (Online Store 2.0 ou theme legacy)

À faire : teste sur ton store et dis-nous si c’est cassé. L’équipe Dialog s’occupe des fixes spécifiques au thème sous 48 heures.

Comment tester :

1. Ouvre une page produit.
2. Ouvre le drawer Dialog et ajoute un produit.
3. Vérifie que l’icône / bulle / mini-cart se met à jour tout de suite (sans reload).

Si ça ne se met pas à jour, écris à support@askdialog.com avec le nom du thème et une capture. On patch le listener spécifique au thème de notre côté et c’est fini.

Pour info, ce qu’on câble est un listener sur l’event DOM dialog:cart:updated qui re-fetch la bonne section Shopify (cart-icon-bubble, ton mini-cart, etc.) via la Sections API. Rien à faire de ton côté.

Install Google Tag Manager

À faire : ça ne marchera pas tout seul. Ton 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 ton storefront à ta place — c’est by design, GTM n’a pas accès à l’état de ton application.

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

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

Si vraiment t’as aucun dev frontend qui peut faire ça, l’install GTM forcera les visiteurs à recharger — accepte le trade-off ou bascule sur un autre chemin d’install.

Install React ou Vue (avec nos composants)

À faire : abonne-toi à l’event dialog:cart:updated dans ton storefront, comme sur GTM.

Le callback addToCart que tu passes au SDK est le bon endroit pour refresh ton état panier — c’est toi qui contrôles ce qui y tourne. Mais l’event est aussi émis sur document et embarque le panier mis à jour sur event.detail.cart, donc tu peux l’écouter globalement et te passer d’un re-fetch si tu veux.

Un listener React drop-in à monter une fois à la racine de ton 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éclenche ici l'UI panier de ton storefront.
      await refreshCart();
      openCartDrawer();
      updateCartBubble();
    };

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

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

  return null;
};

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

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

Install SDK vanilla

Pareil que React / Vue — refresh ton 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’install, Dialog émet un event DOM dialog:cart:updated sur document à chaque fois qu’il ajoute un produit via l’assistant. Si ton UI panier l’écoute et se rafraîchit, c’est plié.

Pour vérifier que l’event fire bien :

1. Ouvre ton storefront avec les devtools navigateur.
2. Colle ça dans la console : document.addEventListener('dialog:cart:updated', e => console.log('cart event', e)).
3. Ouvre Dialog et ajoute un produit.
4. Tu dois voir cart event logué.

Si l’event fire mais l’UI ne se refresh pas, le souci est dans ton code de refresh (ou ton thème, sur Shopify). Si l’event ne fire jamais, écris au support.

Besoin d’aide ?

Écris à support@askdialog.com avec ton chemin d’install et une capture. On peut te pointer vers les bons sélecteurs et du code d’exemple.