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 Route Abenteuer-Detail SPA ist definiert als /adventure:path, wobei path der Pfad zum WKND-Abenteuer (Inhaltsfragment) ist, um Details anzuzeigen.

Ordnen Sie die SPA URLs AEM Seiten zu

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

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 zu.

Remote SPA Route AEM Seitenpfad
/ /content/wknd-app/us/en/home
/adventures:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp /content/wknd-app/us/en/home/adventure/bali-surf-camp
/adventure:/content/dam/wknd/en/adventures/beervana-portland/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

Die Zuordnung von Anforderungen, die die Remote-SPA verlassen, wird über die setupProxy -Konfiguration konfiguriert, die in Bootstrap der SPA vorgenommen wird.

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 unter Konfigurieren von AEM durchgeführt wird.

Inhaltsseiten in AEM erstellen

Erstellen Sie zunächst das Zwischensegment adventure Seite :

  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 Sie auf Erstellen und wählen Sie Seite aus.
  4. Wählen Sie die Vorlage Remote SPA Page aus und tippen Sie auf Weiter
  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 zur neuen Seite Adventure im Site-Admin.
  2. Tippen Sie auf Erstellen und wählen Sie Seite aus.
  3. Wählen Sie die Vorlage Remote SPA Page aus und tippen Sie auf Weiter
  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-6, um die Seite Beervana in Portland zu erstellen, 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 jeweiligen 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 erstellt werden.

WKND-App aktualisieren

Platzieren wir die <AEMResponsiveGrid...>-Komponente, die im letzten Kapitel erstellt wurde, in unserer AdventureDetail-SPA und erstellen Sie einen bearbeitbaren Container.

Platzieren Sie die AEMResponsiveGrid-SPA

Wenn Sie <AEMResponsiveGrid...> in die Komponente AdventureDetail platzieren, wird ein bearbeitbarer Container in dieser Route erstellt. Der Trick besteht darin, dass mehrere Routen die Komponente AdventureDetail zum Rendern verwenden. Daher müssen wir das Attribut <AEMResponsiveGrid...>'s pagePath dynamisch anpassen. Das pagePath muss abgeleitet werden, um auf die entsprechende AEM zu verweisen, basierend auf dem Abenteuer, das die Route-Instanz anzeigt.

  1. react-app/src/components/AdventureDetail.js öffnen und bearbeiten

  2. Fügen Sie die folgende Zeile vor AdventureDetail(..)'s der zweiten return(..) -Anweisung hinzu, die den Abenteuernamen aus dem Inhaltsfragmentpfad ableitet.

    ...
    // 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. Importieren Sie die Komponente AEMResponsiveGrid und platzieren Sie sie über der Komponente <h2>Itinerary</h2>.

  4. Legen Sie die folgenden Attribute für die Komponente <AEMResponsiveGrid...> fest

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

    Dadurch wird die Komponente AEMResponsiveGrid angewiesen, ihren Inhalt aus der AEM Ressource abzurufen:

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

Aktualisieren Sie AdventureDetail.js mit den folgenden Zeilen:

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

Die Datei AdventureDetail.js sollte wie folgt aussehen:

AdventureDetail.js

Erstellen Sie den Container in AEM

Wenn das <AEMResponsiveGrid...> vorhanden ist und sein pagePath dynamisch basierend auf dem abenteuerlichen Abenteuer festgelegt ist, versuchen wir, Inhalte darin zu erstellen.

  1. Bei der AEM-Autoreninstanz anmelden

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

  3. ____ Bearbeiten der WKND-App- Startseite

    • Navigieren Sie zur Route Bali Surf Camp im SPA, um sie zu bearbeiten.
  4. Wählen Sie Vorschau aus der Modusauswahl oben rechts aus.

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

  6. Wählen Sie Bearbeiten aus der Modusauswahl

  7. Suchen Sie den bearbeitbaren Bereich Layout-Container direkt über dem Itinerary .

  8. Öffnen Sie die Seitenleiste Seiten-Editor und wählen Sie die Ansicht Komponenten aus.

  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 der Änderungen im AEM Seiteneditor

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

    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 der Seite Adventure!

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.

HINWEIS

Bleib dran! Dieses Tutorial wird erweitert und umfasst die Best Practices und Empfehlungen der Adobe zur Bereitstellung der SPA-Editor-Lösung in AEM as a Cloud Service und Produktionsumgebungen.

Auf dieser Seite