Bewerkbare containercomponenten

Openen en bewerken react-app/src/components/Home.js

Importeer de ResponsiveGrid -component vanuit @adobe/aem-react-editable-components en voeg deze toe aan de Home -component.

De volgende kenmerken instellen voor de component <ResponsiveGrid...>

1. pagePath = '/content/wknd-app/us/en/home'
2. itemPath = 'root/responsivegrid'

Hierdoor krijgt de component ResponsiveGrid de opdracht om de inhoud ervan op te halen uit de AEM-bron:

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

De itemPath verwijst naar het knooppunt responsivegrid dat is gedefinieerd in de Remote SPA Page AEM-sjabloon en wordt automatisch gemaakt op nieuwe AEM-pagina's die zijn gemaakt op basis van de Remote SPA Page AEM-sjabloon.

Werk Home.js bij om de component <ResponsiveGrid...> toe te voegen.

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

Open het project van het KUUROORD in uw winde

Een component React maken op src/components/editable/core/Text.js

De volgende code toevoegen aan 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;
}

Een bewerkbare React-component maken op src/components/editable/EditableText.js

De volgende code toevoegen aan 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;

Open het project van het KUUROORD in uw winde

Een component React maken op src/components/editable/core/Image.js

De volgende code toevoegen aan 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>
    )
};

Een bewerkbare React-component maken op src/components/editable/EditableImage.js

De volgende code toevoegen aan EditableImage.js

Maak een SCSS-bestand src/components/editable/EditableImage.scss dat aangepaste stijlen voor de EditableImage.scss bevat. Deze stijlen zijn gericht op de CSS-klassen van de bewerkbare component React.

Voeg de volgende SCSS toe aan EditableImage.scss

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

Importeren EditableImage.scss in EditableImage.js

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

Open het project van het KUUROORD in uw winde

Het bestand openen src/Home.js

Importeerinstructies toevoegen voor AEMText en 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';
...

Aanmelden bij AEM-auteur

Navigeer aan Hulpmiddelen > Algemeen > Malplaatjes > app WKND

Bewerk Pagina van het Rapport SPA

Selecteer Structuur op de wijzeschakelaar in het hoogste recht

Tik om de Container van de Lay-out te selecteren

Tik het pictogram van het Beleid in popup bar

Op het recht, onder Toegestane Componenten lusje, breid APP WKND uit - INHOUD

Zorg ervoor dat alleen het volgende is geselecteerd:

1. Afbeelding
2. Tekst
3. Titel

Tik Gereed

Aanmelden bij AEM-auteur

Navigeer aan Plaatsen > app WKND

Tik Huis en selecteer uitgeven van de hoogste actiebar

1. De component "Hello World" Tekst wordt weergegeven, aangezien dit automatisch is toegevoegd bij het genereren van het project vanuit het AEM Project archetype

Selecteer uitgeven van de wijze-selecteur in het hoogste recht van de Redacteur van de Pagina

Bepaal de plaats van de Container van de Lay-out editable gebied onder de Titel

Open de zijbar van de Redacteur van de Pagina, en selecteer de mening van Componenten

Sleep de volgende componenten in de Container van de Lay-out

1. Afbeelding
2. Titel

Sleep de componenten om deze in de volgende volgorde te plaatsen:

1. Titel
2. Afbeelding
3. Tekst

Auteur de 3 component van de Titel {

1. Tik de component van de Titel, en tik het moersleutelpictogram ____ de component van de Titel uitgeven

2. Voeg de volgende tekst toe:

   1. Titel: Zomer komt, laten we het meesten van het maken!
   2. Type: H1

3. Tik Gereed

Auteur de component van het Beeld

1. Sleep een afbeelding vanuit de zijbalk (na het schakelen naar de Assets-weergave) naar de afbeeldingscomponent
2. Tik de component van het Beeld, en tik het moersleutel pictogram om uit te geven
3. Controle het Beeld is decoratieve checkbox
4. Tik Gereed

Auteur de ____ component van de Tekst

1. Bewerk de component van de Tekst door de component van de Tekst te tikken, en het tikken van het moersleutelpictogram
2. Voeg de volgende tekst toe:
   1. Op dit ogenblik, kunt u 15% op alle avonturen van 1 week krijgen, en 20% korting op alle avonturen die 2 weken of langer zijn! Bij controle, voeg de campagnecode toe SUMMERISCOMING om uw kortingen te krijgen!
3. Tik Gereed

Uw componenten zijn nu ontworpen, maar worden verticaal gestapeld.

Gebruik de AEM-lay-outmodus om de grootte en lay-out van de componenten aan te passen.

Schakelaar aan Wijze van de Lay-out gebruikend de wijze-selecteur in top-right

vergroot de componenten van het Beeld en van de Tekst, dusdanig dat zij zij aan zij zijn

1. de component van het 1} Beeld zou 8 kolommen breed moeten zijn
2. de component van de Tekst 3 kolommen breed zou moeten zijn

Voorproef uw veranderingen in de Redacteur van de Pagina van AEM

Vernieuw de WKND App die plaatselijk op http://localhost:3000loopt om de authored veranderingen te zien!