Rotas dinâmicas e componentes editáveis
Neste capítulo, ativamos duas rotas dinâmicas de Detalhe de Aventura para suportar componentes editáveis: Campo de Surfe de Bali e Beervana em Portland.
A rota SPA de Adventure Detail é definida como /adventure/:slug, onde slug é uma propriedade de identificador exclusivo no Fragmento de Conteúdo de Adventure.
Mapear os URLs do SPA para páginas do AEM
Nos dois capítulos anteriores, mapeamos o conteúdo de componentes editáveis da exibição Início do SPA para a página raiz do SPA remoto correspondente no AEM em /content/wknd-app/us/en/.
A definição de mapeamento para componentes editáveis para as rotas dinâmicas do SPA é semelhante, no entanto, devemos criar um esquema de mapeamento 1:1 entre as instâncias das páginas de rota e AEM.
Neste tutorial, pegamos o nome do Fragmento de conteúdo WKND Adventure, que é o último segmento do caminho, e o mapeamos para um caminho simples em /content/wknd-app/us/en/adventure.
Então, 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 remoto do SPA
O mapeamento de solicitações que deixam o SPA Remoto é configurado por meio da configuração setupProxy feita no Bootstrap, o SPA.
Mapeamento do editor de SPA
O mapeamento das solicitações do SPA quando o SPA é aberto por meio do editor AEM SPA AEM é configurado por meio da configuração Mapeamentos do Sling realizada em Configurar.
Criar páginas de conteúdo no AEM
Primeiro, crie o segmento de página adventure intermediário:
-
Faça logon no AEM Author
-
Navegue até Sites > Aplicativo WKND > us > en > Página inicial do aplicativo WKND
- Essa página do AEM é mapeada como a raiz do SPA, então é aqui que começamos a construir a estrutura da página do AEM para outras rotas do SPA.
-
Toque em Criar e selecione Página
-
Selecione o modelo de Página do SPA Remoto e toque em Avançar
-
Preencher 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.
-
Toque em Concluído
Em seguida, crie as páginas do AEM que correspondem a cada um dos URLs do SPA que exigem áreas editáveis.
-
Navegue até a nova página Aventura no Administrador do Site
-
Toque em Criar e selecione Página
-
Selecione o modelo de Página do SPA Remoto e toque em Avançar
-
Preencher as propriedades da página
- Título: Campo de Surf em Bali
- Nome:
bali-surf-camp- Esse valor define o URL da página AEM e, portanto, deve corresponder ao último segmento da rota do SPA
-
Toque em Concluído
-
Repita as etapas 3 a 6 para criar a página Beervana in 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 do SPA
Essas duas páginas AEM contêm o respectivo conteúdo criado para suas rotas SPA correspondentes. Se outras rotas do SPA exigirem criação, as novas Páginas do AEM deverão ser criadas no URL do SPA na página raiz da página remota do SPA AEM (/content/wknd-app/us/en/home) no.
Atualizar o aplicativo WKND
Vamos colocar o componente <ResponsiveGrid...> criado no último capítulo, em nosso componente SPA AdventureDetail, criando um contêiner editável.
Inserir o componente ResponsiveGrid SPA
Colocar o <ResponsiveGrid...> 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 <ResponsiveGrid...>'s pagePath. O pagePath deve ser derivado para apontar para a página AEM correspondente, com base na aventura que a instância da rota exibe.
-
Abrir e editar
react-app-/src/components/AdventureDetail.js -
Importe o componente
ResponsiveGride coloque-o acima do componente<h2>Itinerary</h2>. -
Defina os seguintes atributos no componente
<ResponsiveGrid...>. Observe que o atributopagePathadiciona aslugatual, que mapeia para a página de aventura de acordo com o mapeamento definido acima.pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'itemPath = 'root/responsivegrid'
Isso instrui o componente
ResponsiveGrida recuperar seu conteúdo do recurso AEM:/content/wknd-app/us/en/home/adventure/${slug}/jcr:content/root/responsivegrid
Atualizar AdventureDetail.js com as seguintes linhas:
...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...
function AdventureDetailRender(props) {
...
// Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
const { slug } = useParams();
return(
...
// Pass the slug in
function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
groupSize, difficulty, price, description, itinerary, references, slug }) {
...
return (
...
<ResponsiveGrid
pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
itemPath="root/responsivegrid"/>
<h2>Itinerary</h2>
...
)
}
)
}
O arquivo AdventureDetail.js deve ser semelhante a:
Criar o contêiner no AEM
Com o <ResponsiveGrid...> em vigor e seu pagePath definido dinamicamente com base na aventura que está sendo renderizada, tentamos criar conteúdo nele.
-
Faça logon no AEM Author
-
Navegue até Sites > Aplicativo WKND > us > en
-
Editar a Página inicial do Aplicativo WKND
- Navegue até a Rota de Acampamento de Surf de Bali no SPA para editá-la
-
Selecione Visualizar no seletor de modo no canto superior direito
-
Toque no cartão Bali Surf Camp no SPA para navegar até sua rota
-
Selecione Editar no seletor de modo
-
Localize a área editável Contêiner de layout logo acima do Itinerário
-
Abra a barra lateral do Editor de páginas e selecione a exibição de Componentes
-
Arraste alguns dos componentes habilitados para o Contêiner de layout
- Imagem
- Texto
- Título
E criar algum material de marketing promocional. Pode ser semelhante a:
-
Visualizar suas alterações no Editor de Páginas AEM
-
Atualize o aplicativo WKND em execução localmente em http://localhost:3000, navegue até a rota Campo de Surf de Bali para ver as alterações criadas!
Ao navegar para uma rota de detalhes de aventura que não tem uma página AEM mapeada, não há capacidade de criação nessa instância de rota. Para habilitar a criação nessas páginas, basta criar uma Página AEM com o nome correspondente na página Aventura!
Parabéns.
Parabéns! Você adicionou a capacidade de criação a rotas dinâmicas no SPA!
- Adição do componente ResponsiveGrid do componente editável AEM React a uma rota dinâmica
- Páginas do AEM criadas 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 Surf de Bali!
Você concluiu a exploração dos primeiros passos de como o Editor SPA AEM pode ser usado para adicionar áreas editáveis específicas a um SPA remoto!