Componentes de contêiner editáveis

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

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

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

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

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

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

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

Atualizar Home.js para adicionar o <ResponsiveGrid...> componente.

...
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 do React em src/components/editable/core/Text.js

Adicione o código a seguir 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

Adicione o código a seguir 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 do React em src/components/editable/core/Image.js

Adicione o código a seguir 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

Adicione o código a seguir a EditableImage.js

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

Adicione o seguinte SCSS a EditableImage.scss

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

Importar EditableImage.scss in 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 Denunciar SPA

Selecionar Estrutura no alternador de modo no canto superior direito

Toque para selecionar Contêiner de layout

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

À direita, sob o Componentes permitidos guia, expandir APLICATIVO WKND - CONTEÚDO

Certifique-se de que apenas os seguintes sejam selecionados:

• Imagem
• Texto
• Título

Toque Concluído

Faça logon no AEM Author

Navegue até Sites > Aplicativo WKND

Toque Início e selecione Editar na barra de ação superior

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

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

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

Abra o Barra lateral do Editor de páginas e selecione a variável Visualização Componentes

Arraste os seguintes componentes para a 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 Título componente

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

2. Adicione o seguinte texto:

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

3. Toque Concluído

Autor o Imagem componente

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

Autor o Texto componente

1. Edite o componente de Texto tocando no componente de Texto e tocando no chave inglesa ícone
2. Adicione o seguinte texto:
   • Agora, você pode obter 15% em todas as aventuras de 1 semana e 20% de desconto em todas as aventuras que são de 2 semanas ou mais! No checkout, adicione o código da campanha SUMMERISCOMING para obter seus descontos!
3. Toque 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

• Imagem deve ser 8 colunas de largura
• Texto deve ser 3 colunas de largura

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

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