Bearbeitbare Container-Komponenten

Feste Komponenten bieten eine gewisse Flexibilität beim Erstellen 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!

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

WKND-App aktualisieren

Hinzufügen einer Container-Komponente zur Startansicht:

Importieren Sie die Komponente AEM React Editable ResponsiveGrid component
Importieren und registrieren Sie benutzerdefinierte bearbeitbare React-Komponenten (Text und Bild) zur Verwendung in der Komponente "ResponsiveGrid"

ResponsiveGrid-Komponente verwenden

So fügen Sie der Ansicht "Home"einen bearbeitbaren Bereich hinzu:

Öffnen und Bearbeiten react-app/src/components/Home.js
Importieren Sie die ResponsiveGrid Komponente aus @adobe/aem-react-editable-components und fügen Sie sie zum Home -Komponente.
Legen Sie die folgenden Attribute für die <ResponsiveGrid...> component
- pagePath = '/content/wknd-app/us/en/home'
- itemPath = 'root/responsivegrid'
Dies weist die ResponsiveGrid -Komponente, um ihren Inhalt aus der AEM-Ressource abzurufen:
- /content/wknd-app/us/en/home/jcr:content/root/responsivegrid
Die itemPath der responsivegrid Knoten, der im Remote SPA Page AEM Vorlage und wird automatisch auf neuen AEM erstellt, die aus dem Remote SPA Page AEM Vorlage.

Aktualisieren Home.js , um <ResponsiveGrid...> -Komponente.
```
...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

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

            <EditableTitle
                pagePath='/content/wknd-app/us/en/home'
                itemPath='title'/>

            <Adventures />
        </div>
    );
}
```

Die Home.js sollte wie folgt aussehen:

Home.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 Komponenten erstellen, die es Autoren ermöglichen, bearbeitbare Text- und Bildkomponenten in der neu hinzugefügten Komponente "ResponsiveGrid"zu verwenden.

Die neuen bearbeitbaren Text- und Bildreaktionskomponenten werden mit dem in bearbeitbare feste Komponenten.

Bearbeitbare Textkomponente

Öffnen Sie das SPA in Ihrer IDE.
Erstellen einer React-Komponente unter src/components/editable/core/Text.js

Fügen Sie den folgenden Code zu Text.js

import React from 'react'

const TextPlain = (props) => <div className={props.baseCssClass}><p className="cmp-text__paragraph">{props.text}</p></div>;
const TextRich = (props) => {
const text = props.text;
const id = (props.id) ? props.id : (props.cqPath ? props.cqPath.substr(props.cqPath.lastIndexOf('/') + 1) : "");
    return <div className={props.baseCssClass} id={id} data-rte-editelement dangerouslySetInnerHTML={{ __html: text }} />
};

export const Text = (props) => {
    if (!props.baseCssClass) {
        props.baseCssClass = 'cmp-text'
    }

    const { richText = false } = props

    return richText ? <TextRich {...props} /> : <TextPlain {...props} />
    }

    export function textIsEmpty(props) {
    return props.text == null || props.text.length === 0;
}

Erstellen einer bearbeitbaren React-Komponente unter src/components/editable/EditableText.js

Fügen Sie den folgenden Code zu EditableText.js

import React from 'react'
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Text, textIsEmpty } from "./core/Text";
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

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

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

export const WrappedText = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Text, "cmp-text"), textIsEmpty, "Text V2")
    return <Wrapped {...props} />
};

const EditableText = (props) => <EditableComponent config={EditConfig} {...props}><WrappedText /></EditableComponent>

MapTo(RESOURCE_TYPE)(EditableText);

export default EditableText;

Die Implementierung der bearbeitbaren Textkomponente sollte wie folgt aussehen:

Bearbeitbare Textkomponente

Bildkomponente

Öffnen Sie das SPA in Ihrer IDE.
Erstellen einer React-Komponente unter src/components/editable/core/Image.js

Fügen Sie den folgenden Code zu Image.js

import React from 'react'
import { RoutedLink } from "./RoutedLink";

export const imageIsEmpty = (props) => (!props.src) || props.src.trim().length === 0

const ImageInnerContents = (props) => {
return (<>
    <img src={props.src}
        className={props.baseCssClass + '__image'}
        alt={props.alt} />
    {
        !!(props.title) && <span className={props.baseCssClass + '__title'} itemProp="caption">{props.title}</span>
    }
    {
        props.displayPopupTitle && (!!props.title) && <meta itemProp="caption" content={props.title} />
    }
    </>);
};

const ImageContents = (props) => {
    if (props.link && props.link.trim().length > 0) {
        return (
        <RoutedLink className={props.baseCssClass + '__link'} isRouted={props.routed} to={props.link}>
            <ImageInnerContents {...props} />
        </RoutedLink>
        )
    }
    return <ImageInnerContents {...props} />
};

export const Image = (props) => {
    if (!props.baseCssClass) {
        props.baseCssClass = 'cmp-image'
    }

    const { isInEditor = false } = props;
    const cssClassName = (isInEditor) ? props.baseCssClass + ' cq-dd-image' : props.baseCssClass;

    return (
        <div className={cssClassName}>
            <ImageContents {...props} />
        </div>
    )
};

Erstellen einer bearbeitbaren React-Komponente unter src/components/editable/EditableImage.js
Fügen Sie den folgenden Code zu EditableImage.js

import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'

import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

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

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

const WrappedImage = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
    return <Wrapped {...props}/>
}

const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>

MapTo(RESOURCE_TYPE)(EditableImage);

export default EditableImage;

Erstellen einer SCSS-Datei src/components/editable/EditableImage.scss , das benutzerdefinierte Stile für die EditableImage.scss. Diese Stile zielen auf die CSS-Klassen der bearbeitbaren React-Komponente ab.

Fügen Sie die folgende SCSS zu EditableImage.scss

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

Import EditableImage.scss in EditableImage.js
```
...
import './EditableImage.scss';
...
```

Die Implementierung der bearbeitbaren Bildkomponente sollte wie folgt aussehen:

Bearbeitbare Bildkomponente

Importieren der bearbeitbaren Komponenten

Die neu erstellte EditableText und EditableImage React-Komponenten 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 Home.js

Öffnen Sie das SPA in Ihrer IDE.
Öffnen Sie die Datei src/Home.js

Hinzufügen von Importanweisungen für AEMText und AEMImage

...
// The following need to be imported, so that MapTo is run for the components
import EditableText from './editable/EditableText';
import EditableImage from './editable/EditableImage';
...

Das Ergebnis sollte wie folgt aussehen:

Home.js

Wenn diese Einfuhren not hinzugefügt, EditableText und EditableImage -Code von SPA nicht aufgerufen wird und daher werden die Komponenten nicht den bereitgestellten Ressourcentypen zugeordnet.

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 Komponenten, die SPA Komponenten zugeordnet haben, vom SPA gerenderbar sind. Stellen Sie sicher, dass nur die Komponenten zulässig sind, für die wir SPA Implementierungen bereitgestellt haben:

EditableTitle zugeordnet zu wknd-app/components/title
EditableText zugeordnet zu wknd-app/components/text
EditableImage zugeordnet zu wknd-app/components/image

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

Bei der AEM-Autoreninstanz anmelden
Navigieren Sie zu Tools > Allgemein > Vorlagen > WKND-App
Bearbeiten SPA
Auswählen Struktur im Modusschalter oben rechts
Tippen, um die Layout-Container
Tippen Sie auf Politik Symbol in der Popup-Leiste
Rechts unter dem Zugelassene Komponenten Registerkarte, erweitern WKND-APP - INHALT
Stellen Sie sicher, dass nur Folgendes ausgewählt ist:
- Bild
- Text
- Titel
Tippen Sie auf Fertig

Container in AEM erstellen

Nach der Aktualisierung des SPA zum Einbetten des <ResponsiveGrid...>, Wrapper für drei bearbeitbare React-Komponenten (EditableTitle, EditableTextund EditableImage) und AEM mit einer übereinstimmenden Vorlagenrichtlinie aktualisiert wird, können wir damit beginnen, Inhalte in der Container-Komponente zu erstellen.

Bei der AEM-Autoreninstanz anmelden
Navigieren Sie zu Sites > WKND-App
Tippen Startseite und wählen Sie Bearbeiten in der oberen Aktionsleiste
- Eine Textkomponente "Hello World"wird angezeigt, da diese automatisch hinzugefügt wurde, wenn das Projekt über den AEM Projektarchetyp generiert wurde
Auswählen Bearbeiten über die Modusauswahl oben rechts im Seiteneditor
Suchen Sie die Layout-Container bearbeitbarer Bereich unter dem Titel
Öffnen Sie die Seitenleiste des Seiteneditors und wählen Sie die Komponentenansicht
Ziehen Sie die folgenden Komponenten in die Layout-Container
- Bild
- Titel
Ziehen Sie die Komponenten in die folgende Reihenfolge, um sie neu anzuordnen:
1. Titel
2. Bild
3. Text
Autor die Titel component
1. Tippen Sie auf die Komponente Titel und dann auf Schraubenschlüssel Symbol zu 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
Autor die Bild component
1. Ziehen Sie ein Bild aus der Seitenleiste (nach dem Wechsel zur Asset-Ansicht) auf die Bildkomponente
2. Tippen Sie auf die Bildkomponente und tippen Sie auf Schraubenschlüssel Symbol zum Bearbeiten
3. Überprüfen Sie die Bild ist dekorativ Kontrollkästchen
4. Tippen Sie auf Fertig
Autor die Text component
1. Bearbeiten Sie die Textkomponente, indem Sie auf die Textkomponente tippen und auf die Schraubenschlüssel icon
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 den Kampagnencode SUMMERISCOMING hinzu, um Ihre Rabatte zu erhalten!
3. Tippen Sie auf Fertig
Ihre Komponenten werden jetzt erstellt, aber vertikal stapelt.

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

Wechseln zu Layout-Modus Verwenden der Modusauswahl oben rechts
Größe ändern die Bild- und Text-Komponenten, sodass sie nebeneinander angeordnet sind
- Bild -Komponente sollte 8 Spalten breit
- Text -Komponente sollte 3 Spalten breit
Vorschau Ihre Änderungen in AEM Seiteneditor
Aktualisieren Sie die WKND-App, die lokal ausgeführt wird auf http://localhost:3000 um die erstellten Änderungen zu sehen!

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 der Komponente "AEM React-Bearbeitbar" ResponsiveGrid -Komponente im SPA
Erstellen und registrieren Sie bearbeitbare React-Komponenten (Text und Bild) zur Verwendung in der SPA über die Container-Komponente
Konfigurieren Sie die Vorlage Remote SPA Page , um die SPA aktivierten Komponenten 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 Hinzufügen einer bearbeitbaren Komponente zu einer Abenteuer-Details-Route im SPA.

Neue, verbesserte Suche

Bearbeitbare Container-Komponenten

WKND-App aktualisieren

ResponsiveGrid-Komponente verwenden

Erstellen bearbeitbarer Komponenten

Bearbeitbare Textkomponente

Bildkomponente

Importieren der bearbeitbaren Komponenten

Container in AEM konfigurieren

Container in AEM erstellen

Herzlichen Glückwunsch!

Nächste Schritte

Ressourcen für Business.Adobe.com

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe