Composants de conteneur modifiables

Composants fixes offre une certaine flexibilité pour créer SPA contenu, mais cette approche est rigide et nécessite que les développeurs définissent la composition exacte du contenu modifiable. Pour prendre en charge la création d’expériences exceptionnelles par les auteurs, SPA Editor prend en charge l’utilisation de composants de conteneur dans le SPA. Les composants de conteneur permettent aux auteurs de faire glisser des composants autorisés dans le conteneur et de les créer, comme ils le peuvent dans la création AEM Sites traditionnelle.

Dans ce chapitre, nous ajoutons un conteneur modifiable à la vue d’accueil, ce qui permet aux auteurs de composer et de mettre en page des expériences de contenu enrichi à l’aide des composants React modifiables directement dans la SPA.

Mise à jour de l’application WKND

Pour ajouter un composant de conteneur à la vue d’accueil :

Importez le composant React Modifiable AEM ResponsiveGrid component
Importez et enregistrez des composants React modifiables personnalisés (texte et image) à utiliser dans le composant ResponsiveGrid .

Utilisation du composant ResponsiveGrid

Pour ajouter une zone modifiable à la vue Accueil :

Ouvrir et modifier react-app/src/components/Home.js
Importez la variable ResponsiveGrid du composant @adobe/aem-react-editable-components et ajoutez-le à la variable Home composant.
Définissez les attributs suivants sur la variable <ResponsiveGrid...> component
- pagePath = '/content/wknd-app/us/en/home'
- itemPath = 'root/responsivegrid'
Cette instruction indique à la fonction ResponsiveGrid pour récupérer son contenu de la ressource AEM :
- /content/wknd-app/us/en/home/jcr:content/root/responsivegrid
Le itemPath est mappée à la variable responsivegrid noeud défini dans la variable Remote SPA Page AEM Modèle et est automatiquement créé sur les nouvelles pages AEM créées à partir de la Remote SPA Page AEM Modèle.

Mettre à jour Home.js pour ajouter la variable <ResponsiveGrid...> composant.
```
...
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>
    );
}
```

Le Home.js doit se présenter comme suit :

Home.js

Création de composants modifiables

Pour tirer pleinement parti des conteneurs d’expérience de création flexibles fournis dans SPA Editor. Nous avons déjà créé un composant Titre modifiable, mais nous allons en faire quelques autres qui permettent aux auteurs d’utiliser des composants Texte et Image modifiables dans le nouveau composant ResponsiveGrid ajouté.

Les nouveaux composants Texte et React d’image modifiables sont créés à l’aide du modèle de définition de composant modifiable exporté dans composants fixes modifiables.

Composant de texte modifiable

Ouvrez le projet SPA dans votre IDE.
Créez un composant React à l’adresse 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 React modifiable à l’adresse 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;

L’implémentation du composant Texte modifiable doit se présenter comme suit :

Composant de texte modifiable

Composant d’image

Ouvrez le projet SPA dans votre IDE.
Créez un composant React à l’adresse 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 React modifiable à l’adresse src/components/editable/EditableImage.js
Ajoutez le code suivant à EditableImage.js

import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'

import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

const RESOURCE_TYPE = "wknd-app/components/image";

const EditConfig = {
    emptyLabel: "Image",
    isEmpty: imageIsEmpty,
    resourceType: RESOURCE_TYPE
};

const WrappedImage = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
    return <Wrapped {...props}/>
}

const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>

MapTo(RESOURCE_TYPE)(EditableImage);

export default EditableImage;

Création d’un fichier SCSS src/components/editable/EditableImage.scss qui fournit des styles personnalisés pour le EditableImage.scss. Ces styles ciblent les classes CSS du composant React modifiables.

Ajoutez le SCSS suivant à EditableImage.scss

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

Importer EditableImage.scss in EditableImage.js
```
...
import './EditableImage.scss';
...
```

L’implémentation du composant Image modifiable doit se présenter comme suit :

Composant d’image modifiable

Importation des composants modifiables

Le EditableText et EditableImage Les composants React sont référencés dans le SPA et sont instanciés dynamiquement en fonction du code JSON renvoyé par AEM. Pour vous assurer que ces composants sont disponibles pour la SPA, créez des instructions d’importation pour eux dans Home.js

Ouvrez le projet SPA dans votre IDE.
Ouvrez le fichier src/Home.js

Ajout d’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';
...

Le résultat doit se présenter comme suit :

Home.js

Si ces importations sont not ajouté, la variable EditableText et EditableImage n’est pas appelé par SPA. Par conséquent, les composants ne sont pas mappés aux types de ressources fournis.

Configuration du conteneur dans AEM

AEM composants de conteneur utilisent des stratégies pour dicter leurs composants autorisés. Il s’agit d’une configuration essentielle lors de l’utilisation de SPA Editor, car seuls AEM composants qui ont mappé des homologues de composant de l’autre sont rendus par le . Assurez-vous que seuls les composants pour lesquels nous avons fourni SPA implémentations sont autorisés :

EditableTitle mappé à wknd-app/components/title
EditableText mappé à wknd-app/components/text
EditableImage mappé à wknd-app/components/image

Pour configurer le conteneur reponsivegrid du modèle Page de SPA distante :

Connexion à l’auteur AEM
Accédez à Outils > Général > Modèles > Application WKND
Modifier Page SPA rapport
Sélectionner Structure dans le sélecteur de mode en haut à droite.
Appuyez sur pour sélectionner la variable Conteneur de mises en page
Appuyez sur le bouton Stratégie dans la barre contextuelle
Sur la droite, sous le Composants autorisés onglet, développer APPLICATION WKND - CONTENU
Assurez-vous que seuls les éléments suivants sont sélectionnés :
- Image
- Texte
- Titre
Appuyez sur Terminé

Création du conteneur dans AEM

Après la mise à jour de la SPA pour incorporer la variable <ResponsiveGrid...>, wrappers pour trois composants React modifiables (EditableTitle, EditableText, et EditableImage), et AEM est mis à jour avec une stratégie Modèle correspondante, nous pouvons commencer à créer du contenu dans le composant de conteneur.

Connexion à l’auteur AEM
Accédez à Sites > Application WKND
Appuyer Accueil et sélectionnez Modifier à partir de la barre d’actions supérieure
- Un composant 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électionner Modifier dans le sélecteur de mode en haut à droite de l’éditeur de page.
Recherchez la variable Conteneur de mises en page zone modifiable sous le titre
Ouvrez le Barre latérale de l’éditeur de page, puis sélectionnez la variable Vue Composants
Faites glisser les composants suivants dans le Conteneur de mises en page
- Image
- Titre
Faites glisser les composants pour les réorganiser dans l’ordre suivant :
1. Titre
2. Image
3. Texte
Auteur la valeur Titre component
1. Appuyez sur le composant Titre , puis sur le clé à molette icône à edit le composant Titre ;
2. Ajoutez le texte suivant :
  - Titre : L'été arrive, profitons au maximum !
  - Type : H1
3. Appuyez sur Terminé
Auteur la valeur Image component
1. Faites glisser une image dans à partir de la barre latérale (après avoir accédé à la vue Ressources) sur le composant Image.
2. Appuyez sur le composant Image, puis sur la clé à molette icône à modifier
3. Vérifiez les L’image est décorative checkbox
4. Appuyez sur Terminé
Auteur la valeur Texte component
1. Modifiez le composant Texte en appuyant sur le composant Texte, puis en appuyant sur le clé à molette icon
2. Ajoutez le texte suivant :
  - Actuellement, vous pouvez obtenir 15 % de réduction sur toutes les aventures d'une semaine et 20 % de réduction sur toutes les aventures 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 sont maintenant créés, mais empilés verticalement.

Utilisez AEM mode Mise en page pour ajuster la taille et la mise en page des composants.

Basculer vers Mode Mise en page à l’aide du sélecteur de mode en haut à droite.
Redimensionner les composants Image et Texte, de sorte qu’ils soient côte à côte ;
- Image component doit être 8 colonnes larges
- Texte component doit être 3 colonnes larges
Aperçu vos modifications dans AEM éditeur de page
Actualisez l’application WKND s’exécutant localement sur http://localhost:3000 pour afficher les modifications créées.

Félicitations !

Vous avez ajouté un composant de conteneur qui permet aux auteurs d’ajouter des composants modifiables à l’application WKND ! Vous savez maintenant comment :

Utilisez le composant AEM React Modifiable de ResponsiveGrid du SPA
Créez et enregistrez des composants React modifiables (texte et image) à utiliser dans le SPA via le composant de conteneur.
Configurez le modèle Page de SPA distante pour autoriser les composants SPA
Ajout de composants modifiables au composant de conteneur
Composants de création et de mise en page dans SPA éditeur

Étapes suivantes

L’étape suivante utilise cette même technique pour ajouter un composant modifiable à un itinéraire Détails de l’aventure dans le SPA.

De nouvelles options de recherche améliorée

Composants de conteneur modifiables

Mise à jour de l’application WKND

Utilisation du composant ResponsiveGrid

Création de composants modifiables

Composant de texte modifiable

Composant d’image

Importation des composants modifiables

Configuration du conteneur dans AEM

Création du conteneur dans AEM

Félicitations !

Étapes suivantes

Ressources Business.Adobe.com

Sur cette page

Voir suivant :

Formation

Documentation

Communauté

Assistance

Ressources

Compte Adobe

Adobe