Redigerbara behållarkomponenter

Öppna och redigera react-app/src/components/Home.js

Importera komponenten ResponsiveGrid från @adobe/aem-react-editable-components och lägg till den i komponenten Home.

Ange följande attribut för komponenten <ResponsiveGrid...>

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

Detta instruerar komponenten ResponsiveGrid att hämta sitt innehåll från den AEM resursen:

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

itemPath mappar till noden responsivegrid som definieras i AEM Remote SPA Page och skapas automatiskt på nya AEM sidor som skapas från AEM Remote SPA Page.

Uppdatera Home.js om du vill lägga till komponenten <ResponsiveGrid...>.

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

Öppna SPA i din utvecklingsmiljö

Skapa en React-komponent på src/components/editable/core/Text.js

Lägg till följande kod i 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;
}

Skapa en redigerbar React-komponent på src/components/editable/EditableText.js

Lägg till följande kod i 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;

Öppna SPA i din utvecklingsmiljö

Skapa en React-komponent på src/components/editable/core/Image.js

Lägg till följande kod i 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>
    )
};

Skapa en redigerbar React-komponent på src/components/editable/EditableImage.js

Lägg till följande kod i EditableImage.js

Skapa en SCSS-fil src/components/editable/EditableImage.scss som innehåller anpassade format för EditableImage.scss. Dessa format har CSS-klasserna för den redigerbara React-komponenten som mål.

Lägg till följande SCSS i EditableImage.scss

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

Importera EditableImage.scss i EditableImage.js

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

Öppna SPA i din utvecklingsmiljö

Öppna filen src/Home.js

Lägg till importprogramsatser för AEMText och 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';
...

Logga in på AEM författare

Navigera till Verktyg > Allmänt > Mallar > WKND-app

Redigera SPA

Välj Struktur i lägesväljaren i det övre högra hörnet

Tryck för att välja layoutbehållaren

Tryck på ikonen Policy i popup-fältet

Till höger, under fliken Tillåtna komponenter, expanderar du WKND APP - CONTENT

Se till att endast följande är markerade:

• Bild
• Text
• Titel

Tryck på Klar

Logga in på AEM författare

Navigera till Webbplatser > WKND-app

Tryck på Hem och välj Redigera i det övre åtgärdsfältet

• En"Hello World"-textkomponent visas, eftersom den lades till automatiskt när projektet genererades från den AEM projekttypen

Välj Redigera i lägesväljaren längst upp till höger i sidredigeraren

Leta reda på det redigerbara området Layoutbehållare under rubriken

Öppna sidredigerarens sidfält och välj vyn Komponenter

Dra följande komponenter till layoutbehållaren

• Bild
• Titel

Dra komponenterna för att ordna om dem till följande ordning:

1. Titel
2. Bild
3. Text

Författare komponenten Title

1. Tryck på komponenten Title (Rubrik) och tryck på ikonen wrench för att redigera komponenten Title (Rubrik)

2. Lägg till följande text:

   • Titel: Sommaren kommer, vi får ut det mesta av den!
   • Typ: H1

3. Tryck på Klar

Författare komponenten Bild

1. Dra en bild i från sidfältet (efter att du växlat till Assets-vyn) på bildkomponenten
2. Tryck på bildkomponenten och tryck på ikonen skiftnyckel för att redigera
3. Markera kryssrutan Bilden är dekorativ
4. Tryck på Klar

Författare komponenten Text

1. Redigera textkomponenten genom att trycka på textkomponenten och trycka på ikonen skiftnyckel
2. Lägg till följande text:
   • Just nu kan du få 15 % på alla veckolånga äventyr och 20 % rabatt på alla äventyr som är två veckor eller längre! Lägg till kampanjkoden SUMMERISCOMING för att få dina rabatter i kassan!
3. Tryck på Klar

Dina komponenter är nu redigerade, men staplas lodrätt.

Växla till layoutläge med lägesväljaren i det övre högra hörnet

Ändra storlek på bild- och textkomponenterna så att de visas sida vid sida

• Bild-komponenten ska vara 8 kolumner bred
• Komponenten Text ska vara 3 kolumner bred

Förhandsgranska dina ändringar i AEM Page Editor

Uppdatera WKND-appen som körs lokalt på http://localhost:3000 om du vill se de ändringar som har skapats.