Composants composites dans les SPA composite-components-in-spas

Les composants composites exploitent la nature modulaire des composants AEM en combinant plusieurs composants de base pour en constituer un seul. Le cas d’utilisation courant d’un composant composite est celui du composant de carte, composé d’une combinaison des composants image et texte.

Lorsque les composants composites sont correctement implémentés dans la structure de l’éditeur d’application d’une seule page (SPA) d’AEM, les auteurs de contenu peuvent effectuer un glisser-déposer de ces composants comme s’ils le feraient pour d’autres, tout en étant en mesure de modifier individuellement chaque composant constituant le composant composite.

Cet article explique comment ajouter un composant composite à votre application monopage pour travailler en toute transparence avec l’éditeur d’application monopage AEM.

Cas d’utilisation use-case

Cet article utilise le composant de carte type comme cas d’utilisation. Les cartes sont des éléments d’interface utilisateur courants pour de nombreuses expériences digitales. Elles sont généralement constituées d’une image et de texte ou d’une légende associés. La personne chargée de créer du contenu souhaite pouvoir faire un glisser-déposer de l’ensemble de la carte, mais aussi modifier individuellement l’image de la carte et personnaliser le texte associé.

Prérequis prerequisites

Les modèles suivants, qui concernent la prise en charge des cas d’utilisation des composants composites, nécessitent les conditions préalables suivantes.

Ajout de composants composites à une SPA adding-composite-components

Il existe trois modèles différents pour mettre en œuvre votre composant composite en fonction de l’implémentation de la SPA dans AEM.

Les sections suivantes présentent des exemples d’implémentation de chaque cas à l’aide du composant Carte.

Le composant n’existe pas dans votre projet AEM. component-does-not-exist

Commencez par créer les composants qui constitueront le composant composite, c’est-à-dire les composants de l’image et de son texte.

Le composant de texte ressemble à ce qui suit.

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
  emptyLabel: 'Text',
  isEmpty: function(props) {
    return !props || !props.text || props.text.trim().length < 1;
  },
  resourceType: 'wknd-spa/components/text'
};

export const Text = ({ cqPath, richText, text }) => {
  const richTextContent = () => (
    <div className="aem_text"
      id={cqPath.substr(cqPath.lastIndexOf('/') + 1)}
      data-rte-editelement
      dangerouslySetInnerHTML={{__html: text}} />
  );
  return richText ? richTextContent() : (
     <div className="aem_text">{text}</div>
  );
};

export const AEMText = withMappable(Text, TextEditConfig);

Si vous créez un composant d’image de la même manière, vous pouvez le combiner avec le composant AEMText dans un nouveau composant de carte, en utilisant les composants d’image et de texte comme composants enfants.

import React from 'react';
import { AEMText } from './AEMText';
import { AEMImage } from './AEMImage';

export const AEMCard = ({ pagePath, itemPath}) => (
  <div>
    <AEMText
       pagePath={pagePath}
       itemPath={`text`} />
    <AEMImage
       pagePath={pagePath}
       itemPath={`image`} />
   </div>
);

Ce composant composite obtenu peut ensuite être placé n’importe où dans l’application et des espaces réservés pour un composant de texte et d’image sont ajoutés dans l’éditeur de SPA. Dans l’exemple ci-dessous, le composant de carte est ajouté au composant principal au-dessous du titre.

function Home() {
  return (
    <div className="Home">
      <h2>Current Adventures</h2>
      <AEMCard
        pagePath='/content/wknd-spa/home' />
    </div>
  );
}

Un espace réservé vide s’affiche alors pour un texte et une image dans l’éditeur. Lors de la saisie de valeurs pour ces éléments à l’aide de l’éditeur, elles sont stockées selon le chemin de page spécifié, c’est-à-dire /content/wknd-spa/home ,au niveau racine avec les noms spécifiés dans itemPath.

Le composant existe dans votre projet AEM, mais pas le contenu requis. content-does-not-exist

Dans ce cas, le composant de carte est déjà créé dans votre projet AEM contenant les nœuds de titre et d’image. Les nœuds enfants (texte et image) possèdent les types de ressources correspondants.

Vous pouvez ensuite l’ajouter à votre SPA et récupérer son contenu.

Désormais, le composant imagecard peut être directement ajouté au conteneur dans l’éditeur d’AEM.

Le composant et son contenu requis existent tous deux dans votre projet AEM. both-exist

Si le contenu existe dans AEM, il peut être directement inclus dans la SPA en fournissant le chemin d’accès au contenu.

<AEMCard
    pagePath='/content/wknd-spa/home'
    itemPath='root/responsivegrid/imagecard' />

Le composant AEMCard est identique à la valeur définie dans le cas d’utilisation précédent. Ici, le contenu défini à l’emplacement ci-dessus dans le projet AEM est inclus dans le SPA.