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, tout en gardant le visiteur engagé dans la conversation.

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.

La fonctionnalité est également disponible dans vos applications mobiles via les SDK iAdvize iOS, Android et Flutter (à partir des versions 3.2). L'intégration se fait côté application : consultez la documentation développeurs.

Accéder au panier depuis le Shopping Panel

Un bouton d'accès au panier est présent dans l'en-tête du Shopping Panel. Sur ordinateur, il se trouve à côté du bouton de réduction. Sur mobile, il se trouve dans le coin opposé.

Un clic sur ce bouton ouvre le panier dans un nouvel onglet. La conversation avec l'Assistant reste ouverte dans l'onglet d'origine : le visiteur vérifie son panier, puis revient poursuivre ses recherches sans rien perdre du fil.

Le bouton s'affiche lorsque deux conditions sont réunies :

• la fonctionnalité "Ajouter au panier" est active sur votre site ;
• l'adresse de la page panier est renseignée.

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 module iAdvize pour Prestashop, sans nécessiter de configuration manuelle ni d'intégration technique.

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".

Vue d'ensemble

Ce guide détaille les étapes permettant à un site e-commerce de connecter son processus d'ajout au panier à l'AI Shopping Assistant. Il s'adresse aux développeurs qui doivent relier la logique d'ajout au panier déjà en place sur le site au callback exposé par la plateforme iAdvize, afin que le visiteur bénéficie d'un parcours fluide lorsqu'il clique sur le bouton d'ajout recommandé par l'Assistant.

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

Suivez ces étapes pour implémenter votre logique :

• Accédez au productId : utilisez le productId fourni par le callback pour identifier le produit.
• Exécutez votre logique d'ajout au panier :
  • validez le productId, vérifiez la disponibilité du produit ou effectuez les autres contrôles nécessaires ;
  • appelez votre API back-end ou mettez à jour l'état du panier.

Pendant l'exécution de cette logique, un état de chargement s'affiche sur le bouton.

Résolvez ou rejetez la Promise :

• en cas de succès, résolvez avec true ;
• en cas d'erreur, résolvez avec false ou rejetez avec un message d'erreur approprié.

<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.

Mise en production

Une fois les tests terminés et le comportement conforme à vos attentes, vous pouvez déployer l'intégration en production. Surveillez ensuite son fonctionnement pour détecter d'éventuels problèmes.

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