La fonctionnalité Add-To-Cart permet aux visiteurs d’ajouter directement un produit à leur panier depuis une conversation avec l'Assistant. L’objectif : simplifier l’expérience d’achat sans quitter le chat, en réduisant les frictions liées à la navigation classique.
L'Assistant recommande des produits au visiteur.
Le visiteur clique sur “Ajouter au panier” sans quitter la conversation.
Le produit est immédiatement ajouté au panier de votre site e-commerce.
Une confirmation de l’ajout s’affiche dans la conversation.
Cette fonctionnalité est particulièrement utile pour accélérer le parcours d’achat et booster les conversions, tout en gardant l’utilisateur engagé dans l’assistance conversationnelle.
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 (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 variantes en structurant votre catalogue avec des champs comme
Item Group ID,color,size, etc.,
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 votre Assistant Shopping. La solution iAdvize permet aux e-commerçants d’exploiter un assistant 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 l'Assistant.
Étapes d’intégration
⚠ Un identifiant produit peut prendre différentes formes. Dans ce document, cet identifiant est désigné sous le nom de productId, qui doit correspondre aux données requises par votre plateforme e-commerce pour la gestion du panier.
Dans le catalogue produit géré par iAdvize, cet identifiant est appelé ID. Cette information sera utilisée par la fonction add-to-cart pour renseigner la variable productId. Il est donc essentiel de s’assurer que cette donnée est compatible avec les attentes de votre plateforme.
Si la donnée productId est disponible dans un autre attribut du catalogue produit, veuillez contacter votre interlocuteur pour déterminer si cette donnée peut être intégrée.
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.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>2. Étapes clés du processus add-to-cart
Enregistrement du callback : Le script initialise un tableau
window.iAdvizeInterfaces’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 de clic add-to-cart : La méthode
cbdeon(“addToCart:clicked”, cb)écoute les événements déclenchés par une interaction avec les produits recommandés par l'Assistant.Exécution du add-to-cart : Lorsqu’elle est appelée, la fonction
cbreçoit un objet contenantproductIden argument, correspondant au produit que le client souhaite ajouter au panier.Clôturer l’opération : La fonction doit notifier en utilisant les méthodes resolve ou reject reçu en argument pour indiquer le statut de l’opération :
Résolue avec
Truesi l’ajout est un succès.Résolue avec
Falseou rejetée en cas d’échec.
3. Implémenter le processus add-to-cart
Suivez ces étapes pour implémenter votre logique personnalisée :
Accéder au productId : Utilisez le productId fourni dans le callback pour identifier le produit.
Exécuter votre logique add-to-cart :
Validez le productId, 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.
Résoudre ou rejeter la promesse :
En cas de succès, résolvez avec
true.En cas d’erreur, résolvez-la avec
falseou 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.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>
4. Gérer les 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
falseou 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 on(“addToCart:clicked”), cb comme décrit. Sans cette implémentation, le bouton ne s’affichera pas.
Pour tester la fonctionnalité avant production :
Avec Google Chrome :
Ouvrez votre fichier JavaScript dans un éditeur et copiez tout le code lié à
on(“addToCart:clicked”), cb.Rendez-vous sur la page à tester.
Faites un clic droit > "Inspecter" pour ouvrir les DevTools.
Allez dans l’onglet "Console".
Collez le code copié.
Appuyez sur Entrée.
Lancez une conversation et recherchez un produit pour déclencher le cas d’usage "Product Discovery".
Quand l'Assistant recommande un produit, le bouton "Add to Cart" doit apparaître sous le lien "View Product".
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.