Indirizzi dinamici e componenti modificabili

In questo capitolo, offriamo due percorsi dinamici di Adventure Detail per supportare i componenti modificabili; Bali Surf Camp e Beervana in Portland.

Il percorso di Adventure Detail SPA è definito come /adventure:path dove path rappresenta il percorso dell'avventura WKND (frammento di contenuto) su cui visualizzare i dettagli.

Mappare gli URL SPA alle pagine AEM

Nei due capitoli precedenti, abbiamo mappato il contenuto del componente modificabile dalla vista Home SPA alla corrispondente pagina radice SPA remota in AEM in /content/wknd-app/us/en/.

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

In questa esercitazione, prenderemo il nome del frammento di contenuto dell’avventura WKND, che è l’ultimo segmento del percorso, e lo mapperemo su un percorso semplice in /content/wknd-app/us/en/adventure.

Quindi, in base a questa mappatura, dobbiamo creare due nuove pagine AEM in:

• /content/wknd-app/us/en/home/adventure/bali-surf-camp
• /content/wknd-app/us/en/home/adventure/beervana-in-portland

Mappatura SPA remota

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

Mappatura dell’editor SPA

La mappatura per le richieste di SPA quando il SPA viene aperto tramite AEM Editor viene configurata tramite la configurazione di mappature Sling eseguita in Configura AEM.

Creare pagine di contenuto in AEM

Innanzitutto, crea il segmento di pagina intermedio adventure :

1. Accedi ad AEM Author
2. Passa a Sites > App WKND > us > en > Home page dell'app WKND
   • Questa pagina AEM è mappata come radice del SPA, quindi questo è il punto in cui iniziamo a creare la struttura della pagina AEM per altri percorsi SPA.
3. Tocca Crea e seleziona Pagina
4. Seleziona il modello Pagina SPA remota e tocca Avanti
5. Compila le proprietà della pagina
   • Titolo: Avventura
   • Nome: adventure
     • Questo valore definisce l’URL della pagina AEM e deve quindi corrispondere al segmento di route del SPA.
6. Toccate Chiudi

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

1. Passa alla nuova pagina Avventura nell’amministratore del sito
2. Tocca Crea e seleziona Pagina
3. Seleziona il modello Pagina SPA remota e tocca Avanti
4. Compila le proprietà della pagina
   • Titolo: Bali Surf Camp
   • Nome: bali-surf-camp
     • Questo valore definisce l’URL della pagina AEM e deve quindi corrispondere all’ultimo segmento della route del SPA
5. Toccate Chiudi
6. Ripeti i passaggi 3-6 per creare la pagina Beervana in Portland con:
   • Titolo: Beervana a Portland
   • Nome: beervana-in-portland
     • Questo valore definisce l’URL della pagina AEM e deve quindi corrispondere all’ultimo segmento della route del SPA

Queste due pagine AEM contengono il rispettivo contenuto creato per i percorsi SPA corrispondenti. Se altre SPA route richiedono l'authoring, è necessario creare nuove pagine AEM nell'URL SPA sotto la pagina principale della pagina SPA remota (/content/wknd-app/us/en/home) in AEM.

Aggiornare l’app WKND

Posizioniamo il componente <AEMResponsiveGrid...> creato nell' ultimo capitolo nel componente AdventureDetail SPA, creando un contenitore modificabile.

Posiziona il componente SPA AEMResponsiveGrid

Posizionando il <AEMResponsiveGrid...> nel componente AdventureDetail si crea un contenitore modificabile in tale percorso. Il problema è che, poiché per il rendering vengono utilizzati più percorsi, è necessario regolare dinamicamente l’attributo <AEMResponsiveGrid...>'s pagePath. AdventureDetail Il pagePath deve essere derivato per puntare alla pagina di AEM corrispondente, in base all’avventura che viene visualizzata l’istanza del percorso.

1. Apri e modifica react-app/src/components/AdventureDetail.js

2. Aggiungi la riga seguente prima della seconda istruzione AdventureDetail(..)'s return(..) , che deriva il nome dell’avventura dal percorso del frammento di contenuto.

   ...
   // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
   const adventureName = adventureData._path.split('/').pop();
   ...
   

3. Importa il componente AEMResponsiveGrid e posizionalo sopra il componente <h2>Itinerary</h2>.

4. Imposta i seguenti attributi sul componente <AEMResponsiveGrid...>

   • pagePath = '/content/wknd-app/us/en/home/adventure/${adventureName}'
   • itemPath = 'root/responsivegrid'

   Questo indica al componente AEMResponsiveGrid di recuperare il relativo contenuto dalla risorsa AEM:

   • /content/wknd-app/us/en/home/adventure/${adventureName}/jcr:content/root/responsivegrid

Aggiorna AdventureDetail.js con le seguenti righe:

...
import AEMResponsiveGrid from '../components/aem/AEMResponsiveGrid';
...

function AdventureDetail(props) {
    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();

    return(
        ...
        <AEMResponsiveGrid 
            pagePath={`/content/wknd-app/us/en/home/adventure/${adventureName}`}
            itemPath="root/responsivegrid"/>
            
        <h2>Itinerary</h2>
        ...
    )
}

Il file AdventureDetail.js deve essere simile al seguente:

Crea il contenitore in AEM

Con il <AEMResponsiveGrid...> attivo e il relativo pagePath impostato dinamicamente in base all’avventura di cui si sta eseguendo il rendering, proviamo a creare contenuti al suo interno.

1. Accedi ad AEM Author

2. Passa a Sites > App WKND > us > en

3. ____ Modifica della home page dell’app WKND

   • Passa alla route Bali Surf Camp nella SPA per modificarla

4. Seleziona Anteprima dal selettore della modalità in alto a destra

5. Toccare la scheda Bali Surf Camp nell'SPA per passare al suo percorso

6. Seleziona Modifica dal selettore della modalità

7. Individua l’ area modificabile Contenitore di layout posta immediatamente sopra l’ Itinerario

8. Apri la barra laterale dell'Editor pagina e seleziona la vista Componenti

9. Trascina alcuni dei componenti abilitati nel Contenitore di layout

   • Immagine
   • Testo
   • Titolo

   E crea del materiale di marketing promozionale. Potrebbe assomigliare a questo:

   

10. ____ Anteprima delle modifiche in AEM Editor pagina

11. Aggiorna l'app WKND in esecuzione localmente su http://localhost:3000, vai alla route Bali Surf Camp per vedere le modifiche create!

    

Quando passi a un percorso di dettaglio dell’avventura che non ha una pagina AEM mappata, non ci sarà alcuna funzionalità di authoring su quell’istanza di percorso. Per abilitare l'authoring su queste pagine, è sufficiente creare una pagina AEM con il nome corrispondente nella pagina Avventura!

Congratulazioni!

Congratulazioni! Hai aggiunto la possibilità di authoring ai percorsi dinamici nel SPA!

• È stato aggiunto il componente ResponsiveGrid del componente AEM React Modificable a un percorso dinamico
• Sono state create AEM pagine per supportare l’authoring di due percorsi specifici nel SPA (Bali Surf Camp e Beervana a Portland)
• Contenuto scritto sulla via dinamica Bali Surf Camp!

Hai completato l’esplorazione dei primi passaggi di come AEM editor di SPA può essere utilizzato per aggiungere aree modificabili specifiche a un SPA remoto.