Composants de conteneur modifiables

Ouvrez et modifiez react-app/src/components/Home.js

Importez le composant ResponsiveGrid depuis @adobe/aem-react-editable-components et ajoutez-le au composant Home.

Définissez les attributs suivants sur le composant <ResponsiveGrid...>.

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

Cette instruction indique au composant ResponsiveGrid de récupérer son contenu à partir de la ressource AEM :

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

L’attribut itemPath est mappé au nœud responsivegrid défini dans le modèle AEM Remote SPA Page et est automatiquement créé sur les nouvelles pages AEM conçues à partir du modèle AEM Remote SPA Page.

Mettez à jour Home.js de sorte à ajouter le composant <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>
    );
}

Ouvrez le projet SPA dans votre IDE.

Créez un composant React sous src/components/editable/core/Text.js.

Ajoutez le code suivant à 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;
}

Créez un composant modifiable React sous src/components/editable/EditableText.js.

Ajoutez le code suivant à 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;

Ouvrez le projet SPA dans votre IDE.

Créez un composant React sous src/components/editable/core/Image.js.

Ajoutez le code suivant à 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>
    )
};

Créez un composant modifiable React sous src/components/editable/EditableImage.js.

Ajoutez le code suivant à EditableImage.js.

Créez un fichier SCSS src/components/editable/EditableImage.scss qui fournit des styles personnalisés à EditableImage.scss. Ces styles ciblent les classes CSS du composant React modifiable.

Ajoutez le SCSS suivant à EditableImage.scss.

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

Importez EditableImage.scss dans EditableImage.js.

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

Ouvrez le projet SPA dans votre IDE.

Ouvrez le fichier src/Home.js.

Ajoutez des instructions d’importation pour AEMText et 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';
...

Connectez-vous au service de création AEM.

Accédez à Outils > Général > Modèles > Application WKND.

Modifiez la page de SPA distante.

Sélectionnez Structure dans le sélecteur de mode en haut à droite.

Cliquez pour sélectionner le conteneur de disposition.

Cliquez sur l’icône Stratégie dans la barre contextuelle.

Sur la droite, sous l’onglet Composants autorisés, développez APPLICATION WKND - CONTENU.

Assurez-vous que seuls les éléments suivants sont sélectionnés :

• Image
• Texte
• Titre

Appuyez sur Terminé.

Connectez-vous au service de création AEM.

Accédez à Sites > Application WKND.

Cliquez sur Accueil, puis sélectionnez Modifier dans la barre d’actions du haut.

• Un composant de texte « Hello World » s’affiche, car il a été automatiquement ajouté lors de la génération du projet à partir de l’archétype de projet AEM.

Sélectionnez Modifier dans le sélecteur de mode en haut à droite de l’éditeur de page.

Recherchez le domaine modifiable du conteneur de disposition sous le titre.

Ouvrez la barre latérale de l’éditeur de page, puis sélectionnez la vue Composants.

Faites glisser les composants suivants dans le conteneur de disposition  :

• Image
• Titre

Faites glisser les composants pour les réorganiser dans l’ordre suivant :

1. Titre
2. Image
3. Texte

Créez le composant de titre.

1. Appuyez sur le composant de titre, puis sur l’icône clé à molette pour modifier le composant de titre.

2. Ajoutez le texte suivant :

   • Titre : L’été arrive, profitons-en au maximum.
   • Type : H1

3. Appuyez sur Terminé.

Créez le composant d’image.

1. Faites glisser une image à partir de la barre latérale (après avoir basculé sur le mode d’affichage Ressources) sur le composant d’image.
2. Appuyez sur le composant d’image, puis sur l’icône clé à molette pour modifier.
3. Cochez la case L’image est décorative.
4. Appuyez sur Terminé.

Créez le composant de texte.

1. Modifiez le composant de texte en appuyant dessus et en cliquant sur l’icône clé à molette.
2. Ajoutez le texte suivant :
   • Actuellement, vous pouvez obtenir 15 % de réduction sur toutes les Adventures d’une semaine et 20 % sur toutes celles de 2 semaines ou plus. Au passage en caisse, ajoutez le code de campagne SUMMERISCOMING pour obtenir vos remises.
3. Appuyez sur Terminé.

Vos composants ont été créés, mais s’empilent verticalement.

Basculez sur le mode de disposition à l’aide du sélecteur de mode situé en haut à droite.

Redimensionnez les composants Image et Texte, de manière à ce qu’ils soient côte à côte ;

• Le composant Image doit avoir une largeur de 8 colonnes.
• Le composant Texte doit avoir une largeur de 3 colonnes.

Prévisualisez vos modifications dans l’éditeur de page d’AEM.

Actualisez l’application WKND s’exécutant localement sur http://localhost:3000 pour afficher les modifications.