Utilisation de 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

Présentation 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 un ou plusieurs composants pouvant contenir tout élément dans un système de paragraphes référencé dans l’expérience complète ou demandé par un point de terminaison tiers.

Utilisation de fragments d’expérience dans AEM Screens using-experience-fragments-in-aem-screens

NOTE
L’exemple suivant utilise We.Retail comme projet de démonstration à partir duquel le fragment d’expérience est appliqué à partir d’un Sites vers un projet AEM Screens.

Par exemple, le workflow suivant illustre l’utilisation de fragments d’expérience provenant de We.Retail dans Sites. Vous pouvez choisir une page web et utiliser ce contenu dans votre canal AEM Screens dans l’un de vos projets.

Prérequis pre-requisites

Création d’un projet de démonstration avec un canal

Création d’un projet

  1. Pour créer un projet, sélectionnez Créer un projet Screens.
  2. Saisissez le titre DemoProject.
  3. Sélectionnez Enregistrer.

A DemoProject est ajouté à votre AEM Screens.

Création d’un canal

  1. Accédez au projet DemoProject que vous avez créé et sélectionnez le dossier Channels (Canaux).

  2. Sélectionner Créer dans la barre d’actions pour ouvrir l’assistant.

  3. Choisissez la Canal de séquence modèle dans l’assistant et sélectionnez Suivant.

  4. Saisissez le Titre as TestChannel et sélectionnez Créer.

A TestChannel est ajouté à la variable DemoProject.
screen_shot_2019-07-29at105101am

Création d’un fragment d’expérience creating-an-experience-fragment

Pour appliquer le contenu à partir de We.Retail à votre TestChannel in DemoProject.

  1. Accédez à une page Sites dans We.Retail

    1. Accédez à Sites et sélectionnez We.Retail > États-Unis > Anglais > Matériel et sélectionnez cette page afin de pouvoir l’utiliser comme fragment d’expérience pour votre canal Screens.

    2. Sélectionner Modifier dans la barre d’actions afin de pouvoir ouvrir la page que vous souhaitez utiliser comme fragment d’expérience pour votre canal Screens.

  2. Réutilisation du contenu

    1. Sélectionnez le fragment à inclure dans votre canal.
    2. Sélectionnez la dernière icône à droite pour ouvrir le Convertir en fragment d’expérience de la boîte de dialogue

    screen_shot_2019-07-29at105314am

  3. Création d’un fragment d’expérience

    1. Choisissez l’action Créer un fragment d’expérience.

    2. Sélectionnez le Chemin d’accès parent.

    3. Sélectionnez 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).

    4. Saisissez le Titre du fragment ScreensFragment.

    5. Pour terminer la création d’un fragment d’expérience, cochez la case .

    screen_shot_2019-07-29at105918am

    Remarque : Pour sélectionner une option plus simple, cochez la case à droite du champ afin d’ouvrir la boîte de dialogue de sélection.

  4. Création d’une Live Copy du fragment d’expérience

    1. Accédez à la page d’accueil d’AEM.
    2. Sélectionner Fragments d’expérience et mettez en surbrillance le ScreensFragment et sélectionnez Variation en tant que Live Copy, comme illustré dans la figure ci-dessous :

    screen_shot_2019-07-29at110443am

    c. Sélectionnez le ScreensFragment de Créer une Live Copy assistant et sélectionnez Suivant.

    d. Saisissez le Titre et le Nom Screens.

    e. Sélectionnez Créer afin de pouvoir créer la Live Copy.

    f. Sélectionnez Terminé pour que vous puissiez revenir à ScreensFragment page.

    screen_shot_2019-07-29at110616am

    note note
    NOTE
    Après avoir créé un fragment AEM Screens, vous pouvez en modifier les propriétés. Sélectionnez le fragment, puis sélectionnez Propriétés dans la barre d’actions.

    Modification des propriétés d’un fragment Screens

    1. Accédez au ScreensFragment (vous avez créé les étapes précédentes) et sélectionnez Propriétés dans la barre d’actions.

    2. Sélectionnez l’onglet Configuration hors ligne, comme illustré ci-dessous.

    Vous pouvez ajouter la variable Bibliothèques côté client (Java™ et css) et Fichiers statiques à votre fragment d’expérience.

    L’exemple suivant illustre l’ajout de bibliothèques côté client et de polices dans le cadre de fichiers statiques à votre fragment d’expérience. fragment

  5. Utilisation du fragment d’expérience comme composant dans un canal Screens

    1. Accédez au canal Screens où vous souhaitez utiliser le fragment Screens.

    2. Sélectionnez la variable TestChannel et sélectionnez Modifier dans la barre d’actions.

    3. Sélectionnez l’icône des composants dans l’onglet latéral.

    4. Faites glisser le fragment d’expérience et déposez-le dans votre canal.

    screen_shot_2019-07-29at123115pm

    e. Sélectionnez le Fragment d’expérience et sélectionnez l’icône en haut à gauche (clé à molette) pour ouvrir la Fragment d’expérience de la boîte de dialogue

    f. Sélectionnez la Live Copy Screens du fragment que vous avez créé à l’étape 3 dans le champ Chemin d’accès.

    screen_shot_2019-07-26at82650pm

    f. Sélectionnez la Live Copy Screens du fragment que vous avez créé à l’étape 3 dans le champ Fragment d’expérience.

    screen_shot_2019-07-26at82509pm

    h. Saisissez la valeur en millisecondes dans Durée.

    i. Sélectionnez le Configuration hors ligne de la Fragments d’expérience pour définir les bibliothèques côté client et les fichiers statiques.

    note note
    NOTE
    Pour 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 la Configuration hors ligne dans le Fragment d’expérience de la boîte de dialogue

    screen_shot_2019-07-26at82844pm

    j. Sélectionnez la coche pour terminer le processus.

Validation du résultat validating-the-result

Une fois les étapes précédentes terminées, vous pouvez valider votre fragment d’expérience dans ChannelOne par :

  1. accédant à TestChannel  ;
  2. sélectionnant l’Aperçu dans la barre d’actions.

Affichez le contenu à partir du Sites (Live Copy du fragment d’expérience) dans votre canal, comme illustré dans la figure ci-dessous :
screen_shot_2018-06-08at120739pm

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.

Parce que le fragment d’expérience que vous avez créé est une Live Copy de la 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.

NOTE
Pour plus d’informations sur la Live Copy, voir Réutilisation de contenu : Multi-site Manager et Live Copy.

Pour propager les modifications du canal principal vers votre canal de destination, procédez comme suit :

  1. Sélectionnez le fragment d’expérience dans la Sites (principal) et sélectionnez l’icône en forme de crayon afin de pouvoir modifier les éléments du fragment d’expérience.

    screen_shot_2018-06-08at122655pm

  2. Sélectionnez le fragment d’expérience et cliquez sur l’icône en forme de clé à molette pour ouvrir la boîte de dialogue permettant de modifier les images.

    screen_shot_2018-06-08at25031pm

  3. La boîte de dialogue Grille de produits apparaît.

    screen_shot_2018-06-08at25306pm

  4. Vous pouvez modifier n’importe quelle image. Par exemple, ici, la première image est remplacée dans ce fragment.

    screen_shot_2018-06-08at25608pm

  5. Sélectionnez le fragment d’expérience et sélectionnez l’icône Déployer afin de propager les modifications au fragment utilisé dans votre canal.

    screen_shot_2018-06-08at31352pm

  6. Sélectionnez Déployer.

    Les modifications sont déployées.

    screen_shot_2018-06-08at32148pm

Validation des modifications validating-the-changes

Pour confirmer les modifications dans votre canal, procédez comme suit :

  1. Accédez au Screens > Canaux > TestChannel.

  2. Sélectionner Aperçu dans la barre d’actions.

L’image suivante illustre les modifications apportées à votre canal TestChannel:
screen_shot_2018-06-08at33351pm

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053