Dynamische Routen und bearbeitbare Komponenten

In diesem Kapitel aktivieren wir zwei dynamische Abenteuer-Detailrouten, um bearbeitbare Komponenten zu unterstützen. Bali Surf Camp und Beervana in Portland.

Dynamische Routen und bearbeitbare Komponenten

Die SPA Route Abenteuer Detail ist definiert als /adventure/:slug where slug ist eine eindeutige ID-Eigenschaft im Adventure Content Fragment.

Ordnen Sie die SPA URLs AEM Seiten zu

In den vorherigen beiden Kapiteln haben wir bearbeitbaren Komponenteninhalt aus der SPA-Startansicht der entsprechenden Remote-SPA-Stammseite in AEM unter /content/wknd-app/us/en/.

Die Definition des Mappings für bearbeitbare Komponenten für die SPA dynamischen Routen ist ähnlich. Es muss jedoch ein 1:1-Zuordnungsschema zwischen Instanzen der Route und AEM Seiten erstellt werden.

In diesem Tutorial nehmen wir den Namen des WKND Adventure Content Fragments, das das letzte Segment des Pfads ist, und ordnen ihn einem einfachen Pfad unter /content/wknd-app/us/en/adventure.

Remote SPA Route AEM Seitenpfad
/ /content/wknd-app/us/en/home
/adventure/bali-surf-camp /content/wknd-app/us/en/home/adventure/bali-surf-camp
/adventure/beervana-portland /content/wknd-app/us/en/home/adventure/beervana-in-portland

Auf Grundlage dieses Mappings müssen wir also zwei neue AEM Seiten erstellen unter:

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

Remote SPA

Das Mapping für Anfragen, die aus der Remote-SPA ausscheiden, wird über das setupProxy -Konfiguration durchgeführt in Bootstrap des SPA.

SPA Editor-Zuordnung

Die Zuordnung für SPA Anforderungen, wenn die SPA über den SPA Editor geöffnet wird, wird über die Sling-Zuordnungskonfiguration konfiguriert, die in AEM konfigurieren.

Inhaltsseiten in AEM erstellen

Erstellen Sie zunächst den Vermittler. adventure Seitensegment:

  1. Bei der AEM-Autoreninstanz anmelden
  2. Navigieren Sie zu Sites > WKND-App > us > en > WKND-App-Homepage
    • Diese AEM Seite wird als Stamm der SPA zugeordnet. Hier beginnen wir also mit der Erstellung der AEM Seitenstruktur für andere SPA Routen.
  3. Tippen Erstellen und wählen Sie Seite
  4. Wählen Sie die Remote-SPA und tippen Sie auf Nächste
  5. Füllen Sie die Seiteneigenschaften aus.
    • Titel: Abenteuer
    • Name: adventure
      • Dieser Wert definiert die URL der AEM Seite und muss daher mit dem Routensegment der SPA übereinstimmen.
  6. Tippen Sie auf Fertig

Erstellen Sie dann die AEM Seiten, die den einzelnen SPA URLs entsprechen, die bearbeitbare Bereiche erfordern.

  1. Navigieren Sie zum neuen Abenteuer Seite in der Site-Admin
  2. Tippen Erstellen und wählen Sie Seite
  3. Wählen Sie die Remote-SPA und tippen Sie auf Nächste
  4. Füllen Sie die Seiteneigenschaften aus.
    • Titel: Bali Surf Camp
    • Name: bali-surf-camp
      • Dieser Wert definiert die URL der AEM Seite und muss daher mit dem letzten Segment der SPA übereinstimmen
  5. Tippen Sie auf Fertig
  6. Wiederholen Sie die Schritte 3 bis 6, um die Beervana in Portland Seite mit:
    • Titel: Beervana in Portland
    • Name: beervana-in-portland
      • Dieser Wert definiert die URL der AEM Seite und muss daher mit dem letzten Segment der SPA übereinstimmen

Diese beiden AEM enthalten den jeweils erstellten Inhalt für die entsprechenden SPA Routen. Wenn andere SPA Routen Authoring erfordern, müssen neue AEM Seiten unter ihrer SPA-URL unter der Stammseite der Remote-SPA-Seite (/content/wknd-app/us/en/home) in AEM.

WKND-App aktualisieren

Platzieren wir die <ResponsiveGrid...> Komponente, die in der letztes Kapitelin AdventureDetail SPA Komponente, Erstellen eines bearbeitbaren Containers.

Platzieren Sie die Komponente ResponsiveGrid SPA

Platzieren der <ResponsiveGrid...> im AdventureDetail -Komponente erstellt einen bearbeitbaren Container in dieser Route. Der Trick ist, dass mehrere Routen die AdventureDetail Komponente, die gerendert werden soll, müssen wir die <ResponsiveGrid...>'s pagePath -Attribut. Die pagePath müssen so abgeleitet werden, dass sie auf die entsprechende AEM Seite verweisen, je nachdem, welches Abenteuer die Route-Instanz anzeigt.

  1. Öffnen und Bearbeiten react-app-/src/components/AdventureDetail.js

  2. Importieren Sie die ResponsiveGrid -Komponente und platzieren Sie sie über dem <h2>Itinerary</h2> -Komponente.

  3. Legen Sie die folgenden Attribute für die <ResponsiveGrid...> -Komponente. Beachten Sie die pagePath -Attribut die aktuelle slug , die der Abenteuerseite gemäß dem oben definierten Mapping zugeordnet ist.

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

    Dies weist die ResponsiveGrid -Komponente, um ihren Inhalt aus der AEM-Ressource abzurufen:

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

Aktualisieren AdventureDetail.js mit den folgenden Zeilen:

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

Die AdventureDetail.js sollte wie folgt aussehen:

AdventureDetail.js

Erstellen Sie den Container in AEM

Mit dem <ResponsiveGrid...> und pagePath dynamisch festgelegt, basierend auf dem gerenderten Abenteuer, versuchen wir, Inhalte darin zu erstellen.

  1. Bei der AEM-Autoreninstanz anmelden

  2. Navigieren Sie zu Sites > WKND App > us > en

  3. Bearbeiten die WKND-App-Startseite page

    • Navigieren Sie zum Bali Surf Camp Route in der SPA, um sie zu bearbeiten
  4. Auswählen Vorschau über die Modusauswahl oben rechts

  5. Tippen Sie auf die Bali Surf Camp -Karte im SPA, um zu seiner Route zu navigieren

  6. Auswählen Bearbeiten über die Modusauswahl

  7. Suchen Sie die Layout-Container bearbeitbarer Bereich direkt über dem Route

  8. Öffnen Sie die Seitenleiste des Seiteneditors und wählen Sie die Komponentenansicht

  9. Ziehen Sie einige der aktivierten Komponenten in den Layout-Container

    • Bild
    • Text
    • Titel

    Erstellen Sie Werbematerial. Es könnte ungefähr so aussehen:

    Bali Adventure Detail Authoring

  10. Vorschau Ihre Änderungen in AEM Seiteneditor

  11. Aktualisieren Sie die WKND-App, die lokal ausgeführt wird auf http://localhost:3000, navigieren Sie zum Bali Surf Camp Route, um die erstellten Änderungen zu sehen!

    Remote SPA Bali

Wenn Sie zu einer Abenteuerdetailroute navigieren, der keine zugeordnete AEM Seite zugeordnet ist, gibt es auf dieser Routeninstanz keine Authoring-Möglichkeit. Um das Authoring auf diesen Seiten zu aktivieren, erstellen Sie einfach eine AEM Seite mit dem entsprechenden Namen unter Abenteuer Seite!

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben die Authoring-Fähigkeit zu dynamischen Routen in der SPA hinzugefügt!

  • Die Komponente "ResponsiveGrid"der AEM React Editable-Komponente wurde zu einer dynamischen Route hinzugefügt.
  • Erstellt AEM Seiten zur Unterstützung der Erstellung von zwei bestimmten Routen im SPA (Bali Surf Camp und Beervana in Portland)
  • Verfasst Inhalt auf der dynamischen Bali Surf Camp Route!

Sie haben nun die ersten Schritte zur Verwendung AEM SPA Editors zum Hinzufügen bestimmter bearbeitbarer Bereiche zu einer Remote-SPA abgeschlossen!

Auf dieser Seite