Percorsi dinamici e componenti modificabili

In questo capitolo vengono abilitate due route dinamiche Adventure Detail per supportare componenti modificabili: Bali Surf Camp e Beervana a Portland.

La route SPA Adventure Detail è definita come /adventure/:slug, dove slug è una proprietà di identificatore univoco nel frammento di contenuto Adventure.

Mappare gli URL dell’SPA alle pagine AEM

Nei due capitoli precedenti, il contenuto dei componenti modificabili è stato mappato dalla visualizzazione Home dell'SPA alla corrispondente pagina principale dell'SPA remoto nell'AEM in /content/wknd-app/us/en/.

La definizione della mappatura per i componenti modificabili per le route dinamiche SPA è simile, tuttavia è necessario elaborare uno schema di mappatura 1:1 tra le istanze della route e le pagine AEM.

In questo tutorial, prendiamo il nome del frammento di contenuto WKND Adventure, che è l’ultimo segmento del percorso, e lo mappiamo su un percorso semplice in /content/wknd-app/us/en/adventure.

Quindi, sulla base di questa mappatura, dobbiamo creare due nuove pagine AEM all'indirizzo:

Mappatura remota SPA

La mappatura per le richieste che lasciano l'SPA remoto è configurata tramite la configurazione setupProxy eseguita in Bootstrap SPA.

Mappatura dell’editor SPA

La mappatura per le richieste SPA quando l'SPA viene aperto tramite l'editor AEM SPA è configurata tramite la configurazione di mappature Sling eseguita in Configurazione AEM.

Creare pagine di contenuti in AEM

Innanzitutto, crea il segmento di pagina adventure intermedio:

Quindi, crea le pagine AEM corrispondenti a ciascuno degli URL SPA che richiedono aree modificabili.

Queste due pagine dell’AEM contengono i rispettivi contenuti creati per le rispettive vie dell’SPA. Se altre route SPA richiedono l'authoring, è necessario creare nuove pagine AEM con il relativo URL SPA nella pagina principale della pagina SPA remota (/content/wknd-app/us/en/home) in AEM.

Aggiornare l’app WKND

Inseriamo il componente <ResponsiveGrid...> creato nell'ultimo capitolo nel componente AdventureDetail dell'SPA, creando un contenitore modificabile.

Posizionare il componente SPA ResponsiveGrid

Il posizionamento di <ResponsiveGrid...> nel componente AdventureDetail crea un contenitore modificabile in tale route. Il trucco è dovuto al fatto che più route utilizzano il componente AdventureDetail per il rendering. È necessario regolare dinamicamente l'attributo <ResponsiveGrid...>'s pagePath. pagePath deve essere derivato per puntare alla pagina AEM corrispondente, in base all'avventura visualizzata dall'istanza della route.

Aggiorna AdventureDetail.js con le righe seguenti:

...
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>
                ...
            )
        }
    )
}

Il file AdventureDetail.js deve essere simile al seguente:

Creare il contenitore in AEM

Con <ResponsiveGrid...> attivo e pagePath impostato in modo dinamico in base all'avventura di cui viene eseguito il rendering, si prova a creare contenuti al suo interno.

Quando si passa a un percorso di dettagli dell’avventura privo di una pagina AEM mappata, non è possibile creare l’istanza del percorso. Per abilitare l'authoring in queste pagine, crea semplicemente una pagina AEM con il nome corrispondente nella pagina Avventura.

Congratulazioni.

Congratulazioni Hai aggiunto la possibilità di authoring per le route dinamiche nell'SPA.

Ora hai completato l’esplorazione dei primi passaggi su come utilizzare l’Editor SPA dell’AEM per aggiungere specifiche aree modificabili a un SPA remoto.