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

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

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

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

AEM AEM AEM El elemento itemPath se asigna al nodo responsivegrid definido en la plantilla de Remote SPA Page y se crea automáticamente en las nuevas páginas de creadas a partir de la plantilla de publicación 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>
    );
}

SPA Abra el proyecto de la 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;

SPA Abra el proyecto de la 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';
...

SPA Abra el proyecto de la 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';
...

AEM Iniciar sesión en el autor de la

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

SPA Editar Página de informes

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:

• Imagen
• Texto
• Título

SPA

Pulse Listo

AEM Iniciar sesión en el autor de la

Vaya a Sitios > Aplicación WKND

Pulse Inicio y seleccione Editar en la barra de acciones superior

• AEM Se muestra un componente de texto "Hello World", ya que este se añadió automáticamente al generar el proyecto a partir del arquetipo de proyecto de la lista de tipos de archivo

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

• Imagen
• 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:

   • Título: Se acerca el verano, aprovechemos al máximo
   • 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:
   • 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.

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

• El componente Image debe tener 8 columnas de ancho
• El componente Texto debe tener 3 columnas de ancho

AEM Vista previa de sus cambios en el Editor de páginas de la página de la

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

SPA