Itinéraires dynamiques et composants modifiables
Dans ce chapitre, nous autorisons deux itinéraires dynamiques de détails de l’Adventure à prendre en charge les composants modifiables : Bali Surf Camp et Beervana in Portland.
L’itinéraire de la SPA des détails de l’Adventure est défini sur /adventure/:slug
où slug
est une propriété d’identifiant unique sur le fragment de contenu d’Adventure.
Mapper les URL de la SPA aux pages AEM
Dans les deux chapitres précédents, nous avons mappé le contenu de composant modifiable de l’affichage d’accueil de la SPA à la page racine de la SPA distante correspondante dans AEM sous /content/wknd-app/us/en/
.
La définition du mappage pour les composants modifiables pour les itinéraires dynamiques de la 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 prenons le nom du fragment de contenu WKND Adventure, qui est le dernier segment du chemin d’accès, et nous le mappons à un chemin d’accès simple sous /content/wknd-app/us/en/adventure
.
Ainsi, en fonction de ce mappage, nous devons créer deux nouvelles pages AEM dans :
/content/wknd-app/us/en/home/adventure/bali-surf-camp
/content/wknd-app/us/en/home/adventure/beervana-in-portland
Mappage de SPA distante
Le mappage des requêtes quittant la SPA distante est configuré via la configuration setupProxy
effectuée dans Amorcer la SPA.
Mappage de l’éditeur de SPA
Le mappage pour les requêtes de SPA lorsque la SPA est ouverte via l’éditeur de SPA d’AEM est configuré via la configuration des mappages Sling effectuée dans Configuration d’AEM.
Créer des pages de contenu dans AEM
Créez tout d’abord le segment de page adventure
intermédiaire :
-
Connectez-vous au service de création AEM.
-
Accédez à Sites > WKND App > us > en > WKND App Home Page.
- Cette page d’AEM étant mappée en tant que racine de la SPA, c’est là que nous commençons à créer la structure de page d’AEM pour d’autres itinéraires de SPA.
-
Appuyez sur Créer puis sélectionnez Page.
-
Sélectionnez le modèle Page de SPA distante, puis appuyez sur Suivant.
-
Remplissez les 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 de SPA.
-
Appuyez sur Terminé.
Créez ensuite les pages d’AEM qui correspondent à chacune des URL de SPA nécessitant des domaines modifiables.
-
Accédez à la nouvelle page Adventure dans l’administration du site.
-
Sélectionnez Créer puis sélectionnez Page.
-
Sélectionnez le modèle Page de SPA distante, puis appuyez sur Suivant.
-
Remplissez les propriétés de page
- Titre : Bali Surf Camp
- Nom :
bali-surf-camp
- Cette valeur définit l’URL de la page AEM et doit donc correspondre au dernier segment de l’itinéraire de SPA.
-
Appuyez sur Terminé.
-
Répétez les étapes 3 à 6 pour créer la page Beervana in Portland avec :
- Titre : Beervana in Portland
- Nom :
beervana-in-portland
- Cette valeur définit l’URL de la page AEM et doit donc correspondre au dernier segment de l’itinéraire de SPA.
Ces deux pages AEM contiennent le contenu respectif créé pour leurs itinéraires de SPA correspondants. Si d’autres itinéraires de SPA nécessitent de la création, de nouvelles pages AEM doivent être créées à leur URL de SPA sous la page racine de la page de SPA distante (/content/wknd-app/us/en/home
) dans AEM.
Mettre à jour l’application WKND
Plaçons le composant <ResponsiveGrid...>
, créé au chapitre précédent, dans notre composant de SPA AdventureDetail
afin d’obtenir un conteneur modifiable.
Placez le composant de SPA ResponsiveGrid
Si vous placez <ResponsiveGrid...>
dans le composant AdventureDetail
, vous créez un conteneur modifiable dans cet itinéraire. Comme plusieurs itinéraires utilisent le composant AdventureDetail
pour effectuer le rendu, nous devons ajuster dynamiquement l’attribut <ResponsiveGrid...>'s pagePath
. L’attribut pagePath
doit être dérivé pour pointer vers la page AEM correspondante, en fonction de l’Adventure que l’instance de l’itinéraire affiche.
-
Ouvrez et modifiez
react-app-/src/components/AdventureDetail.js
. -
Importez le composant
ResponsiveGrid
et placez-le au-dessus du composant<h2>Itinerary</h2>
. -
Définissez les attributs suivants sur le composant
<ResponsiveGrid...>
. Notez que l’attributpagePath
ajoute l’attributslug
actuel qui correspond à la page d’Adventure selon le mappage défini ci-dessus.pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'
itemPath = 'root/responsivegrid'
Cette instruction indique au composant
ResponsiveGrid
de récupérer son contenu à partir de la ressource d’AEM :/content/wknd-app/us/en/home/adventure/${slug}/jcr:content/root/responsivegrid
Mettez à jour AdventureDetail.js
avec les lignes suivantes :
...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...
function AdventureDetailRender(props) {
...
// Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
const { slug } = useParams();
return(
...
// Pass the slug in
function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
groupSize, difficulty, price, description, itinerary, references, slug }) {
...
return (
...
<ResponsiveGrid
pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
itemPath="root/responsivegrid"/>
<h2>Itinerary</h2>
...
)
}
)
}
Le fichier AdventureDetail.js
doit se présenter comme suit :
Créer le conteneur dans AEM
Avec le <ResponsiveGrid...>
en place et son pagePath
défini dynamiquement en fonction de l’Adventure en cours de rendu, nous essayons de créer du contenu dans celui-ci.
-
Connectez-vous au service de création AEM.
-
Accédez à Sites > Application WKND > us > en.
-
Modifiez la page Page d’accueil de l’application WKND.
- Accédez à l’itinéraire de Bali Surf Camp dans la SPA pour le modifier.
-
Sélectionnez Aperçu à partir du sélecteur de mode en haut à droite.
-
Appuyez sur la carte du Bali Surf Camp dans la SPA pour accéder à son itinéraire.
-
Sélectionnez Modifier à partir du sélecteur de mode.
-
Recherchez le domaine modifiable du conteneur de disposition juste au-dessus de l’Itinerary.
-
Ouvrez la Barre latérale de l’éditeur de page, puis sélectionnez la vue Components.
-
Faites glisser certains des composants activés dans le conteneur de disposition.
- Image
- Texte
- Titre
Créez ensuite des ressources marketing promotionnelles. Elles pourraient ressembler à ceci :
-
Prévisualiser vos modifications dans l’éditeur de page d’AEM
-
Actualisez l’application WKND s’exécutant localement sur http://localhost:3000, accédez à l’itinéraire de Bali Surf Camp pour afficher les modifications créées.
Lorsque vous accédez à un itinéraire de détails d’Adventure qui ne comporte pas de page AEM mappée, il n’existe aucune fonctionnalité de création sur cette instance d’itinéraire. Pour activer la création sur ces pages, il vous suffit de faire une page AEM avec le nom correspondant sous la page d’Adventure.
Félicitations.
Félicitations. Vous avez ajouté la capacité de création aux itinéraires dynamiques dans la SPA.
- Vous avez ajouté le composant ResponsiveGrid du composant React Modifiable d’AEM à un itinéraire dynamique.
- Vous avez créé des pages AEM pour permettre la création de deux itinéraires spécifiques dans la SPA (Bali Surf Camp et Beervana in Portland).
- Vous avez créé du contenu sur l’itinéraire dynamique de Bali Surf Camp.
Vous avez maintenant terminé d’explorer les premières étapes sur la manière dont l’éditeur de SPA d’AEM peut être utilisé pour ajouter des domaines modifiables spécifiques à une SPA distante.