Bearbeitbare Container-Komponenten

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

Importieren Sie die ResponsiveGrid-Komponente aus @adobe/aem-react-editable-components und fügen Sie sie zur Home-Komponente hinzu.

Legen Sie die folgenden Attribute für die <ResponsiveGrid...>-Komponente fest.

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

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

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

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

Aktualisieren Sie Home.js, um die <ResponsiveGrid...>-Komponente hinzuzufügen.

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

Öffnen Sie das SPA-Projekt in Ihrer IDE.

Erstellen Sie eine React-Komponente unter src/components/editable/core/Text.js.

Fügen Sie den folgenden Code zu Text.js hinzu.

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 Sie eine bearbeitbare React-Komponente unter src/components/editable/EditableText.js.

Fügen Sie den folgenden Code zu EditableText.js hinzu.

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;

Öffnen Sie das SPA-Projekt in Ihrer IDE.

Erstellen Sie eine React-Komponente unter src/components/editable/core/Image.js.

Fügen Sie den folgenden Code zu Image.js hinzu.

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 Sie eine bearbeitbare React-Komponente unter src/components/editable/EditableImage.js.

Fügen Sie den folgenden Code zu EditableImage.js hinzu.

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

Fügen Sie das folgende SCSS zu EditableImage.scss hinzu.

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

Importieren Sie EditableImage.scss in EditableImage.js.

...
import './EditableImage.scss';
...

Öffnen Sie das SPA-Projekt in Ihrer IDE.

Öffnen Sie die Datei src/Home.js

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

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

Melden Sie sich bei AEM Author an

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

Bearbeiten des SPA-Seitenberichts

Wählen Sie Struktur im Modusschalter oben rechts

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

Tippen Sie auf das Symbol Richtlinie in der Popup-Leiste

Erweitern Sie auf der rechten Seite unter der Registerkarte Erlaubte Komponenten die Option WKND APP – CONTENT.

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

• Bild
• Text
• Titel

Tippen Sie auf Fertig

Melden Sie sich bei AEM Author an

Navigieren Sie zu Sites > WKND App

Tippen Sie auf Startseite und wählen Sie Bearbeiten in der oberen Aktionsleiste.

• Eine „Hello World“-Textkomponente wird angezeigt, da diese beim Generieren des Projekts aus dem AEM-Projektarchetyp automatisch hinzugefügt wurde.

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

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

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

Ziehen Sie die folgenden Komponenten in den Layout-Container

• Bild
• Titel

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

1. Titel
2. Bild
3. Text

Erstellen Sie die Titelkomponente

1. Tippen Sie auf die Titelkomponente und dann auf das Schraubenschlüssel-Symbol, um die Titelkomponente zu bearbeiten

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

Erstellen Sie die Bildkomponente

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 das Schraubenschlüssel-Symbol, um es zu bearbeiten
3. Aktivieren Sie das Kontrollkästchen Bild ist dekorativ
4. Tippen Sie auf Fertig

Erstellen Sie die Textkomponente

1. Bearbeiten Sie die Textkomponente, indem Sie auf die Textkomponente und dann auf das Schraubenschlüssel-Symbol tippen.
2. Fügen Sie den folgenden Text hinzu:
   • Aktuell erhalten Sie 15 % Rabatt auf alle 1-wöchigen Adventures und 20 % Rabatt auf alle Adventures, die 2 Wochen oder länger dauern! Fügen Sie an der Kasse den Kampagnen-Code SUMMERISCOMING hinzu, um die Rabatte zu erhalten.
3. Tippen Sie auf Fertig

Ihre Komponenten werden jetzt erstellt, sind aber vertikal gestapelt.

Wechseln Sie über die Modusauswahl oben rechts in den Layout-Modus.

Ändern Sie die Größe der Bild- und Textkomponenten so, dass sie nebeneinander angeordnet sind.

• Die Bildkomponente sollte 8 Spalten breit sein.
• Die Textkomponente sollte 3 Spalten breit sein.

Zeigen Sie Ihre Änderungen im AEM-Seiten-Editor in einer Vorschau an.

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