Componente Fragmento de experiencia experience-fragment-component

El componente principal Fragmento de experiencia permite al autor del contenido colocar una variación de fragmento de experiencia en una página mientras admite una estructura de sitio localizada.

Uso usage

El componente principal Fragmento de experiencia permite al autor del contenido seleccionar entre las variaciones de fragmento de experiencia existentes y colocar uno en la página de contenido. El componente Fragmento de experiencia también admite una estructura de sitio localizada.

Versión y compatibilidad version-and-compatibility

La versión actual del componente de Fragmento de experiencia es la versión 2, que se introdujo con la versión 2.18.0 de los componentes principales en febrero de 2022 y se describe en este documento.

La siguiente tabla detalla todas las versiones compatibles del componente, las versiones de AEM con las que son compatibles las versiones del componente y los vínculos a la documentación de versiones anteriores.

Versión del componente
AEM 6.4
AEM 6.5
AEM as a Cloud Service
Versión 2
-
Compatible
Compatible
Versión 1
Compatible
Compatible
Compatible

Para obtener más información sobre las versiones y publicaciones de los componentes principales, consulte el documento Versiones de los componentes principales.

Compatibilidad con la estructura del sitio localizada localized-site-structure

El componente Fragmento de experiencia se adapta a las estructuras de sitio localizadas y representa el fragmento de experiencia adecuado en función de la localización de la página. Para ello, el fragmento de experiencia debe cumplir las siguientes condiciones.

  • El componente Fragmento de experiencia se agrega a una plantilla.
  • Esa plantilla se utiliza para crear una nueva página de contenido que forma parte de una estructura localizada debajo de /content/<site>.
  • El fragmento de experiencia al que se hace referencia en una página de contenido forma parte de una estructura de fragmento de experiencia localizada debajo de /content/experience-fragments que sigue los mismos patrones que el sitio debajo de /content/<site>, incluido el uso de los mismos nombres de componentes.

En este caso, el fragmento con la misma localización (idioma, modelo o versión activa) que la página actual se procesa como parte de la plantilla.

Este comportamiento se limita a los componentes de fragmento de experiencia añadidos a las plantillas. Los componentes Fragmento de experiencia añadidos a páginas de contenido individuales serán las representaciones exactas de los fragmentos de experiencia configurados dentro del componente.

Ejemplo example

Digamos que el contenido tiene este aspecto:

/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

Verá que la estructura siguiente /content/experience-fragments/wknd refleja la estructura de /content/wknd.

En este caso, si el componente Fragmento de experiencia /content/experience-fragments/wknd/us/en/footerTextXf se coloca en una plantilla, las páginas localizadas creadas en función de esa plantilla renderizarán automáticamente el fragmento de experiencia localizado que corresponda a la página de contenido localizada.

Por lo tanto, si se desplaza a una página de contenido en /content/wknd/ch/de que utiliza la misma plantilla, se procesará /content/experience-fragments/wknd/ch/de/footerTextXf en lugar de /content/experience-fragments/wknd/us/en/footerTextXf.

Abandono fallback

El componente Fragmento de experiencia intentará encontrar un componente localizado correspondiente en el siguiente orden.

  1. Primero intenta encontrar una raíz de idioma.
  2. Si no se encuentra, intenta encontrar un modelo.
  3. Si no se encuentra, intenta encontrar una versión activa.
  4. Si no se encuentra, el valor predeterminado será el fragmento de experiencia configurado en el componente.

Salida del componente de ejemplo sample-component-output

Para experimentar el componente Fragmento de experiencia, así como ver ejemplos de sus opciones de configuración, así como la salida HTML y JSON, visite la Biblioteca de componentes.

Detalles técnicos technical-details

La documentación técnica más reciente sobre el componente Fragmento de experiencia se encuentra en GitHub.

Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.

Cuadro de diálogo de configuración configure-dialog

El cuadro de diálogo de configuración permite al autor del contenido seleccionar la variación del fragmento de experiencia que se debe representar en la página.

Cuadro de diálogo de edición del componente Fragmento de experiencia

Utilice el botón Abrir cuadro de diálogo de selección para abrir el selector de componentes y elegir qué variación del componente Fragmento de experiencia se agregará a la página de contenido.

Si agrega el componente Fragmento de experiencia a una plantilla, tenga en cuenta que se localizará automáticamente siempre que los fragmentos de experiencias estén localizados, por lo que lo que se procese en la página puede variar del componente que seleccione explícitamente. Consulte el ejemplo anterior para obtener más información.

También puede definir un ID. Esta opción permite controlar el identificador único del componente en el HTML y en la capa de datos.

  • Si se deja en blanco, se generará automáticamente un ID único que se puede encontrar inspeccionando la página resultante.
  • Si se especifica un ID, es responsabilidad del autor asegurarse de que sea único.
  • Cambiar el ID puede afectar al seguimiento de CSS, JS y de la capa de datos.

Pestaña Estilos styles-tab-edit

Pestaña Estilos del cuadro de diálogo de edición del componente Fragmento de experiencia

El componente Fragmento de experiencia es compatible con el sistema de estilos de AEM.

Utilice la lista desplegable para seleccionar los estilos que desea aplicar al componente. Las selecciones realizadas en el cuadro de diálogo de edición tienen el mismo efecto que las seleccionadas en la barra de herramientas de componentes.

Los estilos deben configurarse para este componente en el cuadro de diálogo de diseño para que el menú desplegable esté disponible.

Cuadro de diálogo de diseño design-dialog

El cuadro de diálogo de diseño permite al autor de la plantilla definir las opciones disponibles para el autor de contenido que utiliza el componente Fragmento de experiencia y los valores predeterminados establecidos al colocar el componente Fragmento de experiencia.

Pestaña Estilos styles-tab

El componente Fragmento de experiencia es compatible con el sistema de estilos AEM.

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