Componenti contenitore modificabili

Apri e modifica react-app/src/components/Home.js

Importare il componente ResponsiveGrid da @adobe/aem-react-editable-components e aggiungerlo al componente Home.

Imposta i seguenti attributi sul componente <ResponsiveGrid...>

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

Questo indica al componente ResponsiveGrid di recuperare il contenuto dalla risorsa AEM:

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

itemPath è mappato al nodo responsivegrid definito nel modello AEM Remote SPA Page e viene creato automaticamente nelle nuove pagine AEM create dal modello AEM Remote SPA Page.

Aggiornare Home.js per aggiungere il componente <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>
    );
}

Apri il progetto SPA nell’IDE

Crea un componente React in src/components/editable/core/Text.js

Aggiungi il seguente codice a 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;
}

Crea un componente React modificabile in src/components/editable/EditableText.js

Aggiungi il seguente codice a 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;

Apri il progetto SPA nell’IDE

Crea un componente React in src/components/editable/core/Image.js

Aggiungi il seguente codice a 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>
    )
};

Crea un componente React modificabile in src/components/editable/EditableImage.js

Aggiungi il seguente codice a EditableImage.js

Creare un file SCSS src/components/editable/EditableImage.scss che fornisce stili personalizzati per EditableImage.scss. Questi stili sono destinati alle classi CSS del componente React modificabile.

Aggiungi il seguente SCSS a EditableImage.scss

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

Importa EditableImage.scss in EditableImage.js

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

Apri il progetto SPA nell’IDE

Apri il file in src/Home.js

Aggiungi istruzioni di importazione per AEMText e 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';
...

Accedi ad AEM Author

Navigate to Tools > General > Templates > WKND App

Edit Report SPA Page

Select Structure in the mode switcher in the top right

Tap to select the Layout Container

Tap the Policy icon in the popup bar

On the right, under the Allowed Components tab, expand WKND APP - CONTENT

Ensure only following are selected:

1. Immagine
2. Testo
3. Titolo

Tocca Fine

Accedi ad AEM Author

Passa a Sites > App WKND

Tocca Home e seleziona Modifica dalla barra delle azioni superiore

1. A "Hello World" Text component displays, as this was automatically added when generating the project from the AEM Project archetype

Select Edit from the mode-selector in the top right of the Page Editor

Locate the Layout Container editable area beneath the Title

Apri la barra laterale dell'Editor pagine e seleziona la visualizzazione Componenti

Drag the following components into the Layout Container

1. Immagine
2. Titolo

Drag the components to reorder them to the following order:

1. Titolo
2. Immagine
3. Testo

Author the Title component

1. Tap the Title component, and tap the wrench icon to edit the Title component

2. Add the following text:

   1. Title: Summer is coming, let's make the most of it!
   2. Type: H1

3. Tocca Fine

Author the Image component

1. Drag an image in from the Side bar (after switching to the Assets view) on the Image component
2. Tap the Image component, and tap the wrench icon to edit
3. Check the Image is decorative checkbox
4. Tocca Fine

Author the Text component

1. Edit the Text component by tapping the Text component, and tapping the wrench icon
2. Add the following text:
   1. Right now, you can get 15% on all 1-week adventures, and 20% off on all adventures that are 2 weeks or longer! At checkout, add the campaign code SUMMERISCOMING to get your discounts!
3. Tocca Fine

I componenti ora sono creati, ma si sovrappongono in verticale.

Utilizza la modalità Layout di AEM per regolare le dimensioni e il layout dei componenti.

Passa a Modalità layout utilizzando il selettore modalità in alto a destra

Ridimensiona i componenti Immagine e Testo in modo che siano affiancati

1. Il componente Immagine deve avere 8 colonne
2. Il componente Testo deve avere 3 colonne

Visualizza in anteprima le modifiche nell'Editor pagina di AEM

Aggiorna l'app WKND in esecuzione localmente su http://localhost:3000 per visualizzare le modifiche create.