Itinéraires dynamiques et composants modifiables

Dans ce chapitre, nous autorisons deux itinéraires dynamiques Détails de l’aventure à prendre en charge les composants modifiables ; Bali Surf Camp et Beervana à Portland.

L’itinéraire SPA détails de l’aventure est défini comme /adventure:path où path est le chemin d’accès à l’aventure WKND (fragment de contenu) pour afficher des détails sur .

Mappage des URL SPA aux pages AEM

Dans les deux chapitres précédents, nous avons mappé le contenu du composant modifiable de la vue SPA accueil à la page racine de SPA distante correspondante dans l’AEM à /content/wknd-app/us/en/.

La définition du mappage pour les composants modifiables pour les itinéraires dynamiques SPA est similaire. Toutefois, nous devons établir un schéma de mappage 1:1 entre les instances de l’itinéraire et les pages AEM.

Dans ce tutoriel, nous allons prendre le nom du fragment de contenu WKND Adventure, qui est le dernier segment du chemin, et le mapper à un chemin simple sous /content/wknd-app/us/en/adventure.

Ainsi, en fonction de ce mappage, nous devons créer deux nouvelles pages AEM à l’adresse :

• /content/wknd-app/us/en/home/adventure/bali-surf-camp
• /content/wknd-app/us/en/home/adventure/beervana-in-portland

Mappage des SPA distantes

Le mappage des requêtes qui quittent la SPA distante est configuré via la configuration setupProxy effectuée dans le Bootstrap SPA.

Mappage de l’éditeur de SPA

Le mappage pour les requêtes SPA lorsque le SPA est ouvert via l’éditeur d’ est configuré via la configuration des mappages Sling effectuée dans Configuration d’.

Création de pages de contenu dans AEM

Créez tout d’abord le segment de page adventure intermédiaire :

1. Connexion à l’auteur AEM
2. Accédez à Sites > Application WKND > us > en > Page d’accueil de l’application WKND
   • Cette page d’AEM est mappée en tant que racine de l’SPA. C’est donc là que nous commençons à développer la structure de page d’AEM pour d’autres itinéraires de .
3. Appuappuyez sur Créer et sélectionnez Page.
4. Sélectionnez le modèle Page SPA distante et appuyez sur Suivant.
5. Remplissage des propriétés de page
   • Titre : Adventure
   • Nom : adventure
     • Cette valeur définit l’URL de la page d’AEM et doit donc correspondre au segment d’itinéraire SPA.
6. Appuyez sur Terminé

Créez ensuite les pages d’AEM qui correspondent à chacune des URL SPA nécessitant des zones modifiables.

1. Accédez à la nouvelle page Adventure de l’administrateur du site.
2. Appuappuyez sur Créer et sélectionnez Page.
3. Sélectionnez le modèle Page SPA distante et appuyez sur Suivant.
4. Remplissage des propriétés de page
   • Titre : Le camp de surf de Bali
   • Nom : bali-surf-camp
     • Cette valeur définit l’URL de la page d’AEM et doit donc correspondre au dernier segment de l’itinéraire SPA.
5. Appuyez sur Terminé
6. Répétez les étapes 3 à 6 pour créer la page Beervana dans Portland, avec :
   • Titre : Beervana à Portland
   • Nom : beervana-in-portland
     • Cette valeur définit l’URL de la page d’AEM et doit donc correspondre au dernier segment de l’itinéraire SPA.

Ces deux pages AEM contiennent le contenu créé correspondant à leurs itinéraires SPA correspondants. Si d’autres itinéraires SPA nécessitent la création, de nouvelles pages AEM doivent être créées à leur URL de base sous la page racine de la page de distante (/content/wknd-app/us/en/home) dans.

Mise à jour de l’application WKND

Placons le composant <AEMResponsiveGrid...> créé dans le dernier chapitre dans notre composant AdventureDetail SPA, créant ainsi un conteneur modifiable.

Placez le composant SPA AEMResponsiveGrid

Le placement de <AEMResponsiveGrid...> dans le composant AdventureDetail crée un conteneur modifiable dans cet itinéraire. L’astuce est que plusieurs itinéraires utilisent le composant AdventureDetail pour le rendu. Nous devons ajuster dynamiquement l’attribut <AEMResponsiveGrid...>'s pagePath. pagePath doit être dérivé pour pointer vers la page d’AEM correspondante, en fonction de l’aventure affichée par l’instance de l’itinéraire.

1. Ouvrez et modifiez react-app/src/components/AdventureDetail.js

2. Ajoutez la ligne suivante avant la AdventureDetail(..)'s seconde return(..) instruction qui dérive le nom de l’aventure du chemin du fragment de contenu.

   ...
   // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
   const adventureName = adventureData._path.split('/').pop();
   ...
   

3. Importez le composant AEMResponsiveGrid et placez-le au-dessus du composant <h2>Itinerary</h2>.

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

   • pagePath = '/content/wknd-app/us/en/home/adventure/${adventureName}'
   • itemPath = 'root/responsivegrid'

   Cela indique au composant AEMResponsiveGrid de récupérer son contenu de la ressource AEM :

   • /content/wknd-app/us/en/home/adventure/${adventureName}/jcr:content/root/responsivegrid

Mettez à jour AdventureDetail.js avec les lignes suivantes :

...
import AEMResponsiveGrid from '../components/aem/AEMResponsiveGrid';
...

function AdventureDetail(props) {
    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();

    return(
        ...
        <AEMResponsiveGrid
            pagePath={`/content/wknd-app/us/en/home/adventure/${adventureName}`}
            itemPath="root/responsivegrid"/>

        <h2>Itinerary</h2>
        ...
    )
}

Le fichier AdventureDetail.js doit se présenter comme suit :

Création du conteneur dans AEM

Avec la balise <AEMResponsiveGrid...> en place et sa balise pagePath dynamiquement définie en fonction du rendu de l’aventure, nous essayons de créer du contenu dans celle-ci.

1. Connexion à l’auteur AEM

2. Accédez à Sites > Application WKND > us > en

3. ____ Modification de la page d’accueil de l’application WKND

   • Accédez à l’itinéraire Bali Surf Camp dans le SPA pour le modifier.

4. Sélectionnez Aperçu dans le sélecteur de mode en haut à droite.

5. Appuyez sur la carte Bali Surf Camp dans le SPA pour accéder à son itinéraire.

6. Sélectionnez Modifier dans le sélecteur de mode.

7. Recherchez la zone modifiable Conteneur de mises en page juste au-dessus de la Itinéraire

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

9. Faites glisser certains des composants activés dans le conteneur de mises en page

   • Image
   • Texte
   • Titre

   Et créer du matériel marketing promotionnel. Cela pourrait ressembler à ceci :

   

10. ____ Aperçu des modifications dans AEM éditeur de page

11. Actualisez l’application WKND s’exécutant localement sur http://localhost:3000, accédez à l’itinéraire Bali Surf Camp pour afficher les modifications créées.

    

Lorsque vous accédez à un itinéraire de détails d’aventure qui ne comporte pas de page d’AEM mappée, il n’y a aucune fonctionnalité de création sur cette instance d’itinéraire. Pour activer la création sur ces pages, il vous suffit de créer une page AEM avec le nom correspondant sous la page Adventure .

Félicitations !

Félicitations ! Vous avez ajouté la capacité de création aux itinéraires dynamiques dans la SPA !

• Ajout du composant ResponsiveGrid du composant React Modifiable AEM à un itinéraire dynamique.
• Création de pages AEM pour la création de deux itinéraires spécifiques dans le SPA (Bali Surf Camp et Beervana à Portland)
• Contenu créé sur l'itinéraire dynamique Bali Surf Camp !

Vous avez maintenant terminé d’explorer les premières étapes de la manière dont AEM Éditeur SPA peut être utilisé pour ajouter des zones modifiables spécifiques à un distant !

Ressources Business.Adobe.com