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.
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
.
Percorso SPA remoto | Percorso pagina AEM |
---|---|
/ | /content/wknd-app/us/en/home |
/avventura:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp | /content/wknd-app/us/it/home/adventure/bali-surf-camp |
/avventura:/content/dam/wknd/en/adventures/beervana-portland/beervana-portland | /content/wknd-app/us/it/home/adventure/beervana-in-portland |
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
La mappatura per le richieste che lasciano il SPA remoto è configurata tramite la configurazione setupProxy
eseguita in Bootstrap il 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.
Innanzitutto, crea il segmento di pagina intermedio adventure
:
adventure
Quindi, crea le pagine AEM corrispondenti a ciascuno degli URL SPA che richiedono aree modificabili.
bali-surf-camp
beervana-in-portland
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.
Posizioniamo il componente <AEMResponsiveGrid...>
creato nell' ultimo capitolo nel componente AdventureDetail
SPA, creando un contenitore modificabile.
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.
Apri e modifica react-app/src/components/AdventureDetail.js
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();
...
Importa il componente AEMResponsiveGrid
e posizionalo sopra il componente <h2>Itinerary</h2>
.
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:
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.
Accedi ad AEM Author
Passa a Sites > App WKND > us > en
____ Modifica della home page dell’app WKND
Seleziona Anteprima dal selettore della modalità in alto a destra
Toccare la scheda Bali Surf Camp nell'SPA per passare al suo percorso
Seleziona Modifica dal selettore della modalità
Individua l’ area modificabile Contenitore di layout posta immediatamente sopra l’ Itinerario
Apri la barra laterale dell'Editor pagina e seleziona la vista Componenti
Trascina alcuni dei componenti abilitati nel Contenitore di layout
E crea del materiale di marketing promozionale. Potrebbe assomigliare a questo:
____ Anteprima delle modifiche in AEM Editor pagina
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! Hai aggiunto la possibilità di authoring ai percorsi dinamici nel SPA!
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.
Rimanete sintonizzati! Questa esercitazione verrà espansa per includere le best practice e raccomandazioni di Adobe su come distribuire la soluzione SPA Editor in AEM come Cloud Service e ambienti di produzione.