Componentes de contêiner editáveis

Open and edit react-app/src/components/Home.js

Import the ResponsiveGrid component from @adobe/aem-react-editable-components and add it to the Home component.

Set the following attributes on the <ResponsiveGrid...> component

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

This instructs the ResponsiveGrid component to retrieve its content from the AEM resource:

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

The itemPath maps to the responsivegrid node defined in the Remote SPA Page AEM Template and is automatically created on new AEM Pages created from the Remote SPA Page AEM Template.

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 o projeto SPA no IDE

Criar um componente React em src/components/editable/core/Text.js

Adicionar o seguinte 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;
}

Criar um componente editável do React em src/components/editable/EditableText.js

Adicionar o seguinte 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 o projeto SPA no IDE

Criar um componente React em src/components/editable/core/Image.js

Adicionar o seguinte 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>
    )
};

Criar um componente editável do React em src/components/editable/EditableImage.js

Adicionar o seguinte código a EditableImage.js

Crie um arquivo SCSS src/components/editable/EditableImage.scss que forneça estilos personalizados para o EditableImage.scss. Esses estilos têm como alvo as classes CSS do componente React editável.

Adicionar o SCSS a seguir a EditableImage.scss

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

Importar EditableImage.scss em EditableImage.js

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

Abra o projeto SPA no IDE

Abra o arquivo src/Home.js

Adicionar instruções de importação para 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';
...

Faça logon no AEM Author

Navegue até Ferramentas > Geral > Modelos > Aplicativo WKND

Editar Página de SPA do Relatório

Selecione Estrutura no alternador de modo na parte superior direita

Toque para selecionar o Contêiner de layout

Toque no ícone Política na barra pop-up

À direita, na guia Componentes Permitidos, expanda o APLICATIVO WKND - CONTEÚDO

Certifique-se de que apenas os seguintes sejam selecionados:

1. Imagem
2. Texto
3. Título

Toque em Concluído

Faça logon no 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. Imagem
2. Título

Drag the components to reorder them to the following order:

1. Título
2. Imagem
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. Toque em Concluído

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. Toque em Concluído

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. Toque em Concluído

Seus componentes agora foram criados, mas são empilhados verticalmente.

Use o Modo de layout do AEM para permitir que ajustemos o tamanho e o layout dos componentes.

Alternar para Modo de layout usando o seletor de modo no canto superior direito

Redimensionar os componentes Imagem e Texto, de forma que fiquem lado a lado

1. O componente Imagem deve ter 8 colunas de largura
2. O componente Texto deve ter 3 colunas

Visualizar suas alterações no Editor de páginas do AEM

Atualize o Aplicativo WKND em execução localmente em http://localhost:3000 para ver as alterações criadas!