Dynamische routes en bewerkbare componenten

In dit hoofdstuk, laten wij twee dynamische routes van het Detail van het avontuur toe om editable componenten te steunen; Bali Surf Camp en Beervana in Portland.

De route van het KUUROORD van het Detail van het Avontuur wordt gedefinieerd als /adventure/:slug waar slug een unieke herkenningstekenbezit op het Fragment van de Inhoud van de Avontuur is.

De SPA-URL's toewijzen aan AEM-pagina's

In de vorige twee hoofdstukken, hebben wij editable componenteninhoud van de mening van het Huis van het KUUROORD aan overeenkomstige Verre de wortelpagina van het KUUROORD in AEM bij /content/wknd-app/us/en/ in kaart gebracht.

Het bepalen van afbeelding voor editable componenten voor de dynamische routes van het KUUROORD is gelijkaardig maar wij moeten omhoog 1:1 kaartschema tussen instanties van de route en de pagina's van AEM komen.

In deze zelfstudie nemen we de naam van het WKND Adventure Content Fragment, het laatste segment van het pad, en wijzen we het toe aan een eenvoudig pad onder /content/wknd-app/us/en/adventure .

Op basis van deze afbeelding moeten we dus twee nieuwe AEM-pagina's maken op:

Externe SPA-toewijzing

De afbeelding voor verzoeken die het Verre KUUROORD verlaten wordt gevormd via de setupProxy configuratie die in Bootstrap wordt gedaan het KUUROORD.

SPA-editor toewijzen

De afbeelding voor de verzoeken van het KUUROORD wanneer het KUUROORD via de Redacteur van het KUUROORD wordt geopend wordt gevormd via het Verdelen van de configuratie die in wordt gedaan vormt AEM.

Inhoudspagina's maken in AEM

Maak eerst het tussenliggende paginasegment adventure :

Dan, creeer de pagina's van AEM die aan elk van URLs van het KUUROORD beantwoorden die editable gebieden vereisen.

Deze twee pagina's van AEM houden de respectieve-authored inhoud voor hun passende routes van het KUUROORD. Als andere routes van het KUUROORD auteursrecht vereisen, moeten de nieuwe Pagina's van AEM bij hun KUUROORD URL onder de Verre de wortelpagina van de KUUROORD (/content/wknd-app/us/en/home) in AEM worden gecreeerd.

De WKND-app bijwerken

Plaats de <ResponsiveGrid...> component die in het laatste hoofdstukwordt gecreeerd, in onze AdventureDetail component van het KUUROORD, die tot een editable container leiden.

De SPA-component ResponsiveGrid plaatsen

Door <ResponsiveGrid...> in de AdventureDetail -component te plaatsen, wordt een bewerkbare container in die route gemaakt. De truc is dat meerdere routes de AdventureDetail -component gebruiken om te renderen, we het <ResponsiveGrid...>'s pagePath -kenmerk dynamisch moeten aanpassen. pagePath moet worden afgeleid om aan de overeenkomstige pagina van AEM te richten, die op het avontuur wordt gebaseerd de instantie van de route toont.

Werk AdventureDetail.js bij met de volgende regels:

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

Het bestand AdventureDetail.js moet er als volgt uitzien:

Auteur van de container in AEM

Nu <ResponsiveGrid...> op zijn plaats is en de pagePath dynamisch is ingesteld op basis van het avontuur dat wordt gerenderd, proberen we de inhoud ervan te ontwerpen.

Wanneer het navigeren aan een avontuurdetailroute die geen in kaart gebrachte Pagina van AEM heeft, is er geen auteursbaarheid op die routeinstantie. Om auteursrecht op deze pagina's toe te laten, maak eenvoudig een Pagina van AEM met de passende naam onder de pagina van het Vontuur!

Gefeliciteerd!

Gefeliciteerd! U hebt auteurscapaciteit aan dynamische routes in het KUUUROORD toegevoegd!

U hebt nu het onderzoeken van de eerste stappen van hoe de Redacteur van AEM SPA kan worden gebruikt om specifieke editable gebieden aan een Verre KUUROORD toe te voegen!