Componenti contenitore modificabili

I componenti fissi offrono una certa flessibilità per l'authoring dei contenuti SPA, tuttavia questo approccio è rigido e richiede agli sviluppatori di definire la composizione esatta dei contenuti modificabili. Per supportare la creazione di esperienze eccezionali da parte degli autori, l’Editor SPA supporta l’utilizzo di componenti contenitore nell’SPA. I componenti contenitore consentono agli autori di trascinare e rilasciare i componenti consentiti nel contenitore e di crearli, come fanno nell’authoring AEM Sites tradizionale.

Componenti contenitore modificabili

In questo capitolo viene aggiunto un contenitore modificabile alla visualizzazione Home che consente agli autori di comporre e creare il layout di esperienze con contenuti avanzati utilizzando i componenti React modificabili direttamente nell’SPA.

Aggiornare l’app WKND

Per aggiungere un componente contenitore alla vista Home:

  • Importa il componente ResponsiveGrid del componente modificabile React dell'AEM
  • Importare e registrare componenti React modificabili personalizzati (testo e immagine) da utilizzare nel componente ResponsiveGrid

Utilizzare il componente ResponsiveGrid

Per aggiungere un'area modificabile alla vista Home:

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

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

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

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

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

    • /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...>.

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

Il file Home.js deve essere simile al seguente:

Home.js

Creare componenti modificabili

Ottenere il pieno effetto dei contenitori di esperienza di authoring flessibili forniti nell’editor SPA. È già stato creato un componente Titolo modificabile, ma creiamo alcuni altri che consentono agli autori di utilizzare componenti Testo e Immagine modificabili nel componente ResponsiveGrid appena aggiunto.

I nuovi componenti Text e Image React modificabili vengono creati utilizzando il modello di definizione del componente modificabile esportato in componenti fissi modificabili.

Componente testo modificabile

  1. Aprire il progetto SPA nell’IDE

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

  3. Aggiungi il seguente codice a Text.js

    code language-javascript
    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;
    }
    
  4. Crea un componente React modificabile in src/components/editable/EditableText.js

  5. Aggiungi il seguente codice a EditableText.js

    code language-javascript
    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;
    

L’implementazione del componente Testo modificabile deve essere simile alla seguente:

Componente testo modificabile

Componente immagine

  1. Aprire il progetto SPA nell’IDE

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

  3. Aggiungi il seguente codice a Image.js

    code language-javascript
    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>
        )
    };
    
  4. Crea un componente React modificabile in src/components/editable/EditableImage.js

  5. Aggiungi il seguente codice a EditableImage.js

import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'

import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

const RESOURCE_TYPE = "wknd-app/components/image";

const EditConfig = {
    emptyLabel: "Image",
    isEmpty: imageIsEmpty,
    resourceType: RESOURCE_TYPE
};

const WrappedImage = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
    return <Wrapped {...props}/>
}

const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>

MapTo(RESOURCE_TYPE)(EditableImage);

export default EditableImage;
  1. 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.

  2. Aggiungi il seguente SCSS a EditableImage.scss

    code language-css
    .cmp-image__image {
        margin: 1rem 0;
        width: 100%;
        border: 0;
     }
    
  3. Importa EditableImage.scss in EditableImage.js

    code language-javascript
    ...
    import './EditableImage.scss';
    ...
    

L’implementazione del componente Immagine modificabile sarà simile alla seguente:

Componente immagine modificabile

Importare i componenti modificabili

I componenti React EditableText e EditableImage appena creati sono indicati nell'SPA e vengono creati in modo dinamico in base al JSON restituito dall'AEM. Per assicurarsi che questi componenti siano disponibili per l'SPA, creare istruzioni di importazione per essi in Home.js

  1. Aprire il progetto SPA nell’IDE

  2. Apri il file src/Home.js

  3. Aggiungi istruzioni di importazione per AEMText e AEMImage

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

Il risultato dovrebbe essere simile al seguente:

Home.js

Se queste importazioni sono non aggiunte, il codice EditableText e EditableImage non può essere richiamato dall'SPA e pertanto i componenti non sono mappati ai tipi di risorsa forniti.

Configurazione del contenitore in AEM

I componenti contenitore AEM utilizzano i criteri per determinare i componenti consentiti. Si tratta di una configurazione critica quando si utilizza l’editor SPA, in quanto solo i componenti AEM che hanno mappato le controparti dei componenti SPA possono essere sottoposti a rendering da parte dell’SPA. Assicurati che siano consentiti solo i componenti per i quali abbiamo fornito le implementazioni SPA:

  • EditableTitle mappato a wknd-app/components/title
  • EditableText mappato a wknd-app/components/text
  • EditableImage mappato a wknd-app/components/image

Per configurare il contenitore reponsivegrid del modello Pagina SPA remota:

  1. Accedi a AEM Author

  2. Passa a Strumenti > Generale > Modelli > App WKND

  3. Modifica Pagina SPA report

    Criteri griglia reattiva

  4. Seleziona Struttura nel commutatore modalità in alto a destra

  5. Tocca per selezionare il Contenitore di layout

  6. Tocca l'icona Criterio nella barra a comparsa

    Criteri griglia reattiva

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

  8. Accertati che siano selezionati solo i seguenti elementi:

    • Immagine
    • Testo
    • Titolo

    Pagina SPA remota

  9. Tocca Fine

Authoring del contenitore nell’AEM

Dopo l'aggiornamento dell'SPA per incorporare <ResponsiveGrid...>, i wrapper per tre componenti React modificabili (EditableTitle, EditableText e EditableImage) e l'AEM viene aggiornato con un criterio di modello corrispondente, possiamo iniziare a creare contenuti nel componente contenitore.

  1. Accedi a AEM Author

  2. Passa a Sites > App WKND

  3. Tocca Home e seleziona Modifica dalla barra delle azioni superiore

    • Viene visualizzato un componente di testo "Hello World", che veniva aggiunto automaticamente durante la generazione del progetto dall’archetipo del progetto AEM
  4. Seleziona Modifica dal selettore modalità in alto a destra nell'Editor pagina

  5. Individua l'area modificabile Contenitore di layout sotto il titolo

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

  7. Trascina i seguenti componenti nel Contenitore di layout

    • Immagine
    • Titolo
  8. Trascina i componenti per riordinarli nell’ordine seguente:

    1. Titolo
    2. Immagine
    3. Testo
  9. 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:

      • Titolo: L'estate sta arrivando, sfruttiamola al massimo!
      • Tipo: H1
    3. Tocca Fine

  10. 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
  11. Crea il componente Testo

    1. Modifica il componente Testo toccando il componente Testo e toccando l'icona chiave inglese
    2. Aggiungere il testo seguente:
      • 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
  12. I componenti ora sono creati, ma si sovrappongono in verticale.

    Componenti creati

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

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

  2. Ridimensiona i componenti Immagine e Testo in modo che siano affiancati

    • Il componente Immagine deve avere 8 colonne
    • Il componente Testo deve avere 3 colonne

    Componenti layout

  3. Visualizzare in anteprima le modifiche nell'Editor pagina AEM

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

    Componente contenitore in SPA

Congratulazioni.

Hai aggiunto un componente contenitore che consente agli autori di aggiungere componenti modificabili all’app WKND. Ora sai come:

  • Utilizza il componente ResponsiveGrid del componente modificabile AEM React nell'SPA
  • Creare e registrare componenti React modificabili (testo e immagine) da utilizzare nell’SPA tramite il componente contenitore
  • Configurare il modello Pagina SPA remota per consentire i componenti abilitati per SPA
  • Aggiungere componenti modificabili al componente contenitore
  • Componenti di authoring e layout nell’editor SPA

Passaggi successivi

Il passaggio successivo utilizza la stessa tecnica per aggiungere un componente modificabile a un percorso Adventure Details nell'SPA.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4