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 dell'applicazione a pagina singola Adventure Detail è definita come /adventure/:slug, dove slug è una proprietà di identificatore univoco nel frammento di contenuto Adventure.

Mappare gli URL dell’applicazione a pagina singola sulle pagine AEM

Nei due capitoli precedenti, il contenuto dei componenti modificabili è stato mappato dalla vista Home dell'applicazione a pagina singola alla pagina principale dell'applicazione a pagina singola remota corrispondente in AEM all'indirizzo /content/wknd-app/us/en/.

La definizione della mappatura per i componenti modificabili per le route dinamiche dell’applicazione a pagina singola è simile, tuttavia è necessario trovare 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.

Pertanto, in base a questa mappatura, è necessario creare due nuove pagine di AEM all’indirizzo:

Mappatura SPA remota

Il mapping per le richieste che lasciano l'applicazione a pagina singola remota è configurato tramite la configurazione setupProxy eseguita in Bootstrap l'applicazione a pagina singola.

Mappatura dell’editor SPA

Il mapping per le richieste di applicazioni a pagina singola quando l'applicazione a pagina singola viene aperta tramite l'editor di applicazioni a pagina singola di AEM è configurato tramite la configurazione di mappature Sling eseguita in Configura AEM.

Creare pagine di contenuto in AEM

Innanzitutto, crea il segmento di pagina adventure intermedio:

Quindi, crea le pagine AEM corrispondenti a ciascuno degli URL dell’applicazione a pagina singola che richiedono aree modificabili.

Queste due pagine di AEM contengono i rispettivi contenuti creati per le route SPA corrispondenti. Se altre route di applicazioni a pagina singola richiedono l'authoring, è necessario creare nuove pagine AEM nell'URL dell'applicazione a pagina singola nell'apposita pagina radice (/content/wknd-app/us/en/home) in AEM.

Aggiornare l’app WKND

Inseriamo il componente <ResponsiveGrid...> creato nel ultimo capitolo nel nostro componente AdventureDetail per applicazioni a pagina singola, 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 del percorso.

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 dettaglio avventura privo di una pagina AEM mappata, non è possibile creare nell’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’applicazione a pagina singola.

Ora hai completato l’esplorazione dei primi passaggi su come utilizzare l’Editor delle applicazioni a pagina singola di AEM per aggiungere specifiche aree modificabili a un’applicazione a pagina singola remota.