Rotas dinâmicas e componentes editáveis

Neste capítulo, habilitamos duas rotas de Detalhe do Aventura dinâmicas para suportar componentes editáveis; Campo de Surfe de Bali e Beervana em Portland.

Rotas dinâmicas e componentes editáveis

O Detalhe da Aventura SPA rota é definido como /adventure:path onde path é o caminho para a Aventura WKND (Fragmento do Conteúdo) para exibir detalhes.

Mapear os URLs SPA para AEM páginas

Nos dois capítulos anteriores, mapeamos o conteúdo editável do componente da exibição Início do SPA para a página raiz Remota SPA correspondente no AEM em /content/wknd-app/us/en/.

A definição de mapeamento para componentes editáveis para as rotas dinâmicas de SPA é semelhante, no entanto, devemos criar um esquema de mapeamento 1:1 entre instâncias da rota e páginas de AEM.

Neste tutorial, pegaremos o nome do Fragmento de conteúdo de aventura WKND, que é o último segmento do caminho, e o mapearemos para um caminho simples em /content/wknd-app/us/en/adventure.

Rota de SPA remota Caminho da página AEM
/ /content/wknd-app/us/en/home
/adventure:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp /content/wknd-app/us/en/home/adventure/bali-surf-camp
/adventure:/content/dam/wknd/en/adventures/beervana-portland/beervana-portland /content/wknd-app/us/en/home/adventure/beervana-in-portland

Portanto, com base nesse mapeamento, devemos criar duas novas páginas de AEM em:

  • /content/wknd-app/us/en/home/adventure/bali-surf-camp
  • /content/wknd-app/us/en/home/adventure/beervana-in-portland

Mapeamento de SPA remoto

O mapeamento de solicitações que saem do SPA Remoto é configurado por meio da configuração setupProxy feita em Bootstrap o SPA.

Mapeamento do editor de SPA

O mapeamento para solicitações de SPA quando o SPA é aberto por meio AEM Editor SPA são configurados por meio da configuração de Mapeamentos do Sling feita em Configurar AEM.

Criar páginas de conteúdo em AEM

Primeiro, crie o segmento intermediário adventure Página :

  1. Faça logon no AEM Author
  2. Navegue até Sites > Aplicativo WKND > us > en > Página inicial do aplicativo WKND
    • Essa página de AEM é mapeada como a raiz do SPA, então é aqui que começamos a criar a estrutura de página de AEM para outras rotas de SPA.
  3. Toque em Criar e selecione Página
  4. Selecione o modelo Página de SPA Remota e toque em Próximo
  5. Preencha as propriedades da página
    • Título: Aventura
    • Nome: adventure
      • Esse valor define o URL da página AEM e, portanto, deve corresponder ao segmento de rota do SPA.
  6. Toque em Concluído

Em seguida, crie as páginas de AEM que correspondem a cada URLs de SPA que exigem áreas editáveis.

  1. Navegue até a nova página Adventure no Administrador do site
  2. Toque em Criar e selecione Página
  3. Selecione o modelo Página de SPA Remota e toque em Próximo
  4. Preencha as propriedades da página
    • Título: Campo de Surf de Bali
    • Nome: bali-surf-camp
      • Esse valor define o URL da página AEM e, portanto, deve corresponder ao último segmento da rota SPA
  5. Toque em Concluído
  6. Repita as etapas 3 a 6 para criar a página Beervana em Portland, com:
    • Título: Beervana em Portland
    • Nome: beervana-in-portland
      • Esse valor define o URL da página AEM e, portanto, deve corresponder ao último segmento da rota SPA

Essas duas páginas de AEM contêm o respectivo conteúdo criado para suas rotas de SPA correspondentes. Se outras rotas de SPA exigirem criação, novas Páginas de AEM devem ser criadas em seu URL de SPA na página raiz da página de SPA Remota (/content/wknd-app/us/en/home) no AEM.

Atualizar o aplicativo WKND

Vamos colocar o componente <AEMResponsiveGrid...> criado no último capítulo, em nosso componente de SPA AdventureDetail, criando um contêiner editável.

Coloque o componente AEMResponsiveGrid SPA

Colocar <AEMResponsiveGrid...> no componente AdventureDetail cria um contêiner editável nessa rota. O truque é porque várias rotas usam o componente AdventureDetail para renderizar, devemos ajustar dinamicamente o atributo <AEMResponsiveGrid...>'s pagePath. O pagePath deve ser derivado para apontar para a página de AEM correspondente, com base na aventura que a instância da rota exibe.

  1. Abra e edite react-app/src/components/AdventureDetail.js

  2. Adicione a seguinte linha antes da segunda instrução AdventureDetail(..)'s , que deriva o nome da aventura do caminho do fragmento de conteúdo.return(..)

    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();
    ...
    
  3. Importe o componente AEMResponsiveGrid e coloque-o acima do componente <h2>Itinerary</h2>.

  4. Defina os seguintes atributos no componente <AEMResponsiveGrid...>

    • pagePath = '/content/wknd-app/us/en/home/adventure/${adventureName}'
    • itemPath = 'root/responsivegrid'

    Isso instrui o componente AEMResponsiveGrid a recuperar o conteúdo do recurso de AEM:

    • /content/wknd-app/us/en/home/adventure/${adventureName}/jcr:content/root/responsivegrid

Atualize AdventureDetail.js com as seguintes linhas:

...
import AEMResponsiveGrid from '../components/aem/AEMResponsiveGrid';
...

function AdventureDetail(props) {
    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();

    return(
        ...
        <AEMResponsiveGrid 
            pagePath={`/content/wknd-app/us/en/home/adventure/${adventureName}`}
            itemPath="root/responsivegrid"/>
            
        <h2>Itinerary</h2>
        ...
    )
}

O arquivo AdventureDetail.js deve ter a seguinte aparência:

AdventureDetail.js

Crie o contêiner no AEM

Com o <AEMResponsiveGrid...> no lugar e seu pagePath definido dinamicamente com base na aventura que está sendo renderizada, tentamos criar conteúdo nele.

  1. Faça logon no AEM Author

  2. Navegue até Sites > Aplicativo WKND > us > en

  3. ____ Editar a página inicial do aplicativo WKND

    • Navegue até a rota Bali Surf Camp no SPA para editá-lo
  4. Selecione Preview no seletor de modo no canto superior direito

  5. Toque no cartão Bali Surf Camp no SPA para navegar até sua rota

  6. Selecione Editar no seletor de modo

  7. Localize a área editável Contêiner de layout logo acima do Itinerário

  8. Abra a barra lateral do Editor de páginas e selecione a Exibição de componentes

  9. Arraste alguns dos componentes ativados para o Contêiner de layout

    • Imagem
    • Texto
    • Título

    E criar algum material promocional de marketing. Pode ser algo como isto:

    Criação de Detalhes da Aventura Bali

  10. ____ Visualizar as alterações no Editor AEM página

  11. Atualize o aplicativo WKND executado localmente em http://localhost:3000, navegue até a rota Bali Surf Camp para ver as alterações criadas!

    Bali de SPA Remoto

Ao navegar para uma rota de detalhes de aventura que não tem uma página de AEM mapeada, não haverá capacidade de criação nessa instância de rota. Para ativar a criação nessas páginas, basta criar uma Página AEM com o nome correspondente na página Adventure!

Parabéns!

Parabéns! Você adicionou capacidade de criação a rotas dinâmicas no SPA!

  • Adição do componente ResponsiveGrid do Componente Editável de Reação de AEM a uma rota dinâmica
  • Criadas AEM páginas para apoiar a criação de duas rotas específicas no SPA (Campo de Surfe de Bali e Beervana em Portland)
  • Conteúdo criado na rota dinâmica do Campo de Surfe de Bali!

Agora você concluiu a exploração das primeiras etapas de como AEM Editor SPA pode ser usado para adicionar áreas editáveis específicas a um SPA Remoto!

OBSERVAÇÃO

Fique ligado! Este tutorial será expandido para abranger as práticas recomendadas e recomendações do Adobe sobre como implantar a solução do Editor de SPA como Cloud Service e os ambientes de produção.

Nesta página