Componente de Fragmento de experiência experience-fragment-component

O componente de Fragmento de experiência, dos Componentes principais, permite que o autor de conteúdo coloque uma variação de fragmento de experiência em uma página enquanto suporta uma estrutura de site localizada.

Uso usage

O componente de Fragmento de experiência, dos Componentes principais, permite que o autor de conteúdo selecione uma das variações de fragmento de experiência existentes e coloque uma na página de conteúdo. O componente Fragmento de experiência também suporta uma estrutura de site localizada.

Versão e compatibilidade version-and-compatibility

A versão atual do componente de fragmento de experiência é a v2, introduzida com a versão 2.18.0 dos Componentes principais em fevereiro de 2022, e está descrita neste documento.

A tabela a seguir detalha todas as versões compatíveis do componente, as versões do AEM com as quais as versões do componente são compatíveis e os links para a documentação das versões anteriores.

Para mais informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.

Suporte localizado à estrutura do site localized-site-structure

O componente de Fragmento de experiência é adaptável às estruturas do site localizadas e renderiza o fragmento de experiência apropriado com base na localização da página. Para fazer isso, o fragmento de experiência deve atender às seguintes condições:

Nesse caso, o fragmento com a mesma localização (idioma, blueprint ou live copy) da página atual será renderizado como parte do modelo.

Esse comportamento é limitado aos componentes de Fragmento de experiência adicionados aos modelos. Os componentes de Fragmento de experiência adicionados a páginas de conteúdo individuais renderizarão as representações exatas do fragmento de experiência configuradas no componente.

Exemplo example

Digamos que seu conteúdo seja mais ou menos assim:

/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

Observe que a estrutura abaixo /content/experience-fragments/wknd reflete a estrutura de /content/wknd.

Nesse caso, se o componente de Fragmento de experiência /content/experience-fragments/wknd/us/en/footerTextXf for colocado em um modelo, as páginas localizadas criadas com base nesse modelo renderizarão automaticamente o fragmento de experiência localizado que corresponde à página de conteúdo localizada.

Portanto, se você navegar para uma página de conteúdo em /content/wknd/ch/de que usa o mesmo modelo, /content/experience-fragments/wknd/ch/de/footerTextXf será renderizado, em vez de /content/experience-fragments/wknd/us/en/footerTextXf.

Fallback fallback

O componente de Fragmento de experiência tentará encontrar um componente localizado correspondente na seguinte ordem:

Exemplo de saída do componente sample-component-output

Para experimentar o componente Fragmento de Experiência, e ver exemplos de suas opções de configuração e de saídas HTML e JSON, visite a Biblioteca de Componentes.

Detalhes técnicos technical-details

A documentação técnica mais recente sobre o componente de Fragmento de experiência pode ser encontrada no GitHub.

Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.

Caixa de diálogo de configuração configure-dialog

A caixa de diálogo de configuração permite que o autor de conteúdo selecione a variação de fragmento de experiência que deve ser renderizada na página.

Use o botão Abrir caixa de diálogo de seleção para abrir o seletor de componentes e escolher qual variação de componente de fragmento de experiência adicionar à página de conteúdo.

Se você adicionar o componente de Fragmento de experiência a um modelo, observe que ele será localizado automaticamente, desde que os Fragmentos de experiência estejam localizados, de modo que o que é renderizado na página possa variar do componente selecionado explicitamente. Consulte o exemplo acima para mais informações.

Você também pode definir um ID. Essa opção permite controlar o identificador exclusivo do componente no HTML e na Camada de dados.

Guia Estilos styles-tab-edit

O componente de fragmento de experiência é compatível com o sistema de estilos do AEM.

Use o menu suspenso para selecionar os estilos que deseja aplicar ao componente. As seleções feitas na caixa de diálogo de edição têm o mesmo efeito das selecionadas na barra de ferramentas do componente.

Os estilos devem ser configurados para esse componente na caixa de diálogo de design para que o menu suspenso fique disponível.

Caixa de diálogo de design design-dialog

A caixa de diálogo de design permite que o autor do modelo defina as opções disponíveis para o autor de conteúdo que usa o componente de Fragmento de experiência e os padrões definidos ao instalar o componente.

Guia Estilos styles-tab

O componente Fragmento de experiência é compatível com o Sistema de Estilos do AEM.