DocumentaçãoAEMGuia do AEM Screens

Uso de Fragmentos de experiência using-experience-fragments

Last update: Tue Apr 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Intermediate
  • Admin
  • Developer

Esta página abrange os seguintes tópicos:

  • Visão geral
  • Uso de fragmentos de experiência no AEM Screens
  • Propagando Alterações na Página

Visão geral overview

Um Fragmento de experiência é um grupo de um ou mais componentes, incluindo conteúdo e layout que podem ser referenciados nas páginas. Os fragmentos de experiência podem conter qualquer componente, como um ou vários componentes que podem conter qualquer item em um sistema de parágrafo referenciado na experiência completa ou solicitado por um terceiro endpoint.

Uso de fragmentos de experiência no AEM Screens using-experience-fragments-in-aem-screens

NOTE
O exemplo a seguir usa We.Retail como um projeto de demonstração em que o Fragmento de experiência é aplicado de um Sites para um projeto do AEM Screens.

Como exemplo, o fluxo de trabalho a seguir demonstra o uso de fragmentos de experiência do We.Retail no Sites. Você pode escolher uma página da Web e usar esse conteúdo no canal do AEM Screens em um de seus projetos.

Pré-requisitos pre-requisites

Criação de um projeto de demonstração com um canal

Criação de um projeto

  1. Para criar um projeto, clique em Criar projeto do Screens.
  2. Insira o Título como DemoProject.
  3. Clique em Salvar.

A DemoProject é adicionado à sua AEM Screens.

Criação de um canal

  1. Navegue até a DemoProject você criou e clique no link Canais pasta.

  2. Clique em Criar na barra de ações para que você possa abrir o assistente.

  3. Escolha o Canal de sequência do assistente e clique em Próxima.

  4. Insira o Título as TestChannel e clique em Criar.

A TestChannel é adicionado ao seu DemoProject.
screen_shot_2019-07-29at105101am

Criação de um fragmento de experiência creating-an-experience-fragment

Siga as etapas abaixo para aplicar o conteúdo de We.Retail ao seu TestChannel in DemoProject.

  1. Navegue até a página Sites no We.Retail

    1. Navegue até Sites e clique em We.Retail > Estados Unidos > Inglês > Equipamento e clique nesta página para usá-la como um Fragmento de experiência para o canal do Screens.

    2. Clique em Editar na barra de ação para que você possa abrir a página que deseja usar como fragmento de experiência para o canal do Screens.

  2. Reutilizar o conteúdo

    1. Clique no fragmento que deseja incluir no canal.
    2. Clique no último ícone à direita para poder abrir o Converter em fragmento de experiência caixa de diálogo.

    screen_shot_2019-07-29at105314am

  3. Criação de um fragmento de experiência

    1. Escolha o Ação as Criar um novo fragmento de experiência.

    2. Clique em Caminho principal.

    3. Clique em Modelo. Escolha o Fragmento de experiência - Variação de telas modelo aqui (valor no campo /libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens).

    4. Insira o Título do fragmento as FragmentoTelas.

    5. Para concluir a criação de um novo Fragmento de experiência, clique na marca de seleção.

    screen_shot_2019-07-29at105918am

    Observação: para clicar em uma opção mais fácil, clique na marca de seleção à direita do campo para abrir a caixa de diálogo de seleção.

  4. Criação de Live Copy do Fragmento de experiência

    1. Navegue até a página inicial do AEM.
    2. Clique em Fragmentos de experiência e destaque a FragmentoTelas e clique em Variação como Live Copy, conforme mostrado na figura abaixo:

    screen_shot_2019-07-29at110443am

    c. Clique no link FragmentoTelas de Criar Live Copy e clique em Próxima.

    d. Insira o Título e Nome as Screens.

    e. Clique em Criar para criar a Live Copy.

    f. Clique em Concluído para que você possa voltar para FragmentoTelas página.

    screen_shot_2019-07-29at110616am

    note note
    NOTE
    Depois de criar um fragmento do AEM Screens, você pode editar as propriedades do fragmento. Clique no fragmento e em Propriedades na barra de ações.

    Edição de propriedades de um fragmento do Screens

    1. Navegue até a FragmentoTelas (você criou nas etapas anteriores) e clique em Propriedades na barra de ações.

    2. Clique em Configuração offline conforme mostrado na figura abaixo.

    Você pode adicionar o Bibliotecas do cliente (Java™ e css) e Arquivos estáticos ao seu Fragmento de experiência.

    O exemplo a seguir mostra a adição de bibliotecas do lado do cliente e das fontes como parte dos arquivos estáticos ao seu Fragmento de experiência. fragmento

  5. Uso do fragmento de experiência como um componente no canal do Screens

    1. Navegue até o canal do Screens onde deseja usar o Screens fragmento.

    2. Clique em TestChannel e clique em Editar na barra de ações.

    3. Clique no ícone componentes na guia lateral.

    4. Arraste e solte a Fragmento de experiência ao seu canal.

    screen_shot_2019-07-29at123115pm

    e. Clique no botão Fragmento de experiência e clique no ícone superior esquerdo (chave inglesa) para abrir a Fragmento de experiência caixa de diálogo.

    f. Clique no botão Screens live copy do fragmento que você criou no Etapa 3 in Caminho.

    screen_shot_2019-07-26at82650pm

    f. Clique no botão Screens live copy do fragmento que você criou no Etapa 3 no Fragmento de experiência.

    screen_shot_2019-07-26at82509pm

    h. Insira os milissegundos em Duração.

    i. Clique no botão Configuração offline do Fragmentos de experiência para que você possa definir as bibliotecas do lado do cliente e os arquivos estáticos.

    note note
    NOTE
    Para adicionar bibliotecas do lado do cliente ou os arquivos estáticos, além do que você configurou na etapa (4), é possível adicionar do Configuração offline na guia Fragmento de experiência caixa de diálogo.

    screen_shot_2019-07-26at82844pm

    j. Clique na marca de seleção para concluir o processo.

Validar o resultado validating-the-result

Após a conclusão das etapas anteriores, você pode validar seu fragmento de experiência no ChannelOne por:

  1. Navegar até o TestChannel.
  2. Selecionar o Visualizar na barra de ações.

Exibir o conteúdo do Sites (Live Copy do Fragmento de experiência) no seu canal, conforme mostrado na figura abaixo:
screen_shot_2018-06-08at120739pm

Propagando Alterações na Página propagating-changes-from-the-master-page

Live Copy refere-se à cópia (da origem) mantida pelas ações de sincronização, conforme definido pelas configurações de implantação.

Como o fragmento de experiência que você criou é uma live copy do Sites e alterar esse fragmento específico da página principal, visualize as alterações no canal. Ou visualize o destino em que você usou o Fragmento de experiência.

NOTE
Para obter mais informações sobre a Live Copy, consulte Reutilizar conteúdo: gerenciador de vários sites e Live Copy.

Siga as etapas abaixo para propagar alterações do canal principal para o canal de destino:

  1. Clique no Fragmento de experiência na Sites (principal) e clique no ícone de lápis para editar os itens no Fragmento de experiência.

    screen_shot_2018-06-08at122655pm

  2. Clique no Fragmento de experiência e clique na chave inglesa para abrir a caixa de diálogo e editar as imagens.

    screen_shot_2018-06-08at25031pm

  3. A variável Grade de produtos é aberta.

    screen_shot_2018-06-08at25306pm

  4. É possível editar qualquer uma das imagens. Por exemplo, aqui a primeira imagem é substituída neste fragmento.

    screen_shot_2018-06-08at25608pm

  5. Clique no Fragmento de experiência e clique no ícone Implantação para que você possa propagar alterações no fragmento usado no canal.

    screen_shot_2018-06-08at31352pm

  6. Clique em Implantação.

    Observe que as alterações são implementadas.

    screen_shot_2018-06-08at32148pm

Validar as alterações validating-the-changes

Siga as etapas abaixo para confirmar as alterações no canal:

  1. Navegue até a Screens > Canais > TestChannel.

  2. Clique em Visualizar na barra de ações.

A imagem a seguir ilustra as alterações no TestChannel:
screen_shot_2018-06-08at33351pm

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