Bearbeitbare Container-Komponenten

Die korrigierte Komponente bietet eine gewisse Flexibilität beim Authoring SPA Inhalts. Dieser Ansatz ist jedoch starr und erfordert, dass Entwickler die genaue Zusammensetzung des bearbeitbaren Inhalts definieren. Um die Erstellung außergewöhnlicher Erlebnisse durch Autoren zu unterstützen, unterstützt SPA Editor die Verwendung von Container-Komponenten in der SPA. Container-Komponenten ermöglichen es Autoren, zulässige Komponenten per Drag & Drop in den Container zu ziehen und sie wie beim herkömmlichen AEM Sites-Authoring zu erstellen!

Bearbeitbare Container-Komponenten

In diesem Kapitel fügen wir der Startansicht einen bearbeitbaren Container hinzu, der es Autoren ermöglicht, Rich-Content-Erlebnisse mit AEM React-Kernkomponenten direkt in der SPA zu erstellen und anzuordnen.

WKND-App aktualisieren

Hinzufügen einer Container-Komponente zur Startansicht:

  • Importieren der Komponente "ResponsiveGrid"der AEM React Editable-Komponente
  • Importieren und registrieren Sie AEM React-Kernkomponenten (Text und Bild) zur Verwendung in der Container-Komponente

Importieren in die Komponente des responsivenGrid-Containers

Um einen bearbeitbaren Bereich in der Startansicht zu platzieren, müssen wir:

  1. Importieren Sie die Komponente "ResponsiveGrid"aus @adobe/aem-react-editable-components
  2. Registrieren Sie sie mit withMappable , damit Entwickler sie in der SPA platzieren können.
  3. Registrieren Sie sich auch bei MapTo , damit sie in anderen Container-Komponenten wiederverwendet werden kann, sodass Container effektiv verschachtelt werden.

Gehen Sie hierfür wie folgt vor:

  1. Öffnen Sie das SPA in Ihrer IDE.

  2. Erstellen einer React-Komponente unter src/components/aem/AEMResponsiveGrid.js

  3. Fügen Sie AEMResponsiveGrid.js den folgenden Code hinzu:

    // Import the withMappable API provided bu the AEM SPA Editor JS SDK
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';

// Import the base ResponsiveGrid component
import { ResponsiveGrid } from "@adobe/aem-react-editable-components";

// The sling:resourceType for which this Core Component is registered with in AEM
const RESOURCE_TYPE = "wcm/foundation/components/responsivegrid";

// Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
const EditConfig = {
    emptyLabel: "Layout Container",  // The component placeholder in AEM SPA Editor
    isEmpty: function(props) { 
        return props.cqItemsOrder == null || props.cqItemsOrder.length === 0;
    },                              // The function to determine if this component has been authored
    resourceType: RESOURCE_TYPE     // The sling:resourceType this SPA component is mapped to
};

// MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
MapTo(RESOURCE_TYPE)(ResponsiveGrid, EditConfig);

// withMappable allows the component to be hardcoded into the SPA; <AEMResponsiveGrid .../>
const AEMResponsiveGrid = withMappable(ResponsiveGrid, EditConfig);

export default AEMResponsiveGrid;

Der Code ähnelt AEMTitle.js, dass die Titelkomponente der AEM-Kernkomponenten importiert hat.

Die Datei AEMResponsiveGrid.js sollte wie folgt aussehen:

AEMResponsiveGrid.js

Verwenden der SPA-Komponente AEMResponsiveGrid

Nachdem AEM Komponente ResponsiveGrid in registriert ist und für die Verwendung in der SPA verfügbar ist, können wir sie in der Startansicht platzieren.

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

  2. Importieren Sie die Komponente AEMResponsiveGrid und platzieren Sie sie über der Komponente <AEMTitle ...>.

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

    • pagePath = '/content/wknd-app/us/en/home'
    • itemPath = 'root/responsivegrid'

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

    • /content/wknd-app/us/en/home/jcr:content/root/responsivegrid

    Der itemPath wird dem Knoten responsivegrid zugeordnet, der in der Remote SPA Page-AEM-Vorlage definiert ist, und wird automatisch auf neuen AEM Seiten erstellt, die aus der Remote SPA Page-AEM-Vorlage erstellt wurden.

    Aktualisieren Sie App.js , um die Komponente <AEMResponsiveGrid...> hinzuzufügen.

    ...
import AEMResponsiveGrid from './components/aem/AEMResponsiveGrid';
...

function Home() {
return (
    <div className="Home">
        <AEMResponsiveGrid
            pagePath='/content/wknd-app/us/en/home' 
            itemPath='root/responsivegrid'/>

        <AEMTitle
            pagePath='/content/wknd-app/us/en/home' 
            itemPath='title'/>
        <Adventures />
    </div>
);
}

Die Datei Apps.js sollte wie folgt aussehen:

App.js

Erstellen bearbeitbarer Komponenten

Um die volle Wirkung der flexiblen Authoring-Erlebnis-Container im SPA Editor zu erzielen. Wir haben bereits eine bearbeitbare Titelkomponente erstellt, aber lassen Sie uns noch ein paar weitere Aspekte anstellen, die es Autoren ermöglichen, Text und Bild AEM WCM-Kernkomponenten in der neu hinzugefügten Container-Komponente zu verwenden.

Textkomponente

  1. Öffnen Sie das SPA in Ihrer IDE.

  2. Erstellen einer React-Komponente unter src/components/aem/AEMText.js

  3. Fügen Sie AEMText.js den folgenden Code hinzu:

    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
import { TextV2, TextV2IsEmptyFn } from "@adobe/aem-core-components-react-base";

const RESOURCE_TYPE = "wknd-app/components/text";

const EditConfig = {    
    emptyLabel: "Text",
    isEmpty: TextV2IsEmptyFn,
    resourceType: RESOURCE_TYPE
};

MapTo(RESOURCE_TYPE)(TextV2, EditConfig);

const AEMText = withMappable(TextV2, EditConfig);

export default AEMText;

Die Datei AEMText.js sollte wie folgt aussehen:

AEMText.js

Bildkomponente

  1. Öffnen Sie das SPA in Ihrer IDE.

  2. Erstellen einer React-Komponente unter src/components/aem/AEMImage.js

  3. Fügen Sie AEMImage.js den folgenden Code hinzu:

    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
import { ImageV2, ImageV2IsEmptyFn } from "@adobe/aem-core-components-react-base";

const RESOURCE_TYPE = "wknd-app/components/image";

const EditConfig = {    
    emptyLabel: "Image",
    isEmpty: ImageV2IsEmptyFn,
    resourceType: RESOURCE_TYPE
};

MapTo(RESOURCE_TYPE)(ImageV2, EditConfig);

const AEMImage = withMappable(ImageV2, EditConfig);

export default AEMImage;

  4. Erstellen Sie eine SCSS-Datei src/components/aem/AEMImage.scss , die benutzerdefinierte Stile für AEMImage.scss bereitstellt. Diese Stile zielen auf die CSS-Klassen der AEM React-Kernkomponente mit BEM-Notation ab.

  5. Fügen Sie die folgende SCSS zu AEMImage.scss hinzu.

    .cmp-image__image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
 }

  6. Importieren Sie AEMImage.scss in AEMImage.js

    ...
import './AEMImage.scss';
...

Die AEMImage.js und AEMImage.scss sollten wie folgt aussehen:

AEMImage.js und AEMImage.scss

Importieren der bearbeitbaren Komponenten

Die neu erstellten SPA AEMText und AEMImage werden im SPA referenziert und basierend auf der von AEM zurückgegebenen JSON dynamisch instanziiert. Um sicherzustellen, dass diese Komponenten für die SPA verfügbar sind, erstellen Sie Importanweisungen für sie in App.js

  1. Öffnen Sie das SPA in Ihrer IDE.

  2. Öffnen Sie die Datei src/App.js

  3. Fügen Sie Importanweisungen für AEMText und AEMImage hinzu.

    ...
import AEMText from './components/aem/AEMText';
import AEMImage from './components/aem/AEMImage';
...

Das Ergebnis sollte wie folgt aussehen:

Apps.js

Wenn diese Importe nicht hinzugefügt werden, werden der AEMText- und der AEMImage-Code von SPA nicht aufgerufen und daher werden die Komponenten nicht für die bereitgestellten Ressourcentypen registriert.

Container in AEM konfigurieren

AEM Container-Komponenten verwenden Richtlinien, um ihre zulässigen Komponenten anzugeben. Dies ist eine kritische Konfiguration bei der Verwendung des SPA-Editors, da nur AEM WCM-Kernkomponenten, die SPA Komponenten-Entsprechungen zugeordnet haben, vom SPA gerenderbar sind. Stellen Sie sicher, dass nur die Komponenten zulässig sind, für die wir SPA Implementierungen bereitgestellt haben:

  • AEMTitle zugeordnet zu wknd-app/components/title
  • AEMText zugeordnet zu wknd-app/components/text
  • AEMImage zugeordnet zu wknd-app/components/image

So konfigurieren Sie den Reponsivegrid-Container der Vorlage Remote-SPA:

  1. Bei der AEM-Autoreninstanz anmelden

  2. Navigieren Sie zu Tools > Allgemein > Vorlagen > WKND-App

  3. Bearbeiten Sie SPA Seite des Berichts

    Richtlinien für responsive Raster

  4. Wählen Sie Struktur im Modusschalter oben rechts aus.

  5. Tippen Sie, um den Layout-Container auszuwählen.

  6. Tippen Sie in der Popup-Leiste auf das Symbol Richtlinie .

    Richtlinien für responsive Raster

  7. Erweitern Sie rechts auf der Registerkarte Zulässige Komponenten WKND APP - CONTENT

  8. Stellen Sie sicher, dass nur Folgendes ausgewählt ist:

    • Bild
    • Text
    • Titel

    Remote-SPA

  9. Tippen Sie auf Fertig

Container in AEM erstellen

Nachdem die SPA aktualisiert wurde, um die <AEMResponsiveGrid...>, Wrapper für drei AEM React-Kernkomponenten (AEMTitle, AEMText und AEMImage) einzubetten, und AEM mit einer übereinstimmenden Vorlagenrichtlinie aktualisiert wurde, können wir mit der Inhaltserstellung in der Container-Komponente beginnen.

  1. Bei der AEM-Autoreninstanz anmelden

  2. Navigieren Sie zu Sites > WKND App

  3. Tippen Sie auf Home und wählen Sie Edit aus der oberen Aktionsleiste

    • Eine Textkomponente "Hello World"wird angezeigt, da diese automatisch hinzugefügt wurde, wenn das Projekt über den AEM Projektarchetyp generiert wurde

  4. Wählen Sie in der Modusauswahl oben rechts im Seiteneditor Bearbeiten aus.

  5. Suchen Sie den bearbeitbaren Bereich Layout-Container unter dem Titel .

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

  7. Ziehen Sie die folgenden Komponenten in den Layout-Container

    • Bild
    • Titel

  8. Ziehen Sie die Komponenten in die folgende Reihenfolge, um sie neu anzuordnen:

    1. Titel
    2. Bild
    3. Text

  9. ____ Erstellen der ____ Titellecomponent

    1. Tippen Sie auf die Titelkomponente und tippen Sie auf das Symbol Schraubenschlüssel, um edit die Titelkomponente
    2. Fügen Sie den folgenden Text hinzu:
      • Titel: Der Sommer kommt, lassen Sie uns das Beste daraus machen!
      • Typ: H1
    3. Tippen Sie auf Fertig

  10. ____ Authoring der ____ ImageComponent

    1. Ziehen Sie ein Bild aus der Seitenleiste (nach dem Wechsel zur Asset-Ansicht) auf die Bildkomponente
    2. Tippen Sie auf die Bildkomponente und dann auf das Symbol Schraubenschlüssel, um sie zu bearbeiten.
    3. Aktivieren Sie das Kontrollkästchen Bild ist dekorativ .
    4. Tippen Sie auf Fertig

  11. ____ Authoring der ____ Textkomponente

    1. Bearbeiten Sie die Textkomponente, indem Sie auf die Textkomponente tippen und auf das Symbol Schraubenschlüssel tippen.
    2. Fügen Sie den folgenden Text hinzu:
      • Jetzt erhalten Sie 15% auf allen 1-wöchigen Abenteuern und 20% Rabatt auf alle Abenteuer, die 2 Wochen oder länger sind! Fügen Sie beim Checkout einfach den Kampagnencode SUMMERISCOMING hinzu, um Ihre Rabatte zu erhalten!
    3. Tippen Sie auf Fertig

  12. Ihre Komponenten werden jetzt erstellt, aber vertikal stapelt.

    Erstellte Komponenten

    Verwenden Sie AEM Layout-Modus , um die Größe und das Layout der Komponenten anzupassen.

  13. Wechseln Sie mithilfe der Modusauswahl oben rechts in den Modus Layout-Modus.

  14. ____ Ändern der Größe der Bild- und Textkomponenten, sodass sie nebeneinander angeordnet sind

    • ____ Bildkomponente sollte 8 Spalten breit sein
    • ____ Textkomponente sollte 3 Spalten breit sein

    Layout-Komponenten

  15. ____ Vorschau der Änderungen im AEM Seiteneditor

  16. Aktualisieren Sie die WKND-App, die lokal auf http://localhost:3000 ausgeführt wird, um die erstellten Änderungen zu sehen!

    Container-Komponente in SPA

Herzlichen Glückwunsch!

Sie haben eine Container-Komponente hinzugefügt, mit der Autoren bearbeitbare Komponenten zur WKND-App hinzufügen können! Sie wissen jetzt, wie:

  • Verwenden Sie die Komponente "ResponsiveGrid"der AEM React Editable-Komponente im SPA
  • Registrieren AEM React-Kernkomponenten (Text und Bild) zur Verwendung in der SPA über die Container-Komponente
  • Konfigurieren Sie die Vorlage für die Remote-SPA, um die SPA aktivierten Kernkomponenten zuzulassen.
  • Hinzufügen bearbeitbarer Komponenten zur Container-Komponente
  • Autoren- und Layoutkomponenten im SPA Editor

Nächste Schritte

Im nächsten Schritt wird dieselbe Technik verwendet, um eine bearbeitbare Komponente zu einer Abenteuer-Details-Route in der SPA hinzuzufügen.

Auf dieser Seite