Dynamische Routen und bearbeitbare Komponenten

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

Dynamische Routen und bearbeitbare Komponenten

Die SPA-Route Adventure-Detail ist definiert als /adventure/:slug, wobei slug eine eindeutige ID-Eigenschaft im Adventure-Inhaltsfragment ist.

Zuordnen der SPA-URLs zu AEM-Seiten

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

Die Definition der Zuordnung für bearbeitbare Komponenten für die dynamischen SPA-Routen ist ähnlich, jedoch müssen wir ein 1:1-Zuordnungsschema zwischen Instanzen der Route und AEM-Seiten erstellen.

In diesem Tutorial nehmen wir den Namen des WKND Adventure-Inhaltsfragments, der 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
/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 dieser Zuordnung 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-Zuordnung

Die Zuordnung für Anfragen, die die Remote-SPA verlassen, wird über die setupProxy-Konfiguration in Bootstrap der SPA konfiguriert.

SPA-Editor-Zuordnung

Die Zuordnungen für SPA-Anfragen, wenn die SPA über den AEM-SPA-Editor geöffnet wird, werden über die Konfiguration der Sling-Zuordnungen konfiguriert, die in AEM konfigurieren vorgenommen wird.

Erstellen von Inhaltsseiten in AEM

Erstellen Sie zunächst das dazwischenliegende adventure-Seitensegment:

  1. Melden Sie sich bei AEM Author an

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

    • Diese AEM-Seite wird als Stamm der SPA zugeordnet, sodass hier der Aufbau der AEM-Seitenstruktur für andere SPA-Routen beginnt.
  3. Tippen Sie auf  Erstellen und wählen Sie Seite

  4. Wählen Sie die Vorlage Remote-SPA-Seite und tippen Sie auf Weiter

  5. Füllen Sie die Seiteneigenschaften aus

    • Titel: Adventure
    • Name: adventure
      • Dieser Wert definiert die URL der AEM-Seite und muss daher mit dem Routen-Segment der SPA übereinstimmen.
  6. Tippen Sie auf Fertig

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

  1. Navigieren Sie im Site-Admin zur neuen Adventure-Seite

  2. Tippen Sie auf Erstellen und wählen Sie Seite

  3. Wählen Sie die Vorlage Remote-SPA-Seite 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 Route der SPA übereinstimmen
  5. Tippen Sie auf Fertig

  6. Wiederholen Sie die Schritte 3 bis 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 Route der SPA übereinstimmen

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

Aktualisieren der WKND-App

Platzieren Sie die im letzten Kapitel erstellte Komponente <ResponsiveGrid...> in unserer SPA-Komponente AdventureDetail und erstellen Sie dadurch einen editierbaren Container.

Platzieren der SPA-Komponente ResponsiveGrid

Durch Platzieren von <ResponsiveGrid...> in der Komponente AdventureDetail wird ein bearbeitbarer Container in dieser Route erstellt. Der Trick besteht darin, dass das Attribut <ResponsiveGrid...>'s pagePath dynamisch angepasst werden muss, da mehrere Routen die Komponente AdventureDetail zum Rendern verwenden. Der pagePath muss so abgeleitet werden, dass er auf die entsprechende AEM-Seite verweist, basierend auf dem Adventure, das die Instanz der Route anzeigt.

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

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

  3. Legen Sie die folgenden Attribute für die Komponente <ResponsiveGrid...> fest. Das Attribut pagePath fügt das aktuelle Element slug hinzu, das der Adventure-Seite gemäß der oben definierten Zuordnung zugeordnet ist.

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

    Hierdurch wird die Komponente ResponsiveGrid angewiesen, ihren Inhalt aus der AEM-Ressource abzurufen:

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

Aktualisieren Sie 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 Datei AdventureDetail.js sollte wie folgt aussehen:

AdventureDetail.js

Erstellen des Containers in AEM

Nachdem <ResponsiveGrid...> eingerichtet ist und dessen pagePath dynamisch auf der Grundlage des gerenderten Adventures festgelegt wurde, versuchen wir, Inhalte darin zu erstellen.

  1. Melden Sie sich bei AEM Author an

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

  3. Bearbeiten Sie die WKND-App-Startseite

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

  5. Tippen Sie in der SPA auf die Karte Bali Surf Camp, um zur zugehörigen Route zu navigieren

  6. Wählen Sie über die Modusauswahl die Option Bearbeiten aus

  7. Gehen Sie zu dem bearbeitbaren Bereich Layout-Container direkt über Itinerary

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

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

    • Bild
    • Text
    • Titel

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

    Bali Adventure Detail Authoring

  10. Zeigen Sie Ihre Änderungen im AEM-Seiteneditor in einer Vorschau an

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

    Remote-SPA – Bali

Wenn Sie zu einer Adventure-Detail-Route navigieren, der keine AEM-Seite zugeordnet ist, gibt es in dieser Routeninstanz keine Möglichkeiten zum Authoring. 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 Möglichkeit zum Authoring zu dynamischen Routen in der SPA hinzugefügt.

  • Die Komponente „ResponsiveGrid“ der AEM React Editable-Komponente wurde zu einer dynamischen Route hinzugefügt
  • AEM-Seiten zur Authoring-Unterstützung für zwei bestimmte Routen in der SPA (Bali Surf Camp und Beervana in Portland) wurden erstellt
  • Inhalt auf der dynamischen „Bali Surf Camp“-Route wurde erstellt!

Sie haben nun die ersten Schritte abgeschlossen und gesehen, wie Sie mit dem AEM-SPA-Editor bestimmte bearbeitbare Bereiche zu einer Remote-SPA hinzufügen können.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4