Un widget de recommandations peut mettre un produit dans le panier du visiteur sans quitter la page : le bouton Add to cart de la carte exécute un court morceau de JavaScript que vous enregistrez une fois pour votre compte, et que tous les widgets utilisent. Personyze ne peut pas savoir comment fonctionne le panier de votre boutique : ce code vous appartient donc — en général quelques lignes autour de la requête d’« ajout » propre à votre panier.
Où se trouve le code
Allez dans Paramètres → Configuration des recommandations → Suivi des produits, ouvrez Produit ajouté au panier, et sous Ce que fait le widget, dépliez Ajout rapide au panier. Le panneau l’indique comme Rappel de widget Personyze (pas un tracker) : il ne détecte pas les ajouts au panier sur votre site — ce sont les sources situées au-dessus qui s’en chargent —, il s’exécute quand un visiteur clique sur Add to cart dans un widget Personyze.
L’encadré s’ouvre avec un modèle de code. Modifiez-le et cliquez sur Enregistrer. Tant qu’un code fonctionnel n’est pas enregistré ici, le bouton échoue et le widget affiche son message d’erreur.
Ce que le code doit faire
| Élément | Ce que c’est |
|---|---|
| La fonction | Le code doit déclarer une fonction nommée add_to_cart. L’enregistrement refuse tout le reste avec This script must declare function named "add_to_cart()", et un script contenant des erreurs avec There are errors in script. Certaines options de widget et d’anciens guides mentionnent encore add_to_cart_for_personyze() ; la fonction réellement appelée est add_to_cart. |
products |
Un tableau avec un objet par produit : internal_id (l’ID interne du produit dans votre catalogue, sous forme de chaîne) et quantity (1 ou plus). Un widget de lot transmet tous les produits sélectionnés en un seul appel. Les colonnes du catalogue que vous ajoutez sous Champs disponibles → Ajouter le champ accompagnent chaque objet sous leur propre nom — ajoutez sku et chaque produit arrive avec p.sku. |
arg |
Indéfini, sauf si le widget le définit. Chaque widget a son propre champ pour cela — Quick Add to Cart — Cart Integration Argument ou Extra add_to_cart Argument, selon le modèle —, pour tout ce qui varie d’un widget à l’autre, comme une variante ou une quantité. |
| Valeur de retour | Une Promise. Une async function en renvoie une pour vous ; tout le reste échoue avec add_to_cart() must return Promise object. |
| Succès | La Promise est résolue. Personyze enregistre alors Produit ajouté au panier pour chaque produit, attribué au widget — vous n’avez pas à le remonter vous-même. |
| Échec | La Promise est rejetée, ou la fonction lève une exception. Le widget affiche son erreur au lieu de sa confirmation. |
Le code s’exécute dans le navigateur du visiteur, sur votre site : une URL relative comme /cart/add atteint donc votre boutique avec la session propre au visiteur. Faites référence aux objets globaux de votre site via window (par exemple window.myCart) ; le JavaScript moderne convient, il est transpilé pour les navigateurs plus anciens.
Un exemple minimal
Une requête par produit, l’une après l’autre. Remplacez l’URL et le corps par la vraie requête d’ajout au panier de votre boutique :
async function add_to_cart(products, arg)
{ // One request per product. If your cart takes several products at once, send one request instead.
for (const {internal_id, quantity} of products)
{ // Replace with your store's real "add to cart" request.
const response = await fetch('/cart/add',
{ method: 'POST',
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'product=' + encodeURIComponent(internal_id) + '&qty=' + quantity
});
if (!response.ok)
{ throw new Error(response.statusText);
}
}
}La même chose, avec toutes les requêtes envoyées en même temps :
function add_to_cart(products, arg)
{ return Promise.all(products.map(p =>
fetch('/cart/add',
{ method: 'POST',
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'product=' + encodeURIComponent(p.internal_id) + '&qty=' + p.quantity
}).then(response =>
{ if (!response.ok)
{ throw new Error(response.statusText);
}
})
));
}Si votre code remonte lui-même des événements de panier à Personyze pendant son exécution (un personyze.push avec un événement produit, par exemple pour refléter le panier que renvoie votre API), Personyze n’ajoute pas son propre Produit ajouté au panier par-dessus.
Messages
Sous le code, Afficher un message en cas d’ajout réussi et Afficher un message en cas d’échec de l’ajout ajoutent chacun un message valable pour tout le compte — Nom de l’icône, Texte, Style (CSS) et Masquer après (secondes), avec un aperçu en direct. Il apparaît après chaque ajout rapide depuis n’importe quel widget, en plus de la confirmation qu’affiche le widget lui-même.
Retrait rapide du panier et Ajout rapide à la liste d’envies
- Retrait rapide du panier — plus bas dans le même encadré : le code qui s’exécute quand un visiteur clique sur « Remove from cart » dans un widget Personyze. Il doit déclarer
remove_from_cart(products, arg); chaque produit porte soninternal_id. - Ajout rapide à la liste d’envies — dans le panneau Produit ajouté aux favoris, sous Ce que fait le widget : le code qui s’exécute quand un visiteur clique sur « Add to wishlist » dans un widget Personyze. Il doit déclarer
add_to_wishlist(products, arg).
Les deux suivent les mêmes règles : mêmes arguments, et une Promise résolue en cas de succès. Un widget ne les appelle que si son design comporte ce bouton — les cœurs de liste d’envies des modèles produit de la galerie enregistrent l’ajout dans Personyze sans eux.
Voir aussi
- Suivi des interactions produit — détecter les consultations, les ajouts au panier et les achats sur votre site.
- Product Slider & Grid et Buy Together — des widgets dotés d’un bouton d’ajout au panier.