La fonctionnalité "Ajouter au panier" permet à vos visiteurs d'ajouter directement un produit recommandé par votre Assistant dans leur panier, sans quitter la conversation. Cette fonctionnalité simplifie l'expérience d'achat en réduisant les frictions liées à la navigation et accélère le parcours de conversion.

Comment fonctionne l'ajout au panier

Le parcours d'ajout au panier se déroule en quatre étapes :

1. L'Assistant recommande des produits au visiteur durant la conversation.
2. Le visiteur clique sur "Ajouter au panier" directement depuis la conversation.
3. Le visiteur sélectionne les variants (taille, couleur, etc.) si le produit en possède.
4. Le produit est ajouté au panier de votre site e-commerce et une confirmation s'affiche dans la conversation.

Gestion des variants de produits

Quels produits peuvent être ajoutés au panier ?

Seuls les produits présents dans votre catalogue iAdvize (source de connaissances) peuvent être ajoutés au panier. Lorsqu'un produit existe en plusieurs variants (par exemple un t-shirt disponible en rouge, bleu et vert, ou en tailles S, M, L), toutes les variants du même groupe de produits sont proposées au visiteur.

Critères de variants disponibles

Si le produit existe en plusieurs variants, un panneau de sélection s'affiche automatiquement dans la conversation. Les core fields pris en compte sont les suivants :

• Marque (Brand)
• Couleur (color)
• Taille (size)
• Matériau (material)
• Condition
• Genre (gender)

Dans l'exemple ci-dessus, un seul variant est proposé mais plusieurs variants peuvent être proposés selon la structure de votre catalogue produit.

Statut de disponibilité

Seuls les produits avec les statuts suivants peuvent être ajoutés au panier :

• En stock
• En précommande
• Disponible sur commande

Cas particuliers

Produit sans variant : Si le produit recommandé n'existe qu'en une seule version (pas de déclinaison de couleur, taille, etc.), le panneau de sélection ne s'affiche pas. Le produit est ajouté directement au panier dès que le visiteur clique sur "Ajouter au panier".

Variants ambiguës : Dans certains cas, les critères de variants peuvent être ambigus (par exemple si plusieurs produits similaires partagent le même identifiant de groupe). Le système détecte automatiquement cette situation et adapte l'affichage pour éviter toute confusion.

Activation avec Shopify

La fonctionnalité "Ajouter au panier" est entièrement compatible avec Shopify et s'active automatiquement dès l'installation de l'application iAdvize pour Shopify, sans nécessiter de configuration manuelle ni d'intégration technique.

Consultez notre guide d'installation Shopify.

Pour en bénéficier, il est nécessaire que le tag iAdvize soit activé sur l'application. Une fois en place, la synchronisation du catalogue produit s'effectue automatiquement, permettant de récupérer toutes les variants disponibles (taille, couleur, matière, condition, etc.) afin de les proposer dynamiquement lors de l'ajout au panier.

Activation avec Prestashop

La fonctionnalité "Ajouter au panier" est entièrement compatible avec Prestashop et s'active automatiquement dès l'installation du tag principal iAdvize, sans nécessiter de configuration manuelle ni d'intégration technique. Nous détectons si votre site utilise la plateforme Prestashop.

Consultez notre guide d'installation Prestashop.

Les champs tels que la couleur, la taille, le matériau et le genre ne peuvent pas être directement associés à des champs fixes. À la place, ils sont saisis en tant que product_details.

Intégration personnalisée (autres plateformes)

Si vous n'utilisez pas Shopify ou Prestashop, vous devez implémenter un callback JavaScript sur votre site pour activer la fonctionnalité "Ajouter au panier".

Prérequis techniques

Pour que le bouton "Ajouter au panier" fonctionne :

• Il faut implémenter un callback JavaScript sur votre site pour écouter et traiter les événements d'ajout au panier.
• Le callback est déclenché automatiquement lorsqu'un visiteur clique sur le bouton "Ajouter au panier" dans le chat.

Structure du callback

La plateforme iAdvize expose une fonction de callback à laquelle les développeurs peuvent se connecter pour gérer le processus add-to-cart. Lorsqu'un client clique sur le bouton add-to-cart d'un produit recommandé par l'Assistant, le callback JavaScript suivant est déclenché :

<script>
  window.iAdvizeInterface = window.iAdvizeInterface || [];
  window.iAdvizeInterface.push(function(iAdvize) {
    // Register the Add-to-Cart callback
    iAdvize.on("addToCart:clicked", ({productId, resolve, reject}) => {
      // Custom implementation of Add-to-Cart by the website
      // Perform Add-to-Cart logic here
      const success = true; // Replace with real logic

      if (success === true) {
        resolve(true); // iAdvize will know the action succeeded
      } else {
        resolve(false); // or reject('error message')
      }
    });
  });
</script>

Étapes clés du processus

1. Enregistrement du callback : Le script initialise un tableau window.iAdvizeInterface s'il n'existe pas déjà. Il y pousse ensuite une fonction exécutée une fois l'interface iAdvize chargée.
2. Écoute des événements de clic add-to-cart : La méthode on("addToCart:clicked", cb) écoute les événements déclenchés par une interaction avec les produits recommandés par l'Assistant.
3. Exécution du add-to-cart : Lorsqu'elle est appelée, la fonction reçoit un objet contenant productId en argument, correspondant au produit que le client souhaite ajouter au panier.
4. Clôturer l'opération : La fonction doit notifier en utilisant les méthodes resolve ou reject reçues en argument pour indiquer le statut de l'opération :
   • Résolue avec true si l'ajout est un succès.
   • Résolue avec false ou rejetée en cas d'échec.

Exemple d'implémentation

<script>
  window.iAdvizeInterface = window.iAdvizeInterface || [];
  window.iAdvizeInterface.push(function(iAdvize) {
    // Register the callback for Add-to-Cart events
    iAdvize.on("addToCart:clicked", ({productId, resolve, reject}) => {
        // From here, the loading state is automatically enabled

        // Perform Add-to-Cart logic
        addToCart(productId)
          .then((response) => {
            if (response.success) {
              // Successfully added to cart
              // Loading state will be disabled
              resolve(true);
            } else {
              // Failed to add to cart
              // Loading state will be disabled
              resolve(false);
            }
          })
          .catch((error) => {
            reject(error);
          });
    });
  });

  function addToCart(productId) {
    // Example implementation of adding to cart (call your server-side API or update cart state here)
    return fetch('/api/cart/add', {
      method: 'POST',
      body: JSON.stringify({ productId: productId }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(response => response.json());
  }
</script>

Gestion des messages de confirmation

• Si le callback on("addToCart:clicked") est résolu avec succès, un message de confirmation s'affiche dans iAdvize indiquant que l'article a été ajouté au panier.
• S'il est résolu avec false ou rejeté, un message d'échec est affiché au client.

Tester votre intégration

Pour rendre le bouton add-to-cart fonctionnel, vous devez implémenter la méthode on("addToCart:clicked") comme décrit. Sans cette implémentation, le bouton ne s'affichera pas.

Pour tester la fonctionnalité avant production avec Google Chrome :

1. Ouvrez votre fichier JavaScript dans un éditeur et copiez tout le code lié à on("addToCart:clicked").
2. Rendez-vous sur la page à tester.
3. Faites un clic droit > "Inspecter" pour ouvrir les DevTools.
4. Allez dans l'onglet "Console".
5. Collez le code copié.
6. Appuyez sur Entrée.
7. Lancez une conversation et recherchez un produit pour déclencher le cas d'usage "Product Discovery".
8. Quand l'Assistant recommande un produit, le bouton "Add to Cart" doit apparaître sous le lien "View Product".
9. Cliquez sur le bouton pour déclencher le callback. Surveillez la console pour voir les messages ou erreurs.

Scénarios à tester :

• Succès :
  • Le produit est ajouté au panier.
  • Le message de confirmation s'affiche.
  • L'état de chargement est visible pendant le traitement.
• Échec :
  • Un message d'échec s'affiche.
  • Le bouton sort de l'état de chargement.

Bonnes pratiques

• Vérifiez que chaque produit a un identifiant unique (productId) cohérent avec votre système e-commerce.
• Assurez-vous que la logique d'ajout au panier est robuste, notamment en cas d'indisponibilité produit ou d'erreur technique.
• Anticipez la gestion des variants en structurant votre catalogue avec des champs comme Item Group ID, color, size, etc.

Points d'attention