Slider de recommandations à cartes superposées

Slider de recommandations à cartes superposées

Type d’action : Product Recommendations. Configuré depuis : le menu de l’action — aucun code nécessaire.

Le slider Overlay Card affiche des recommandations de produits sous forme de cartes-images, avec le nom du produit, la marque et le prix superposés à la photo. Il défile par balayage natif sur les écrans tactiles, et avec des flèches, des points, par glisser ou en lecture automatique sur ordinateur, et il adapte le nombre de cartes visibles à la taille de l’écran du visiteur.

Démarrage rapide

1. Ajoutez l’action à votre campagne et choisissez le modèle Overlay Card Recommendations Slider.
2. Ouvrez Card Image Style et vérifiez que Main Product Image Column pointe vers le champ image de votre catalogue. Si aucun catalogue n’est encore connecté, le widget affiche des produits de démonstration intégrés dans l’éditeur pour que vous puissiez continuer à concevoir (voir Produits de démonstration).
3. Réglez le nombre de cartes que les visiteurs voient à la fois dans Slider & Items Per View — ordinateur, tablette et mobile ont chacun leur propre nombre.
4. Choisissez un style de flèche dans Slider Arrows → Arrow Style, ou laissez-le sur none pour que le style de boutons de votre site s’applique.
5. Prévisualisez sur téléphone, tablette et ordinateur, puis publiez.

Comment le slider dimensionne les cartes

La largeur des cartes ne se règle pas directement — elle est calculée à partir du nombre d’éléments que vous voulez voir, pour que la mise en page tombe toujours juste :

card width = (row width − gaps) ÷ items visible

• Items Visible — Desktop / Tablet / Mobile — le nombre de cartes affichées à la fois pour chaque taille d’écran. Valeurs par défaut : 4 / 3 / 1. Les décimales fonctionnent : 1.15 sur mobile affiche un bout de la carte suivante comme indice de balayage.
• Tablet / Mobile Breakpoint (px) — les largeurs d’écran à partir desquelles les nombres pour tablette et mobile s’appliquent. Valeurs par défaut : 1024 / 640.
• Minimum Card Width — un plancher de sécurité (200px par défaut). Si la rangée est trop étroite pour contenir le nombre choisi au-dessus de cette largeur, les cartes gardent la largeur minimale et la rangée défile à la place. Cela évite des cartes écrasées dans des conteneurs contraints.
• Space Between Cards — l’espace entre les cartes. Utilisez une longueur simple comme 24px. Cette valeur est appliquée au premier affichage, avant le traitement responsive : sel() n’est donc pas pris en charge ici ; s’il vous faut un espacement différent sur mobile, ajoutez une media query dans Container Style.
• La hauteur des cartes, l’arrondi des coins et la façon dont la photo remplit la carte se règlent dans Card Image Style → Card Box Style — par exemple height: sel(220px, 180px) pour des hauteurs différentes sur ordinateur et sur mobile.

Navigation

Scroll Behavior — x mandatory s’arrête toujours sur le bord d’une carte ; x proximity ne s’aimante que lorsqu’on s’arrête près d’un bord ; none défile librement avec inertie.

Items Scrolled Per Click — la distance parcourue à chaque clic de flèche et à chaque pas de lecture automatique : 1 à 4 cartes, ou full, qui avance exactement de l’ensemble visible (2 éléments visibles font défiler 2, 4 en font défiler 4 — cela suit automatiquement le point de rupture).

Flèches

Deux jeux indépendants, utilisables séparément ou ensemble :

• Arrows on Sides (Classic) — de grandes flèches centrées verticalement sur les bords de la rangée. L’option Offset les déplace à l’extérieur de la rangée (valeurs négatives) ou au-dessus des cartes (positives).
• Arrows in Title Bar — des boutons compacts ‹ › à l’extrémité droite du titre du widget.

Préréglages Arrow Style : circle (clair), dark, pill, outline, soft — chacun est un style complet avec son propre survol, rendu à l’identique sur tous les sites. Choisissez none pour confier le style au thème de votre site, afin que les flèches se fondent dans les boutons du site ; notez qu’avec none, l’aperçu de l’éditeur affiche de simples boutons de repli, car le thème n’existe que sur le site en ligne. Affinez n’importe quel préréglage dans Side Arrow Custom Style — quand un préréglage est actif, ajoutez !important à chaque propriété que vous remplacez.

Deux comportements s’appliquent à toutes les flèches : Fade Arrows at Row Ends atténue la flèche arrière au début et la flèche avant à la fin, et Hide Arrows on Touch Devices les retire là où le balayage est naturel. Les deux sont activés par défaut.

Autres réglages

• Pagination Dots — des points cliquables sous la rangée qui indiquent la position de défilement. Ils n’apparaissent que s’il y a plus d’une page à faire défiler, et se reconstruisent automatiquement au redimensionnement. Les styles du conteneur, des points et du point actif sont modifiables séparément.
• Scrollbar — une fine barre de défilement facultative sous les cartes, désactivée par défaut. Les couleurs du curseur et de la piste s’appliquent dans tous les navigateurs ; le réglage de hauteur s’applique dans Safari (Chrome et Firefox utilisent leur fine taille fixe).
• Drag to Scroll with Mouse — permet aux visiteurs sur ordinateur d’attraper la rangée et de la tirer comme sur un écran tactile. Un glisser n’est jamais pris pour un clic sur un produit. Activé par défaut.
• Autoplay — définissez un intervalle en millisecondes (par exemple 4000) pour avancer automatiquement. La lecture se met en pause pendant que le visiteur survole ou touche le slider, et Autoplay: Loop to Start détermine ce qui se passe à la dernière carte : retour à la première (activé) ou arrêt (désactivé).

Badges

Les badges utilisent un système d’emplacements de coin pour ne jamais se chevaucher :

• La Badge Stack contient les badges Popular, Best Seller, New, Time-based et Custom (DB). Toute combinaison s’empile proprement dans un coin, dans l’ordre du modèle. Badge Stack Corner déplace toute la pile vers l’un des quatre coins en un seul choix ; Stack Custom Style ajoute des marges ou passe en rangée horizontale.
• Trois badges gardent leurs propres coins : Discount (en haut à droite), Price Drop (en bas à droite) et Low Stock (en bas à gauche). Le cœur Wishlist se place en haut à droite. Si vous déplacez la pile sur l’un de ces coins, restylez ce badge ou désactivez-le.

Chaque badge a ses propres seuils (par exemple pourcentage de remise minimal, niveau de stock, popularité dans le top N %) et ses options de texte et de style dans sa section du menu.

Contenu de la carte

La carte elle-même est la photo du produit, avec un Gradient Overlay assombrissant et le Text Overlay en bas : nom du produit (limité à deux lignes), un champ de sous-titre (la marque par défaut), et le prix, avec le prix d’origine barré automatiquement en cas de remise. Un clic n’importe où sur la carte ouvre la page produit (Product Click Target définit la colonne d’URL et l’ouverture dans le même onglet ou un nouvel onglet).

Sous l’image, des blocs facultatifs peuvent être activés : titre du produit, bloc de prix complet, notes en étoiles, description, colonne personnalisée du catalogue, lien vers les options, bouton-lien, Add to Cart (avec apparition animée au survol), texte de paiement en plusieurs fois, statistiques de vues et d’achats en direct, et le bandeau de preuve sociale. Tous sont désactivés par défaut pour que la carte reste épurée jusqu’à ce que vous les activiez.

Produits de démonstration — comment fonctionne le jeu par défaut

Le widget est livré avec six produits d’exemple intégrés, pour qu’un compte puisse concevoir et prévisualiser le widget avant qu’un catalogue de produits ne soit connecté.

La logique, précisément :

1. Les cartes de démonstration ne s’affichent que dans les contextes d’aperçu. Le widget détecte l’éditeur Personyze (y compris son cadre d’aperçu) et les liens d’aperçu qui portent le paramètre _S_T= . Les visiteurs ordinaires d’un site en ligne n’y correspondent jamais : les produits de démonstration — et leurs prix d’exemple — ne peuvent donc jamais apparaître à de vrais acheteurs. Un site en ligne sans catalogue affiche simplement un widget vide.
2. Dans un contexte d’aperçu, les démos remplacent l’espace réservé de l’éditeur. Quand aucun catalogue n’est connecté, l’éditeur affiche une seule carte d’espace réservé « Image from Catalog ». Le widget compte les vraies cartes produites par la boucle de produits : une ou moins signifie espace réservé, il est donc masqué et les six cartes de démonstration s’affichent à sa place.
3. Les vrais produits l’emportent toujours. Dès que la boucle renvoie plus d’un vrai produit — c’est-à-dire qu’un vrai catalogue est connecté — les cartes de démonstration restent masquées et les vrais produits s’affichent, dans l’éditeur comme partout ailleurs.
4. Tout ce comportement tient en un interrupteur : Widget Layout → Demo Products (Preview Only). Vous pouvez le laisser activé en permanence sans risque ; le désactiver n’affecte que les aperçus.

Pour modifier les produits de démonstration eux-mêmes (images, noms, prix), modifiez le bloc des cartes de démonstration dans la source du modèle — les six cartes sont du HTML simple qui reproduit le design des vraies cartes, marquées avec la classe pz-demo .

Architecture des styles et interaction avec le thème du site

Trois couches stylisent le widget, dans l’ordre où elles s’appliquent :

1. La mise en page essentielle est en ligne sur le slider et les cartes, appliquée par le navigateur dès que le HTML s’affiche — c’est pourquoi le slider n’apparaît jamais furtivement comme une pile de cartes pleine largeur lors d’un premier chargement à froid.
2. Les règles responsives et décoratives (surcharges par point de rupture, points, préréglages de flèches, survols) se trouvent dans la feuille de style du modèle.
3. Le CSS de votre site peut atteindre tout ce qui n’est pas explicitement verrouillé. C’est voulu : avec Arrow Style sur none, le thème du site habille entièrement les flèches ; avec n’importe quel préréglage sélectionné, le préréglage verrouille sa géométrie et ses couleurs avec !important pour s’afficher à l’identique sur tous les sites.

La règle pratique pour personnaliser : si votre modification ne tient pas, la propriété est verrouillée par un préréglage ou protégée contre les conflits avec le thème — ajoutez !important à votre déclaration dans le champ Custom Style concerné et elle prendra le dessus.

Source des données

Les produits viennent du catalogue via la requête de produits du modèle — par défaut les produits les plus récents, mêlés aux articles vus récemment par le visiteur, limités à 12. La logique de recommandation (meilleures ventes, vus ensemble, basée sur le panier, etc.) se règle dans la configuration de l’audience et de la source de données de l’action, comme pour toute recommandation Personyze, indépendamment des options de design de ce widget.

Consultez Configurer le flux de produits et Algorithmes de recommandation de produits.

FAQ

Les flèches sont différentes sur mon site et dans l’éditeur.
Avec Arrow Style sur none, c’est voulu — le thème du site les stylise, et l’éditeur n’a pas de thème. Choisissez n’importe quel préréglage pour un rendu identique au pixel près dans les deux.

Les points ne s’affichent pas.
Les points n’apparaissent que s’il y a plus d’une page à faire défiler. Avec peu de produits ou une Minimum Card Width élevée sur un grand écran, tout tient sur une page et les points sont masqués.

La flèche arrière semble désactivée.
Au début de la rangée, il n’y a rien vers quoi revenir : Fade Arrows at Row Ends l’atténue donc. Elle s’active dès que la rangée bouge. Désactivez l’atténuation si vous préférez des flèches toujours pleines.

J’ai mis à jour le modèle et certains réglages semblent faux.
Les champs que vous aviez déjà enregistrés conservent leurs valeurs et remplacent les nouvelles valeurs par défaut du modèle. Réinitialisez un champ pour reprendre la valeur par défaut actuelle.

La lecture automatique s’arrête toute seule.
Autoplay: Loop to Start est désactivé : elle s’arrête donc à la dernière carte, comme configuré. Activez-le pour un défilement continu. La lecture automatique se met aussi en pause pendant que le visiteur survole ou touche le slider — c’est intentionnel.

Les visiteurs sur ordinateur peuvent-ils faire glisser la rangée à la souris ?
Oui — Drag to Scroll est activé par défaut. Ils peuvent aussi utiliser les flèches, les points, le pavé tactile, ou Maj + molette de la souris.

Pourquoi ne puis-je pas utiliser sel() dans Space Between Cards ?
L’espacement est appliqué au premier affichage, avant le traitement responsive, pour garantir une mise en page stable dès la première image. Utilisez une longueur simple ; gérez un espacement différent sur mobile avec une media query dans Container Style si nécessaire.

Les produits de démonstration s’affichent-ils parfois aux vrais visiteurs ?
Non. Ils ne s’affichent que dans l’éditeur Personyze et sur les liens d’aperçu _S_T= , et seulement tant que le catalogue renvoie au plus un produit.