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.

Actualice Home.js para agregar el 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>
    );
}

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

Abrir 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

Iniciar sesión en AEM Author

Vaya a Sitios > Aplicación WKND

Pulse Inicio y seleccione Editar en la barra de acciones superior

1. Se muestra un componente de texto "Hello World", ya que este se agregó automáticamente al generar el proyecto a partir del arquetipo de proyecto de AEM

Seleccione Editar en el selector de modo en la parte superior derecha del Editor de páginas

Busque el área editable Contenedor de diseño debajo del título

Abra la barra lateral del editor de páginas y seleccione la vista Componentes

Arrastre los siguientes componentes al contenedor de diseño

1. Imagen
2. Título

Arrastre los componentes para reordenarlos al siguiente orden:

1. Título
2. Imagen
3. Texto

Autor del componente Título

1. Pulse el componente Título y pulse el icono llave inglesa para editar el componente Título

2. Añada el siguiente texto:

   1. Título: Se acerca el verano, aprovechemos al máximo
   2. Tipo: H1

3. Pulse Listo

Autor del componente Imagen

1. Arrastre una imagen desde la barra lateral (después de cambiar a la vista de Assets) en el componente Imagen
2. Pulse el componente Imagen y pulse el icono llave inglesa para editar
3. Marque la casilla La imagen es decorativa
4. Pulse Listo

Autor del componente Texto

1. Edite el componente Texto tocando el componente Texto y pulsando el icono wrench
2. Añada el siguiente texto:
   1. Ahora mismo, puedes obtener un 15% de descuento en todas las aventuras de una semana y un 20% de descuento en todas las aventuras de dos semanas o más. Al finalizar la compra, agrega el código de campaña SUMMERISCOMING para obtener tus descuentos.
3. Pulse Listo

Los componentes ya se han creado, pero se apilan verticalmente.

Utilice el modo Diseño de AEM para permitirnos ajustar el tamaño y el diseño de los componentes.

Cambie a Modo de diseño con el selector de modo en la esquina superior derecha

Cambiar el tamaño de los componentes Imagen y Texto, de manera que estén uno al lado del otro

1. El componente Image debe tener 8 columnas de ancho
2. El componente Texto debe tener 3 columnas de ancho

Vista previa de sus cambios en el editor de páginas de AEM

Actualice la aplicación WKND que se ejecuta localmente en http://localhost:3000 para ver los cambios creados.