Connectif permet d'afficher du contenu web personnalisé dans VTEX IO avec des modifications minimales du code et de la structure de votre eCommerce.
Dans cet article, vous apprendrez comment insérer du contenu de Connectif à l'aide d'un inline dans votre VTEX IO.
Temps d'implémentation : 15 minutes.
Difficulté : Moyenne
Quand l'utiliser ? : Lorsque vous souhaitez inclure du contenu (statique ou dynamique) dans VTEX IO.
Pour utiliser du contenu web inline de Connectif dans VTEX IO, il est indispensable d'utiliser le composant Connectif spécialement conçu et développé pour le système de thèmes de VTEX IO.
Vous pouvez consulter dans ce guide VTEX comment personnaliser un thème : VTEX Store Theme.
ÉTAPE 1. Insérer le composant dans le code
(Dans cette section, le composant est placé à l'emplacement approprié en fonction de la stratégie pour afficher le contenu.).
1. Dans le fichier "manifest.json" du thème utilisé dans votre VTEX IO, ajoutez l'application Connectif en tant que dépendance avec une version 1 ou supérieure.
2. Placez la définition du bloc à l'emplacement souhaité dans le code.
Dans notre exemple, le composant a été inséré dans la page d'accueil de l'eCommerce.
"store.home": {
"blocks": [
"list-context.image-list#demo",
/* Vous pouvez faire référence à des blocs définis dans d'autres fichiers.
* Par exemple, `flex-layout.row#deals` est défini dans le fichier `deals.json`. */
"__fold__.experimentalLazyAssets",
"flex-layout.row#deals",
"connectif#test-connectif-block",
"rich-text#shelf-title",
"flex-layout.row#shelf",
"info-card#home",
"rich-text#question",
"rich-text#link",
"newsletter"
]
}
3. Ajoutez les propriétés nécessaires pour identifier le bloc créé.
Dans notre exemple, 2 propriétés ont été définies pour le composant :
— "classId" : Ajoute le texte spécifié comme classe au conteneur créé par le composant.
— "elementId" : Ajoute le texte spécifié comme identifiant au conteneur créé par le composant.
"connectif#test-connectif-block": {
"props": {
"classId": "test-connectif-block",
"elementId": "test-connectif-block-elem-id"
}
}
Il n'est pas nécessaire d'utiliser les deux propriétés, il suffit d'en remplir une pour obtenir le sélecteur nécessaire dans Connectif.
4. (Facultatif) Répétez les points 2 et 3 pour chaque endroit distinct dans la structure de votre site où vous souhaitez afficher un contenu.
Pour un fonctionnement correct, chaque composant supplémentaire doit avoir un identifiant différent qui le distingue.
ÉTAPE 2. Afficher le contenu sur le site
5. Créez un workflow pour afficher l'inline. N'oubliez pas qu'il est nécessaire, au minimum, d'utiliser un nœud "Envoyer un contenu web" et de le configurer avec la propriété créée à l'étape 3 comme sélecteur.
Pour créer une stratégie affichant un contenu intégré dans VTEX IO, vous pouvez suivre les instructions de l'article Insérer un inline sur votre eCommerce.
Succès !
Vous êtes arrivé à la fin de la leçon.
Continuez à apprendre !
Pour tirer le meilleur parti de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :
- Intégration personnalisée pour envoyer des données, afin d'envoyer des données depuis Connectif vers des systèmes ou applications externes.
- Détecter et réagir aux liens web créés en dehors de Connectif, pour détecter et réagir aux clics sur n'importe quel lien de votre site.
-
Intégration avec Facebook et Instagram, pour connecter votre compte Facebook Ads à Connectif et commencer à gérer vos audiences.
-
Formulaires intégrés, pour intégrer dans Connectif des formulaires déjà existants sur votre site.