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 Adventure Detail é definida como /adventure/:slug, onde slug é uma propriedade de identificador exclusivo no Fragmento de Conteúdo Adventure.

Mapear os URLs de SPA para páginas do AEM

Nos dois capítulos anteriores, mapeamos o conteúdo do componente editável 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 da rota e as páginas do 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.

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

Mapeamento de SPA remoto

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

Mapeamento do Editor SPA

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

Criar páginas de conteúdo no AEM

Primeiro, crie o segmento de página adventure intermediário:

Then, create the AEM pages that correspond to each of the SPA's URLs that require editable areas.

These two AEM pages hold the respective-authored content for their matching SPA routes. If other SPA routes require authoring, new AEM Pages must be created at their SPA's URL under the Remote SPA page's root page (/content/wknd-app/us/en/home) in AEM.

Update the WKND App

Let's place the <ResponsiveGrid...> component created in the last chapter, into our AdventureDetail SPA component, creating an editable container.

Place the ResponsiveGrid SPA component

Placing the <ResponsiveGrid...> in the AdventureDetail component creates an editable container in that route. The trick is because multiple routes use the AdventureDetail component to render, we must dynamically adjust the <ResponsiveGrid...>'s pagePath attribute. The pagePath must be derived to point to the corresponding AEM page, based on the adventure the route's instance displays.

Update AdventureDetail.js with the following lines:

...
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:

Author the Container in AEM

With the <ResponsiveGrid...> in place, and its pagePath dynamically set based on the adventure being rendered, we try authoring content in it.

Ao navegar para uma rota de detalhes de aventura que não tem uma Página do 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 do 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!

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