La fonctionnalité Add-To-Cart est disponible pour tous les utilisateurs iAdvize, y compris ceux utilisant Shopify (où l’activation est automatique).

Bonnes pratiques

• Vérifiez que chaque produit a un identifiant unique (product_id) 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 variantes en structurant votre catalogue avec des champs comme Item Group ID, color, size, etc., même si ces options ne sont pas encore actives.

La gestion des variantes produit (couleur, taille, etc.) sera prise en charge prochainement. Si un produit comporte plusieurs déclinaisons, la variante par défaut ou recommandée est ajoutée automatiquement au panier, sans que l'utilisateur ne puisse choisir.

l'Add-to-Cart avec Shopify

La fonctionnalité conversationnelle Add-To-Cart 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. 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 variantes disponibles (taille, couleur, matière, condition, etc.) afin de les proposer dynamiquement lors de l’ajout au panier. L’ensemble du processus est entièrement automatisé, ne demandant aucune action supplémentaire de la part de l’utilisateur.

Prérequis techniques pour l’intégration

Pour que le bouton “Add-To-Cart” 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.

Guide d'intégration 

Aperçu

Ce guide fournit les étapes détaillées pour permettre aux sites e-commerce d’intégrer leur processus add-to-cart avec la solution Shopper Copilot™ d’iAdvize. La solution iAdvize permet aux e-commerçants d’exploiter un chatbot capable de recommander des produits aux clients. L’objectif de ce guide est d’aider les développeurs à connecter leur fonctionnalité add-to-cart existante à un callback exposé par la plateforme iAdvize, afin d’assurer une expérience fluide lorsque le client clique sur le bouton add-to-cart recommandé par le chatbot.

Étapes d’intégration

1. Comprendre la 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 le bot, le callback JavaScript suivant est déclenché :

<script>
  window.iAdvizeInterface = window.iAdvizeInterface || [];
  window.iAdvizeInterface.push(function(iAdvize) {
    // Register the Add-to-Cart callback
    iAdvize.labs().onAddToCart((product_id) => {
      // Custom implementation of Add-to-Cart by the website
      return new Promise((resolve, reject) => {

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

2. Étapes clés du processus add-to-cart

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

• Écoute des événements add-to-cart : La méthode onAddToCart écoute les événements déclenchés par une interaction avec les produits recommandés par le chatbot.

• Exécution du add-to-cart : Lorsqu’elle est appelée, la fonction onAddToCart reçoit un product_id en argument, correspondant au produit que le client souhaite ajouter au panier.

• Retourner une promesse : La fonction doit retourner une Promise, qui indique 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.

3. Implémenter le processus add-to-cart

Suivez ces étapes pour implémenter votre logique personnalisée :

1. Accéder au product_id : Utilisez le product_id fourni dans le callback pour identifier le produit.

2. Exécuter votre logique add-to-cart :

   • Validez le product_id, vérifiez la disponibilité du produit ou effectuez d’autres vérifications nécessaires.

   • Appelez votre API backend ou mettez à jour l’état du panier.

   Une fois la logique en cours, un état de chargement s’affiche sur le bouton pour améliorer l’expérience client.

3. Résoudre ou rejeter la promesse :

   • En cas de succès, résolvez la promesse avec true.

   • En cas d’erreur, résolvez-la avec false ou rejetez-la avec un message d’erreur adapté.

Exemple d’implémentation :

<script>
  window.iAdvizeInterface = window.iAdvizeInterface || [];
  window.iAdvizeInterface.push(function(iAdvize) {
    // Register the callback for Add-to-Cart events
    iAdvize.labs().onAddToCart((product_id) => {
      return new Promise((resolve, reject) => {
        // From here, the loading state is automatically enabled

        // Perform Add-to-Cart logic
        addToCart(product_id)
          .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(product_id) {
    // 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({ product_id: product_id }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(response => response.json());
  }
</script>

4. Gérer les messages de confirmation

• Si le callback onAddToCart 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.

5. Tester votre intégration

Pour rendre le bouton add-to-cart fonctionnel, vous devez implémenter la méthode onAddToCart 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é à onAddToCart.

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

6. Mise en production

Une fois les tests réussis, vous pouvez déployer l’intégration en production. Surveillez le comportement pour détecter d’éventuels problèmes.