Componentes de contenedor editables

Abrir y editar react-app/src/components/Home.js

Importar el componente ResponsiveGrid desde @adobe/aem-react-editable-components y agregarlo al componente Home.

Establezca los siguientes atributos en el componente <ResponsiveGrid...>

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

Esto indica al componente ResponsiveGrid que recupere su contenido del recurso de AEM:

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

itemPath se asigna al nodo responsivegrid definido en la plantilla de AEM Remote SPA Page y se crea automáticamente en las nuevas páginas de AEM creadas a partir de la plantilla de AEM Remote SPA Page.

Update Home.js to add the <ResponsiveGrid...> component.

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

Abra el proyecto SPA en su IDE

Crear un componente de React en src/components/editable/core/Text.js

Agregar el siguiente código 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;
}

Crear un componente React editable en src/components/editable/EditableText.js

Agregar el siguiente código 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;

Abra el proyecto SPA en su IDE

Crear un componente de React en src/components/editable/core/Image.js

Agregar el siguiente código 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>
    )
};

Crear un componente React editable en src/components/editable/EditableImage.js

Agregar el siguiente código a EditableImage.js

Cree un archivo SCSS src/components/editable/EditableImage.scss que proporcione estilos personalizados para EditableImage.scss. Estos estilos se dirigen a las clases CSS del componente React editable.

Agregar el SCSS siguiente a EditableImage.scss

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

Importar EditableImage.scss en EditableImage.js

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

Abra el proyecto SPA en su IDE

Abra el archivo src/Home.js

Agregar instrucciones de importación para AEMText y 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';
...

Iniciar sesión en AEM Author

Vaya a Herramientas > General > Plantillas > Aplicación WKND

Editar página de SPA de informe

Seleccione Estructura en el conmutador de modo en la parte superior derecha

Pulse para seleccionar Contenedor de diseño

Pulse el icono Directiva en la barra emergente

A la derecha, en la ficha Componentes permitidos, expanda WKND APP - CONTENT

Asegúrese de que solo están seleccionadas las siguientes opciones:

1. Imagen
2. Texto
3. Título

Pulse Listo

Log in to AEM Author

Navigate to Sites > WKND App

Tap Home and select Edit from the top action bar

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

Open the Page Editor's side bar, and select the Components view

Drag the following components into the Layout Container

1. Imagen
2. Título

Drag the components to reorder them to the following order:

1. Título
2. Imagen
3. Texto

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. Tap Done

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. Tap Done

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. Tap Done

Your components are now authored, but stack vertically.

Use AEM's Layout Mode to allow us to adjust the size and layout of the components.

Switch to Layout Mode using the mode-selector in the top-right

Resize the Image and Text components, such that they are side by side

1. Image component should be 8 columns wide
2. Text component should be 3 columns wide

Preview your changes in AEM Page Editor

Refresh the WKND App running locally on http://localhost:3000 to see the authored changes!