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 :

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 :

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

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.

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.

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 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.