Componentes de contêiner editáveis

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

Importe o componente ResponsiveGrid de @adobe/aem-react-editable-components e adicione-o ao componente Home.

Definir os seguintes atributos no componente <ResponsiveGrid...>

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

Isso instrui o componente ResponsiveGrid a recuperar seu conteúdo do recurso AEM:

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

O itemPath mapeia para o nó responsivegrid definido no Modelo AEM Remote SPA Page e é criado automaticamente em novas Páginas AEM criadas a partir do Modelo AEM Remote SPA Page.

Atualize Home.js para adicionar o 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 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

Abrir 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 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:

• Imagem
• Texto
• Título

Toque em Concluído

Faça logon no AEM Author

Navegue até Sites > Aplicativo WKND

Toque em Página inicial e selecione Editar na barra de ações superior

• Um componente Texto "Olá, mundo" é exibido, pois ele é adicionado automaticamente ao gerar o projeto a partir do arquétipo do projeto AEM

Selecione Editar no seletor de modo, na parte superior direita do Editor de páginas

Localize a área editável Contêiner de layout abaixo do Título

Abra a barra lateral do Editor de páginas e selecione a exibição de Componentes

Arraste os seguintes componentes para o Contêiner de layout

• Imagem
• Título

Arraste os componentes para reordená-los na seguinte ordem:

1. Título
2. Imagem
3. Texto

Autor o componente Título

1. Toque no componente Título e toque na chave inglesa para editar o componente Título

2. Adicione o seguinte texto:

   • Título: O verão está chegando, vamos aproveitar ao máximo!
   • Tipo: H1

3. Toque em Concluído

Crie o componente Imagem

1. Arraste uma imagem para o a partir da barra Lateral (após alternar para a exibição do Assets) no componente Imagem
2. Toque no componente de Imagem e toque na chave inglesa para editar
3. Marque a caixa de seleção A imagem é decorativa
4. Toque em Concluído

Autor o componente Texto

1. Edite o componente de Texto ao tocar no componente de Texto e tocar na chave inglesa
2. Adicione o seguinte texto:
   • Nesse momento, você pode obter 15% em todas as aventuras de uma semana e 20% de desconto em todas as aventuras de duas semanas ou mais! No check-out, adicione o código da campanha SUMMERISCOMING para obter seus descontos!
3. Toque em Concluído

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

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

• O componente Imagem deve ter 8 colunas de largura
• O componente Texto deve ter 3 colunas

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

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