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.

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.

Auf Grundlage dieser Zuordnung müssen wir also zwei neue AEM-Seiten erstellen unter:

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:

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

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.

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:

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.

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.

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.