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 Detail van het avontuur SPA wordt bepaald als /adventure/:slug waar slug een unieke herkenningstekenbezit op het Fragment van de Inhoud van het Avontuur is.

De SPA URL's toewijzen aan AEM pagina's

In de vorige twee hoofdstukken hebben we bewerkbare componentinhoud vanuit de SPA Home-weergave toegewezen aan de corresponderende Remote SPA hoofdpagina in AEM op /content/wknd-app/us/en/ .

Het bepalen van afbeelding voor editable componenten voor de SPA dynamische routes is gelijkaardig maar wij moeten omhoog 1:1 toewijzingsschema tussen instanties van de route en AEM pagina's 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 maken op:

Externe SPA

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

Toewijzing SPA Editor

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

Inhoudspagina's maken in AEM

Maak eerst het tussenliggende paginasegment adventure :

Maak vervolgens de AEM pagina's die overeenkomen met elk van de SPA URL's waarvoor bewerkbare gebieden nodig zijn.

Deze twee AEM pagina's houden de respectieve-authored inhoud voor hun passende SPA routes. Als andere SPA routes auteursrecht vereisen, moeten de nieuwe AEMPagina's bij hun SPA URL onder de Verre de wortelpagina van SPA pagina (/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 SPA component, die tot een editable container leiden.

De SPA 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 AEM pagina 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 adventure detailroute die geen in kaart gebrachte AEM Pagina heeft, is er geen auteursbaarheid op die routeinstantie. Om auteursrecht op deze pagina's toe te laten, maak eenvoudig een AEM Pagina met de passende naam onder de pagina van het Vontuur!

Gefeliciteerd!

Gefeliciteerd! U hebt authoring vermogen toegevoegd aan dynamische routes in de SPA!

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