Utiliser des fragments d’expérience using-experience-fragments
Cette page aborde les sujets suivants :
- Présentation
- Utilisation de fragments d’expérience dans AEM Screens
- Propagation des modifications apportées à la page
Vue d’ensemble overview
Un fragment d’expérience est un groupe d’un ou plusieurs composants comprenant un contenu et une disposition pouvant être référencés dans les pages. Les fragments d’expérience peuvent contenir n’importe quel composant. Par exemple, ils peuvent contenir n’importe quel composant pouvant contenir un élément dans un système de paragraphes, qui sera référencé dans l’expérience complète ou demandé par un point d’entrée tiers.
Utilisation de fragments d’expérience dans AEM Screens using-experience-fragments-in-aem-screens
We.Retail comme projet de démonstration : le fragment d’expérience issu d’une page Sites est appliqué à un projet AEM Screens.Par exemple, le workflow ci-après illustre l’utilisation de fragments d’expérience de We.Retail dans Sites. Vous pouvez choisir une page web et utiliser son contenu dans votre canal AEM Screens dans l’un de vos projets.
Conditions préalables pre-requisites
Création d’un projet de démonstration avec un canal
Création d’un projet
- Pour créer un projet, cliquez sur Créer un projet Screens.
- Saisissez le titre DemoProject.
- Cliquez sur Enregistrer.
Un projet DemoProject est ajouté à AEM Screens.
Créer un canal
-
Accédez au projet DemoProject que vous avez créé et cliquez sur le dossier Canaux.
-
Cliquez sur Créer dans la barre d’actions pour ouvrir l’assistant.
-
Sélectionnez le modèle Canal de séquence dans l’assistant et cliquez sur Suivant.
-
Saisissez le titre TestChannel et cliquez sur Créer.
Un TestChannel est ajouté à votre DemoProject.
Création d’un fragment d’expérience creating-an-experience-fragment
Suivez les étapes ci-dessous pour appliquer le contenu de We.Retail dans le canal TestChannel de DemoProject.
-
Accéder à une page Sites dans We.Retail
-
Accédez à Sites, cliquez sur
We.Retail> United States (États-Unis) > English (Anglais) > Equipment (Matériel) et cliquez sur cette page pour l’utiliser comme fragment d’expérience pour votre canal Screens. -
Cliquez sur Modifier dans la barre d’actions pour ouvrir la page que vous souhaitez utiliser comme fragment d’expérience pour votre canal Screens.
-
-
Réutiliser du contenu
- Cliquez sur le fragment à inclure dans votre canal.
- Cliquez sur la dernière icône à droite pour ouvrir la boîte de dialogue Convertir en fragment d’expérience.
-
Créer un fragment d’expérience
-
Choisissez l’Action Créer un fragment d’expérience.
-
Cliquez sur le chemin d’accès parent.
-
Cliquez sur le modèle. Sélectionnez ici le modèle Fragment d’expérience - Variation Screens (valeur dans le champ
/libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens). -
Saisissez le Titre du fragment ScreensFragment.
-
Pour terminer la création d’un fragment d’expérience, cliquez sur la coche.
Pour sélectionner une option plus simple, cochez la case à droite du champ afin d’ouvrir la boîte de dialogue de sélection.
-
-
Création d’une Live Copy du fragment d’expérience
- Accédez à la page d’accueil d’AEM.
- Cliquez sur Fragments d’expérience et mettez en surbrillance ScreensFragment. Cliquez ensuite sur Variation comme Live Copy, comme illustré ci-dessous :
c. Cliquez sur ScreensFragment à partir de l’assistant Créer une Live Copy, puis sur Suivant.
d. Saisissez le Titre et le Nom Screens.
e. Cliquez sur Créer afin de pouvoir créer la Live Copy.
f. Cliquez sur Terminé pour que vous puissiez revenir à la page ScreensFragment.
note note NOTE Après avoir créé un fragment AEM Screens, vous pouvez en modifier les propriétés. Cliquez sur le fragment, puis sur Propriétés dans la barre d’actions. Modification des propriétés d’un fragment Screens
-
Accédez au fragment ScreensFragment (que vous avez créé lors des étapes précédentes) et cliquez sur Propriétés dans la barre d’actions.
-
Cliquez sur l’onglet Configuration hors ligne, comme illustré ci-dessous.
Vous pouvez ajouter les bibliothèques côté client (Java™ et CSS) et les fichiers statiques à votre fragment d’expérience.
L’exemple ci-dessous illustre l’ajout de bibliothèques côté client et de polices en tant que fichiers statiques au fragment d’expérience.
-
Utilisation du fragment d’expérience comme composant dans un canal Screens
-
Accédez au canal Screens où vous souhaitez utiliser le fragment Screens.
-
Cliquez sur TestChannel, puis sur Modifier dans la barre d’actions.
-
Cliquez sur l’icône des composants dans l’onglet latéral.
-
Faites glisser le fragment d’expérience et déposez-le dans votre canal.
e. Cliquez sur le composant Fragment d’expérience, puis sur l’icône en haut à gauche (clé à molette) pour ouvrir la boîte de dialogue Fragment d’expérience.
f. Cliquez sur la Live Copy Screens du fragment que vous avez créé à l’étape 3 dans le chemin d’accès.
f. Cliquez sur la Live Copy Screens du fragment que vous avez créé à l’étape 3 dans le fragment d’expérience.
h. Saisissez la valeur en millisecondes dans Durée.
i. Cliquez sur la Configuration hors ligne dans la boîte de dialogue Fragments d’expérience pour définir les bibliothèques côté client et les fichiers statiques.
note note NOTE Si vous souhaitez ajouter des bibliothèques côté client ou des fichiers statiques à ce que vous avez configuré à l’étape (4), vous pouvez les ajouter à partir de l’onglet Configuration hors ligne de la boîte de dialogue Fragment d’expérience. 
j. Cliquez sur la coche pour terminer le processus.
-
Valider le résultat validating-the-result
Une fois les étapes précédentes terminées, vous pouvez valider le fragment d’expérience dans ChannelOne en effectuant ce qui suit :
- accédant à TestChannel ;
- sélectionnant l’Aperçu dans la barre d’actions.
Vous voyez le contenu de la page Sites (Live Copy du fragment d’expérience) dans votre canal, comme illustré ci-dessous :
Propagation des modifications apportées à la page propagating-changes-from-the-master-page
Une Live Copy désigne la copie (de la source), gérée par des actions de synchronisation telles que définies par les configurations de déploiement.
Comme le fragment d’expérience que vous avez créé est une Live Copy des pages Sites et que vous modifiez ce fragment à partir de la page principale, vous affichez les modifications dans votre canal. Vous pouvez également afficher la destination où vous avez utilisé le fragment d’expérience.
Pour propager les modifications du canal principal vers votre canal de destination :
-
Cliquez sur le fragment d’expérience sur la page (principale) Sites et cliquez sur l’icône en forme de crayon pour modifier les éléments du fragment d’expérience.
-
Cliquez sur le fragment d’expérience, puis sur l’icône en forme de clé à molette pour ouvrir la boîte de dialogue permettant de modifier les images.
-
La boîte de dialogue Grille de produits apparaît.
-
Vous pouvez modifier n’importe quelle image. Par exemple, ici, la première image est remplacée dans ce fragment.
-
Cliquez sur le fragment d’expérience, puis sur l’icône Déploiement pour propager les modifications sur le fragment utilisé dans votre canal.
-
Cliquez sur Déployer.
Les modifications sont déployées.
Validation des modifications validating-the-changes
Pour confirmer les modifications dans votre canal, procédez comme suit :
-
Accédez à Screens > Canaux > TestChannel.
-
Cliquez sur Aperçu dans la barre d’actions.
L’image suivante illustre les modifications apportées à votre canal TestChannel:
