Centre d'aide
Comment créer un « Vibe Block » à partir des produits du catalogue
Grâce à Vibe Block, vous pouvez créer un bloc de produits personnalisé et le relier au catalogue de produits. Décrivez le design souhaité dans une invite, puis affichez les noms des produits, leurs prix, leurs images et les boutons « Acheter » dans le bloc généré.
Connecter le catalogue de produits et ajouter des produits
Accédez aux « Paramètres du site », puis, dans la section « Services intégrés », cliquez sur « Se connecter » pour activer le catalogue de produits.
Ajoutez des produits au catalogue de produits manuellement ou utilisez la fonctionnalité d'importation.
Ajouter un bloc « Vibe » à la page
Accédez à la page sur laquelle vous souhaitez afficher les produits. Ajoutez un bloc « Vibe » à partir de la bibliothèque de blocs.
Saisissez une instruction décrivant la conception du bloc « Fiche produit » et précisez que ce bloc doit être relié au catalogue de produits du projet. Attendez que le bloc soit généré.
De plus, veillez à préciser dans la commande qu'il faut ajouter le produit au panier.
Exemple de consigne :
Créez un bloc contenant des fiches produit et reliez-le au « Catalogue de produits » du projet. Chaque fiche doit afficher le nom et le prix du produit. Affichez trois fiches par ligne. Ajoutez un bouton « Afficher plus » au bas du bloc. Lorsque l'utilisateur clique dessus, le bloc doit charger d'autres produits à partir du « Catalogue de produits ».
Créez un bloc contenant des fiches produit et reliez-le au « Catalogue de produits » du projet. Chaque fiche doit afficher le nom et le prix du produit. Affichez trois fiches par ligne. Ajoutez un bouton « Afficher plus » au bas du bloc. Lorsque l'utilisateur clique dessus, le bloc doit charger d'autres produits à partir du « Catalogue de produits ».
Une fois le Vibe Block généré, le bouton « Paramètres du catalogue » apparaîtra. Cliquez dessus et sélectionnez la catégorie du catalogue de produits que vous souhaitez afficher sur la page.
Ajoutez à la page le panier ST100 avec un bloc « formulaire de commande ».
Publiez la page et ouvrez-la pour tester le bloc. Ajoutez un produit au panier.
Vérifiez que tout fonctionne correctement, puis effectuez le paiement. Les données relatives au produit seront transmises aux services de saisie de données connectés, comme auparavant.
Vous pouvez également inclure la description détaillée de la fenêtre contextuelle du produit dans la consigne. Pour ce faire, attendez que le contenu du bloc principal ait été généré : décrivez l'apparence que doit avoir la fenêtre contextuelle et les informations qu'elle doit afficher.
Par exemple, la fenêtre contextuelle détaillée illustrée ci-dessous affiche toutes les informations disponibles sur le produit issues du catalogue de produits, des commandes de quantité et un bouton « Ajouter au panier ». Vous pouvez rédiger votre propre consigne pour supprimer des boutons ou modifier les informations affichées dans la fenêtre contextuelle.
Par exemple, la fenêtre contextuelle détaillée illustrée ci-dessous affiche toutes les informations disponibles sur le produit issues du catalogue de produits, des commandes de quantité et un bouton « Ajouter au panier ». Vous pouvez rédiger votre propre consigne pour supprimer des boutons ou modifier les informations affichées dans la fenêtre contextuelle.
Il est également possible d'ajouter des produits au panier depuis la fenêtre contextuelle détaillée.
Si un produit n'a pas été ajouté au panier ou si certaines données ont été transférées de manière erronée (par exemple, la référence), décrivez le problème dans une nouvelle invite dans l'éditeur Vibe Block et demandez à l'IA de le corriger.
