Activation du mode sans tête pour le site AEM existant, partie 2

Dans notre premier blog de séries sans tête, nous avons discuté de différentes approches pour activer le mode sans tête pour les sites AEM existants. Nous avons mis l’accent sur une approche consistant à utiliser des exportateurs de fronde et des modèles traditionnels. Discutons des changements nécessaires pour que cette approche fonctionne.

Points clés de la démarche

1. 1. N’importe quelle application/service peut effectuer des appels HTTP vers AEM pages utilisant « .modèle.json” sélecteur et extension, et la page entière sera exposée au format JSON. Nous ne pouvons pas modifier le sélecteur « modèle » car ce sélecteur a déjà été utilisé par les composants de page OOTB et les composants WCM pour la prise en charge de SPA AEM.
   2. Des modifications doivent être apportées aux modèles Sling pour chaque composant afin de garantir que chaque composant expose son JSON comme requis.
   3. Dispatcher Des modifications doivent être apportées pour autoriser les appels vers des pages avec «.model.json« .
   4. Les modifications doivent être apportées de manière à avoir un impact minimal sur les sites AEM existants.

En savoir plus: Personnalisation des fragments de contenu avec Adobe AEM App Builder

Modifications requises pour activer le mode sans tête pour le site existant

Nous avons un projet de démonstration interne appelé « TTN Retail » dont nous allons voir des exemples/captures d’écran dans les points suivants :

1. 1. Modèle d’élingue pour chaque composant

      1. Lorsque nous appelons une page avec « .model.json », elle itère tous les composants de la page et intègre le composant JSON exposé par leur modèle sling et renvoie un seul JSON. JSON ressemble à ceci :
         

         Exemple JSON sans tête

      2. Le modèle Sling doit utiliser l’attribut resourceType dans l’annotation @model comme

         @Model(adaptables = {Resource.class, SlingHttpServletRequest.class} ,
                 adapters = {FlatSalesListModel.class , ComponentExporter.class},
                 resourceType = "ttnretail/components/commerce/flatsaleslist",
                 defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

      3. Un modèle à élingue unique doit être utilisé pour restituer la logique sur chaque composant. L’utilisation de plusieurs modèles Sling sur le HTL du composant signifie que les informations sur le rendu des composants proviennent de différentes sources et ne prendront pas en charge l’exportateur Sling.
      4. Parfois, il existe des cas d’utilisation dans lesquels nous souhaitons utiliser plusieurs modèles d’élingue dans le HTL du composant comme utilitaire. Dans de tels scénarios, il est préférable d’étendre les autres modèles d’élingue dans le modèle d’élingue principal du composant.

   2. Annotation de l’exportateur

      1. L’annotation @Exporter doit être utilisée sur les modèles d’élingue.
      2. Utilisez ‘model’ comme sélecteur et ‘json’ comme extension.
      3. Utilisez l’exportateur Jackson pour la sérialisation qui fournit une variété d’annotations pour différents cas d’utilisation.
      4. Exemple:

         @Exporter(name="jackson", selector = "model", extensions = "json")

   3. Extension de l’exportateur de composants

      Puisque nous utilisons la méthode SPA d’AEM pour obtenir la page JSON, nous devons nous assurer :

      1. Nous utilisons « modèle » comme sélecteur dans l’annotation de l’exportateur.
      2. Le modèle de composant doit étendre com.adobe.cq.export.json.ComponentExporter.
      3. L’annotation du modèle doit utiliser l’interface ComponentExporter dans les propriétés des adaptateurs telles que :

         @Model(adaptables = {Resource.class, SlingHttpServletRequest.class} ,
                 adapters = {FlatSalesListModel.class , ComponentExporter.class},
                 resourceType = "ttnretail/components/commerce/flatsaleslist",
                 defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

      4. L’interface du modèle de composant doit étendre directement ou indirectement l’interface ComponentExporter.

         public interface Navigation extends ComponentExporter {}

         Remarque : Si votre modèle étend la classe de composants WCM (com.adobe.cq.wcm.core.components.models.Component), il étend déjà indirectement ComponentExporter (voir https://github.com/adobe/aem-core- wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Component.java).
      5. Le composant doit remplacer la méthode ComponentExporter.getExportedType() où il doit renvoyer le type de ressource du composant.

         @Override
         
         public String getExportedType() {
         return "ttnretail/components/commerce/flatsaleslist";
         }

   4. Changement de répartiteur

      Afin d’exposer la page au format JSON, nous devons autoriser le sélecteur de modèle et l’extension json dans la section filtre de la configuration du répartiteur. Exemple comme indiqué ci-dessous :

      /filter
      
      .....
      
      # Allow JSON Extension with model selector request
      
      /0063 { /type "allow" /path "/content/ttn-retail/*" /method "GET" /selectors "model" /extension "json" }

      Le chemin utilisé ici est le chemin du site sous lequel les pages existent pour le site.

Conclusion

Les modifications ci-dessus vous aideront à obtenir un fonctionnement sans tête avec un impact minimal sur le site AEM existant. Restez à l’écoute pour des discussions plus perspicaces et plus précieuses sur Gestionnaire d’expérience Adobe. Nous discuterons plus en détail de la personnalisation du modèle .json des composants et des pages dans les prochains blogs de la série Headless.

Cherchez-vous à formuler des stratégies efficaces pour maximiser l’expérience client en utilisant Adobe Expérience Cloud? Cliquez ici pour planifier une rencontre avec nous.