Le composant "connectif.product-recommendation" sert à afficher des recommandations de produits envoyées depuis Connectif sous forme de carrousel dans les intégrations avec VTEX IO.
Pour configurer ce composant, vous aurez besoin d’un expert ayant des connaissances en programmation. De plus, pour que le eCommerce puisse recevoir des événements de produits recommandés, vous devrez créer et configurer les workflows nécessaires avec le nœud « Partager des données ».
Comment l'utiliser
Le composant "connectif.product-recommendation" est conçu pour les intégrations avec VTEX IO, en utilisant les composants natifs de VTEX comme Slider Layout et Product Summary pour afficher les informations produits et configurer les paramètres du carrousel.
Exigences
Pour pouvoir utiliser le composant "connectif.product-recommendation", il est nécessaire d’avoir la dépendance Connectif dans le thème, en ajoutant le fragment de code suivant dans le manifest.json :
"peerDependencies": {
"connectif.connectif": "1.x"
},
Exemple
Le composant aura cet aspect :
"connectif.product-recommendation": {
"props": {
"id": "product-recommendation-home"
},
"children": ["list-context.product-list-static#connectif-products"]
},
"list-context.product-list-static#connectif-products": {
"blocks": ["product-summary.shelf"], // Composant VTEX Product Summary
"children": ["slider-layout#connectif-products"] // Composant VTEX Slider Layout
},
"slider-layout#connectif-products": {
"props": {
"itemsPerPage": {
"desktop": 3,
"tablet": 3,
"phone": 1
},
"infinite": true,
"fullWidth": false,
"blockClass": "shelf"
}
},
Explication de l’exemple :
- connectif.product-recommendation : reçoit un “id” dans les props. Cet identifiant est celui que vous devez configurer dans le nœud « Partager des données ».
- list-context.product-list-static#connectif-products : englobe le bloc product-summary.shelf et contient le composant slider-layout#connectif-products.
- product-summary.shelf : est le composant natif de VTEX pour afficher les informations des produits.
- slider-layout#connectif-products correspond aux paramètres personnalisables du carrousel, qui permettent de configurer combien de produits afficher selon le type d’appareil.
Félicitations !
Vous êtes arrivé à la fin de la leçon.
Des questions non résolues ?
N'oubliez pas que nos spécialistes Connectif sont à votre disposition. Pour les contacter, ouvrez simplement un ticket auprès du support en cliquant sur le bouton bleu “Aide” de votre tableau de bord.
Continuez à apprendre !
Pour tirer pleinement parti de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :
- Guide d’intégration avec VTEX IO, pour apprendre à intégrer votre boutique VTEX IO avec Connectif.
- Insérer un inline dans VTEX, pour insérer du contenu Connectif via un inline dans VTEX IO.
- Configuration des affiliés dans VTEX, pour apprendre à synchroniser les affiliés dans VTEX avec Connectif et comprendre comment fonctionne cette synchronisation.
- Intégration personnalisée pour envoyer des données, pour envoyer des données de Connectif vers des systèmes ou applications externes.