Percorsi dinamici e componenti modificabili

In questo capitolo vengono abilitati due percorsi dinamici Adventure Detail per supportare componenti modificabili. Campo da surf di Bali e Beervana a Portland.

Il percorso SPA di Adventure Detail è definito 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, abbiamo mappato il contenuto dei componenti modificabili dalla vista Home dell’SPA alla corrispondente pagina root dell’SPA remoto nell’AEM all’indirizzo /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 semplice percorso 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 delle richieste che lasciano l’SPA remoto viene configurata tramite setupProxy configurazione 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 Sling Mappings eseguita in Configurare AEM.

Creare pagine di contenuti in AEM

Innanzitutto, crea l’intermediario adventure Segmento di pagina:

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 all'URL SPA nella pagina principale della pagina SPA remota (/content/wknd-app/us/en/home) nell'AEM.

Aggiornare l’app WKND

Posizioniamo il <ResponsiveGrid...> componente creato in ultimo capitolo, nel nostro AdventureDetail componente SPA, creazione di un contenitore modificabile.

Posizionare il componente SPA ResponsiveGrid

Inserimento di <ResponsiveGrid...> nel AdventureDetail il componente crea un contenitore modificabile in tale route. Il trucco è perché più route utilizzano AdventureDetail per il rendering, è necessario regolare dinamicamente il <ResponsiveGrid...>'s pagePath attributo. Il pagePath deve essere derivato per puntare alla pagina AEM corrispondente, in base all’avventura visualizzata dall’istanza del percorso.

Aggiorna AdventureDetail.js con le seguenti righe:

...
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 AdventureDetail.js il file dovrebbe avere un aspetto simile a:

Creare il contenitore in AEM

Con il <ResponsiveGrid...> sul posto, e il suo pagePath impostato in modo dinamico in base all’avventura di cui viene eseguito il rendering, tentiamo di 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, è sufficiente creare una pagina AEM con il nome corrispondente nel Avventura pagina!

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.