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 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

Passa a Strumenti > Generale > Modelli > App WKND

Modifica Pagina SPA report

Seleziona Struttura nel commutatore modalità in alto a destra

Tocca per selezionare il Contenitore di layout

Tocca l'icona Criterio nella barra a comparsa

A destra, nella scheda Componenti consentiti, espandi APP WKND - CONTENUTO

Accertati che siano selezionati solo i seguenti elementi:

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. Viene visualizzato un componente Testo "Hello World", che veniva aggiunto automaticamente durante la generazione del progetto dall’archetipo del progetto AEM

Seleziona Modifica dal selettore modalità in alto a destra nell'Editor pagina

Individua l'area modificabile Contenitore di layout sotto il titolo

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

Trascina i seguenti componenti nel Contenitore di layout

1. Immagine
2. Titolo

Trascina i componenti per riordinarli nell’ordine seguente:

1. Titolo
2. Immagine
3. Testo

Crea il componente Titolo

1. Tocca il componente Titolo, quindi tocca l'icona chiave inglese per modificare il componente Titolo

2. Aggiungere il testo seguente:

   1. Titolo: L'estate sta arrivando, sfruttiamola al massimo!
   2. Tipo: H1

3. Tocca Fine

Crea il componente Immagine

1. Trascina un’immagine in dalla barra laterale (dopo il passaggio alla vista Assets) sul componente Immagine
2. Tocca il componente Immagine, quindi tocca l'icona chiave inglese per modificare
3. Seleziona la casella di controllo L'immagine è decorativa
4. Tocca Fine

Crea il componente Testo

1. Modifica il componente Testo toccando il componente Testo e toccando l'icona chiave inglese
2. Aggiungere il testo seguente:
   1. Al momento, puoi ottenere il 15% su tutte le avventure di 1 settimana e il 20% su tutte le avventure che durano 2 settimane o più! Al momento del pagamento, aggiungi il codice della campagna SUMMERISCOMING per ottenere i tuoi sconti!
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.