Rotas dinâmicas e componentes editáveis
Neste capítulo, ativamos duas rotas de Detalhe de aventura dinâmicas para suportar componentes editáveis; Campo de Surf de Bali e Beervana in Portland.
A rota do SPA Adventure Detail é definida como /adventure/:slug onde slug é uma propriedade de identificador exclusivo no Fragmento de conteúdo de aventura.
Mapear os URLs do SPA para páginas do AEM
Nos dois capítulos anteriores, mapeamos o conteúdo de componentes editáveis da visualização inicial 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 variável setupProxy configuração feita em Bootstrap do SPA.
Mapeamento do editor de SPA
O mapeamento das solicitações do SPA quando o SPA é aberto por meio do editor AEM SPA é configurado por meio da configuração Mapeamentos do Sling feita em Configurar AEM.
Criar páginas de conteúdo no AEM
Primeiro, crie o intermediário adventure Segmento de página:
-
Faça logon no AEM Author
-
Navegue até Sites > Aplicativo WKND > br > pt > 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 Criar e selecione Página
-
Selecione o Página remota do SPA modelo e toque em Próxima
-
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 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é o novo Aventura página no Administrador do site
-
Toque Criar e selecione Página
-
Selecione o Página remota do SPA modelo e toque em Próxima
-
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 Concluído
-
Repita as etapas 3 a 6 para criar a variável Beervana in Portland página, 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 de SPA exigirem criação, as novas Páginas AEM deverão ser criadas no URL do SPA na página raiz da página remota do SPA (/content/wknd-app/us/en/home) no AEM.
Atualizar o aplicativo WKND
Vamos colocar o <ResponsiveGrid...> componente criado na último capítulo, em nosso AdventureDetail Componente do SPA, criação de um contêiner editável.
Inserir o componente ResponsiveGrid SPA
Colocar o <ResponsiveGrid...> no AdventureDetail o componente cria um contêiner editável nessa rota. O truque é porque várias rotas usam o AdventureDetail para renderizar, devemos ajustar dinamicamente a variável <ResponsiveGrid...>'s pagePath atributo. A variável 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
ResponsiveGride coloque-o acima do<h2>Itinerary</h2>componente. -
Defina os seguintes atributos no
<ResponsiveGrid...>componente. Observe quepagePatho atributo adiciona o atualslugque 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
ResponsiveGridpara 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>
...
)
}
)
}
A variável AdventureDetail.js O arquivo deve ter a seguinte aparência:
Criar o contêiner no AEM
Com o <ResponsiveGrid...> em vigor, e pagePath dinamicamente definido com base na aventura que está sendo renderizada, tentamos criar conteúdo nele.
-
Faça logon no AEM Author
-
Navegue até Sites > Aplicativo WKND > br > pt-BR
-
Editar o Página inicial do aplicativo WKND página
- Navegue até a Campo de Surf de Bali roteamento no SPA para editá-lo
-
Selecionar Visualizar no seletor de modo no canto superior direito
-
Toque no Campo de Surf de Bali no SPA para navegar até a sua rota
-
Selecionar Editar no seletor de modo
-
Localize o Contêiner de layout área editável logo acima da Itinerário
-
Abra o Barra lateral do Editor de páginas e selecione a variável Visualização Componentes
-
Arraste alguns dos componentes ativados para a 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ágina AEM
-
Atualizar o aplicativo WKND em execução localmente em http://localhost:3000, navegue até o Campo de Surf de Bali rota 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 ativar a criação nessas páginas, basta criar uma página AEM com o nome correspondente sob o Aventura página!
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!