Buy Together — constructeur de lots avec total en direct

Un constructeur de lots « fréquemment achetés ensemble » avec totaux en direct : le produit en cours sert d’ancre (« This item »), aux côtés de compléments recommandés, chacun avec son propre interrupteur. Chaque interrupteur met instantanément à jour le total du lot, le prix d’origine barré, la ligne verte You save et le compteur facultatif N of M items selected — puis un seul clic ajoute toute la sélection au panier.

Fonctionnement de ce modèle

• Trois dispositions. Le réglage Layout bascule entre vertical (une liste empilée avec interrupteurs — par défaut), horizontal (une rangée de produits reliés par des signes plus, qui se dimensionne d’après ses cartes) et compact (une mini-bande avec de petites photos, les noms et les prix — les lignes de preuve sociale et d’informations y restent masquées pour gagner de la place, tandis que le produit en cours garde son libellé « This item »). Dans la bande compacte, Title Position (Strip Layout) place le titre soit en ligne à gauche des produits (par défaut), soit sur une ligne entière au-dessus. Sur les écrans étroits, la rangée horizontale se transforme automatiquement en liste empilée épurée.
• Accents de style et préréglages de look. Un seul sélecteur Style accent (light, gold, bold, ocean) recolore ensemble les interrupteurs, les boutons, les totaux, les économies et les cartes. Par-dessus : Title Style Preset (plain, caps, serif, underline, boxed), Button preset (solid, pill, outline, dark, square), Font preset (system, serif, rounded, condensed) et Card Info Order (standard, price-first, info-top, name-first). Chaque couleur et chaque police restent modifiables individuellement dans leur propre champ de style.
• Moteur de totaux en direct. Le pied du widget affiche le total du lot, le total d’origine barré quand des remises s’appliquent, une ligne You save calculée à partir de la différence et un compteur facultatif d’éléments sélectionnés. Le total peut pulser brièvement à chaque changement (Animate Total on Change, activé par défaut).
• Combien de recommandations. Le modèle demande jusqu’à huit recommandations (Recommandations à afficher dans la carte Sortie de la recommandation ; jusqu’à 12), mais seuls Max Items Shown (2 par défaut) sont visibles. Les autres se trouvent derrière un lien + N more ; les éléments dévoilés apparaissent désactivés, si bien que le total n’inclut jamais que des produits que le visiteur a réellement vus et choisis. Un nouveau clic sur le lien (Show Less Text) les replie.
• Sélection par défaut. Choisissez si le lot démarre avec all (tous les éléments activés), none (aucune des recommandations) ou seulement le produit anchor sélectionné. Le style, la position, la couleur et la visibilité du contrôle d’inclusion sont des réglages distincts.
• Style de confirmation. Après l’ajout au panier, l’acheteur voit une confirmation. Confirmation Style propose modern (une notification toast sombre aux coins arrondis, avec une coche — par défaut), system (la notification intégrée de Personyze) ou custom (exécuter votre propre JavaScript saisi dans les champs On Success et On Error sous Quick add to cart).
• Mode démo en direct. Pendant la conception, des produits de démonstration apparaissent automatiquement avec des interrupteurs et des totaux fonctionnels — les visiteurs du site ne les voient jamais.

Prix du lot et remise

Chaque prix du widget — chaque élément, le total du lot, le total d’origine barré et la ligne You save — provient de votre catalogue produits, via les colonnes de prix associées dans Catalog Fields. Personyze ne fait qu’afficher le lot ; il ne change pas ce que facture votre panier.

Les compléments eux-mêmes proviennent de l’algorithme de la recommandation — par exemple Ventes croisées (des éléments achetés ensemble, appris automatiquement) ou Ventes croisées gérées (des paires que vous importez vous-même). Voir Algorithmes de recommandation.

Bonnes pratiques

• Proposez un ou deux compléments. Une seule association forte vaut généralement mieux qu’un mur de choix — Max Items Shown vaut déjà 2 par défaut.
• Testez l’ampleur de la remise. Une remise de 10 % sur le lot peut rapporter davantage qu’une remise de 25 % si elle convertit à un taux similaire.
• Placez-le sous l’image principale du produit. Sur la page produit, près de la décision d’ajout au panier.
• Mesurez par rapport à un groupe témoin. Donnez au widget moins de 100 % du trafic, pour que le reste de vos visiteurs voie le Site original, et comparez les deux à l’étape Performance de la campagne — voir Tests A/B.

Modifier les réglages dans l’éditeur

Chaque réglage se trouve dans la barre latérale à gauche de l’éditeur d’action, regroupé par thème ; cliquez sur un groupe pour le déplier, et l’aperçu se met à jour instantanément. Deux exemples :

(1) Le groupe How Many Recommendations contient Max Items Shown (2 par défaut) et les textes du lien de dévoilement. (2) Show More Link choisit entre dévoiler les éléments masqués avec un lien ou simplement ne pas les afficher. (3) Le lien + N more qui en résulte dans la liste verticale — un clic dessus dans l’aperçu fonctionne exactement comme sur le site.

(1) Le sélecteur Layout fait passer tout le widget de vertical à horizontal ou à compact en un clic. (2) Ici, la bande compact : le titre en ligne à gauche (déplaçable au-dessus des produits via Title Position), des mini-cartes uniformes reliées par des signes plus, la pastille + N more, et le total avec le bouton panier — le tout sur une seule ligne.

Badges, preuve sociale et informations produit

• Des badges aux réglages par défaut raisonnables. Pourcentage de remise (masqué quand la remise vaut 0), NEW (produits ajoutés au cours des 14 derniers jours), Popular et Bestseller (top 5 % par consultations ou par achats), et stock faible, qui affiche le nombre restant en direct suivi d’un texte modifiable comme « restants en stock » (se déclenche à partir de 5 unités ou moins) — chaque seuil, texte et style est modifiable.
• Lignes de preuve sociale. Des compteurs « vus aujourd’hui » et « achetés aujourd’hui » sur chaque carte, avec un réglage de portée : toutes les cartes, uniquement l’ancre, ou uniquement les recommandations.
• Lignes d’informations produit. Des champs supplémentaires du catalogue (marque, colonnes personnalisées) sous le nom du produit, avec le même réglage de portée.

Chargement, popups et stabilité

• Squelette de chargement. Des rangées d’attente scintillantes (activées par défaut) s’affichent jusqu’à l’arrivée des recommandations, pour que le widget n’apparaisse jamais brusquement.
• Smooth Reveal. Le widget reste invisible un instant, le temps que sa taille et sa position se stabilisent, puis apparaît en fondu — aucun saut visible pendant le chargement de la page. Activé par défaut, avec une sécurité qui l’affiche toujours au bout de trois secondes environ.
• Protection contre les données périmées. Lors d’une navigation, l’événement de consultation de produit et la requête de recommandations font la course ; si le widget devait s’afficher avec le produit de la page précédente comme « This item », il se masque pour cette page vue. La vérification est intégrée (Require Current-Page View, activé par défaut) : la carte du produit en cours doit renvoyer vers la page consultée. Cela tient aussi automatiquement le widget à l’écart des pages qui ne sont pas des pages produit — aucune règle d’audience n’est nécessaire.
• Popup Hugs Widget. Quand le widget s’exécute dans une popup beaucoup plus large que lui, il réduit le cadre de la popup à sa taille. Désactivez-le pour les popups de type bannière volontairement en pleine largeur.

Tous les réglages

Chaque réglage se trouve dans la barre latérale de l’éditeur d’action, regroupé exactement comme ci-dessous. Cliquez sur un groupe pour déplier sa liste. Les réglages marqués (CSS) acceptent du CSS brut ; les autres sont du texte, des nombres ou de simples listes.

Bon à savoir

• Le widget se masque en dehors des pages produit et en cas de données périmées. Require Current-Page View (activé par défaut) empêche le lot d’afficher un jour le produit de la page précédente ou d’apparaître sur la page d’accueil. Vous préférez gérer cela vous-même ? Désactivez-le et ajoutez une règle d’audience qui cible les visiteurs dont la dernière interaction est une consultation de produit.
• La ligne d’économie n’apparaît que s’il y a quelque chose à économiser. Si aucun élément sélectionné n’est remisé, le total barré et la ligne You save se masquent d’eux-mêmes.
• Add bundle to cart envoie tous les éléments sélectionnés en un seul appel au code Ajout rapide au panier de votre compte, avec les éventuels champs du catalogue que vous y avez ajoutés ; tant que ce code n’est pas enregistré, le bouton affiche son message d’erreur. Un bouton secondaire Save bundle for later est désactivé par défaut et s’active en un clic ; les deux peuvent être entièrement restylés.
• Tarification centralisée. Un seul sélecteur Price Format et une seule paire de champs de symbole monétaire s’appliquent partout où des prix apparaissent, y compris les totaux et les économies.
• Un rendu à l’épreuve des styles. Les styles du modèle sont conçus pour résister au CSS agressif des sites, tandis que les personnalisations par élément faites dans l’éditeur restent prioritaires sur les valeurs par défaut du modèle.
• Les cartes de modèles enregistrées figent leur code. Si vous conservez votre propre copie dans Mes modèles, les actions créées à partir d’elle utilisent le code tel qu’il était lors de l’enregistrement — réenregistrez la carte après les mises à jour majeures.

Voir aussi

• Bought Together — bande classique — le même moteur avec le look classique : bande de photos en haut, encadré du prix total, liste à cases à cocher en dessous.
• Bouton d’ajout rapide au panier — le code qu’exécute le bouton Add bundle to cart.
• Appliquer automatiquement un code promo au paiement — transmettre le code promo du lot jusqu’au paiement.
• Vertical Product List — une présentation des recommandations sous forme de liste, sans logique de lot.
• Modèles — la vue d’ensemble de toute la bibliothèque de modèles.