Composant Fragment d’expérience (v1) experience-fragment-component

Le composant Fragment d’expérience des composants principaux permet à l’auteur du contenu de placer une variation de fragment d’expérience sur une page tout en prenant en charge une structure de site localisée.

Utilisation usage

Le composant Fragment d’expérience des composants principaux permet à l’auteur du contenu d’effectuer une sélection parmi les variations de fragments d’expérience existantes et d’en placer une dans la page de contenu. Le composant de fragment d’expérience prend également en charge une structure de site localisée.

Version et compatibilité version-and-compatibility

Ce document décrit la version v1 du composant Fragment d’expérience, qui a été introduite avec la version 2.6.0 des composants principaux en septembre 2019.

CAUTION
Ce document décrit la version v1 du composant Fragment d’expérience.
Pour plus d’informations sur la version actuelle du composant Fragment d’expérience, consultez le document Composant Fragment d’expérience.

Prise en charge de la structure de site localisée localized-site-structure

Le composant de fragment d’expérience s’adapte aux structures localisées du site et assure le rendu du fragment d’expérience approprié en fonction de la localisation de la page. Pour ce faire, le fragment d’expérience doit respecter les conditions suivantes.

  • Le composant de fragment d’expérience est ajouté à un modèle.
  • Ce modèle est utilisé pour créer une page de contenu qui fait partie d’une structure localisée sous /content/<site>.
  • Le fragment d’expérience référencé sur une page de contenu fait partie d’une structure de fragment d’expérience localisée sous /content/experience-fragments qui suit les mêmes schémas que le site sous /content/<site>, y compris l’utilisation des mêmes noms de composant.

Dans ce cas, le fragment avec la même localisation (langue, plan directeur ou live copy) que la page active est rendu dans le modèle.

Ce comportement est limité aux composants de fragments d’expérience ajoutés aux modèles. Les composants de fragments d’expérience ajoutés aux pages de contenu individuelles affichent les rendus de fragments d’expérience exacts configurés dans le composant.

Exemple example

Imaginons que votre contenu ressemble à ceci :

/content
+-- experience-fragments
   \-- wknd
      +-- language-masters
      +-- us
         +-- en
            +-- footerTextXf
            \-- headerTextXf
         \-- es
            +-- footerTextXf
            \-- headerTextXf
      \-- ch
         +-- de
            +-- footerTextXf
            \-- headerTextXf
         +-- fr
            +-- footerTextXf
            \-- headerTextXf
         \-- it
            +-- footerTextXf
            \-- headerTextXf
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   +-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

Notez que la structure sous /content/experience-fragments/wknd reflète la structure de /content/wknd.

Dans ce cas, si le composant de fragment d’expérience /content/experience-fragments/wknd/us/en/footerTextXf est placé sur un modèle, les pages localisées créées à partir de ce modèle afficheront automatiquement le fragment d’expérience localisé correspondant à la page de contenu localisée.

Ainsi, si vous accédez à une page de contenu sous /content/wknd/ch/de qui utilise le même modèle, on obtiendra /content/experience-fragments/wknd/ch/de/footerTextXf comme rendu au lieu de /content/experience-fragments/wknd/us/en/footerTextXf.

Secours fallback

Le composant de fragment d’expérience tentera de trouver un composant localisé correspondant dans l’ordre suivant.

  1. Il tente d’abord de trouver une racine de langue.
  2. Si elle est introuvable, il tente de trouver un plan directeur.
  3. S’il est introuvable, il tente de trouver une live copy.
  4. Si elle est introuvable, il correspond par défaut au fragment d’expérience configuré dans le composant.

Exemple de sortie de composant sample-component-output

Pour tester le composant de fragment d’expérience et obtenir des exemples d’options de configuration, ainsi que des sorties HTML et JSON, consultez la bibliothèque de composants.

Détails techniques technical-details

La documentation technique la plus récente sur le composant de fragment d’expérience se trouve sur GitHub.

Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux.

Boîte de dialogue de configuration configure-dialog

La boîte de dialogue de configuration permet à l’auteur de contenu de sélectionner la variation de fragment d’expérience qui doit être rendue sur la page.

Boîte de dialogue de modification du composant Fragment d’expérience

Utilisez le bouton Ouvrir la boîte de dialogue de sélection pour ouvrir le sélecteur de composants afin de choisir la variation de composant de fragment d’expérience à ajouter à la page de contenu.

Si vous ajoutez le composant de fragment d’expérience à un modèle, notez qu’il sera automatiquement localisé à condition que les fragments d’expérience soient localisés. Ainsi, ce qui est généré sur la page peut différer du composant que vous sélectionnez explicitement. Pour plus d’informations, reportez-vous à l’exemple ci-dessus.

Vous pouvez également définir un ID. Cette option permet de contrôler l’identifiant unique du composant dans le code HTML et dans la couche de données.

  • Si rien n’est indiqué, un ID unique est généré automatiquement et peut être trouvé en examinant la page obtenue.
  • Si un ID est spécifié, il incombe à l’auteur de s’assurer qu’il est unique.
  • La modification de l’ID peut avoir un impact sur le suivi CSS, JS et de couche de données.

Boîte de dialogue de conception design-dialog

La boîte de dialogue de conception permet à l’auteur du modèle de définir les options disponibles pour l’auteur du contenu qui utilise le composant de fragment d’expérience et les valeurs par défaut définies lors du placement de celui-ci.

Onglet Styles styles-tab

Le composant de fragment d’expérience prend en charge le système de style AEM.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c