DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurs om AEM Headless

Dynamiska vägar och redigerbara komponenter

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Nybörjare
  • Utvecklare

I det här kapitlet aktiverar vi två dynamiska Adventure Detail-vägar som stöder redigerbara komponenter: Bali Surf Camp och Beervana i Portland.

Dynamiska vägar och redigerbara komponenter

Rutten Adventure Detail SPA definieras som /adventure/:slug där slug är en unik identifieraregenskap i Adventure Content Fragment.

Mappa SPA URL:er till AEM sidor

I de föregående två kapitlen mappades redigerbart komponentinnehåll från SPA hemvy till motsvarande SPA i AEM /content/wknd-app/us/en/.

Att definiera mappning för redigerbara komponenter för de SPA dynamiska vägarna liknar varandra, men vi måste skapa ett 1:1-mappningsschema mellan instanser av flödet och AEM sidor.

I den här självstudiekursen tar vi namnet på WKND Adventure Content Fragment, som är det sista segmentet i sökvägen, och mappar det till en enkel sökväg under /content/wknd-app/us/en/adventure.

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

På grundval av den här mappningen måste vi skapa två nya AEM sidor:

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

SPA

Mappningen för begäranden som lämnar SPA konfigureras via konfigurationen setupProxy som görs i Bootstrap i SPA.

SPA Editor-mappning

Mappningen för SPA begäranden när SPA öppnas via AEM SPA Editor konfigureras via konfigurationen för delningsmappningar i Konfigurera AEM.

Skapa innehållssidor i AEM

Skapa först mellanliggande sidsegment adventure:

  1. Logga in på AEM författare

  2. Navigera till Webbplatser > WKND-app > oss > en > WKND-appens startsida

    • Den här AEM är mappad som SPA rot, så här börjar vi skapa den AEM sidstrukturen för andra SPA.

  3. Tryck på Skapa och välj Sida

  4. Välj mallen SPA och tryck på Nästa

  5. Fyll i Sidegenskaper

    • Titel: Äventyr
    • Namn: adventure
      • Det här värdet definierar AEM sidas URL och måste därför matcha SPA ruttsegment.

  6. Tryck på Klar

Skapa sedan AEM sidor som motsvarar var och en av de SPA URL:er som kräver redigerbara områden.

  1. Navigera till den nya sidan Adventure i Webbplatsadministratören

  2. Tryck på Skapa och välj Sida

  3. Välj mallen SPA och tryck på Nästa

  4. Fyll i Sidegenskaper

    • Titel: Bali Surf Camp
    • Namn: bali-surf-camp
      • Det här värdet definierar AEM sidas URL och måste därför matcha SPA rutts sista segment

  5. Tryck på Klar

  6. Upprepa steg 3-6 för att skapa sidan Beervana i Portland med:

    • Titel: Beervana i Portland
    • Namn: beervana-in-portland
      • Det här värdet definierar AEM sidas URL och måste därför matcha SPA rutts sista segment

Dessa två AEM sidor innehåller det innehåll som har skapats för respektive SPA. Om andra SPA kräver redigering måste nya AEM sidor skapas på SPA URL-adressen under SPA fjärrsidans rotsida (/content/wknd-app/us/en/home) i AEM.

Uppdatera WKND-appen

Låt oss placera komponenten <ResponsiveGrid...> som skapades i det sista kapitlet i vår AdventureDetail SPA-komponent och skapa en redigerbar behållare.

Placera SPA för ResponsiveGrid

Om du placerar <ResponsiveGrid...> i komponenten AdventureDetail skapas en redigerbar behållare i den vägen. Tricket är att eftersom flera vägar använder komponenten AdventureDetail för att återge, måste vi justera attributet <ResponsiveGrid...>'s pagePath dynamiskt. pagePath måste härledas till att peka på motsvarande AEM, baserat på äventyret som flödesinstansen visar.

  1. Öppna och redigera react-app-/src/components/AdventureDetail.js

  2. Importera komponenten ResponsiveGrid och placera den ovanför komponenten <h2>Itinerary</h2>.

  3. Ange följande attribut för komponenten <ResponsiveGrid...>. Observera att attributet pagePath lägger till den aktuella slug som mappar till äventyrssidan enligt mappningen som definieras ovan.

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

    Detta instruerar komponenten ResponsiveGrid att hämta sitt innehåll från den AEM resursen:

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

Uppdatera AdventureDetail.js med följande rader:

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

Filen AdventureDetail.js ska se ut så här:

AdventureDetail.js

Skapa behållaren i AEM

När <ResponsiveGrid...> är på plats och dess pagePath dynamiskt anges baserat på det äventyr som återges, försöker vi att skapa innehåll i den.

  1. Logga in på AEM författare

  2. Navigera till Sites > WKND App > us > en

  3. Redigera WKND-appens startsida

    • Navigera till vägen Bali Surf Camp i SPA för att redigera den

  4. Välj Förhandsgranska i lägesväljaren i det övre högra hörnet

  5. Tryck på Bali Surf Camp -kortet i SPA för att navigera till dess väg

  6. Välj Redigera i lägesväljaren

  7. Leta reda på det redigerbara området Layoutbehållare precis ovanför Intervär

  8. Öppna sidredigerarens sidfält och välj vyn Komponenter

  9. Dra några av de aktiverade komponenterna till layoutbehållaren

    • Bild
    • Text
    • Titel

    Och skapa marknadsföringsmaterial. Det skulle kunna se ut ungefär så här:

    Bali Adventure Detail Authoring

  10. Förhandsgranska dina ändringar i AEM Page Editor

  11. Uppdatera WKND-appen som körs lokalt på http://localhost:3000, navigera till Bali Surf Camp för att se de redigerade ändringarna!

    SPA på fjärrkontrollen

När du navigerar till en äventyrsinformationsväg som inte har någon mappad AEM finns det ingen redigeringsmöjlighet för den flödesinstansen. Om du vill aktivera redigering på de här sidorna skapar du bara en AEM sida med det matchande namnet på sidan Adventure!

Grattis!

Grattis! Du har lagt till redigeringsmöjligheter för dynamiska vägar i SPA!

  • AEM React Editable Components ResponsiveGrid-komponent har lagts till på en dynamisk väg
  • Skapade AEM sidor med stöd för utveckling av två specifika rutter i SPA (Bali Surf Camp och Beervana i Portland)
  • Skapat innehåll på den dynamiska Bali Surf Camp-vägen!

Du har nu gått igenom de första stegen i hur AEM kan användas för att lägga till specifika redigerbara områden i en SPA.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4