DokumentationAEM 6.5Användarhandbok

Komma igång med AEM för PWA Studio getting-started-pwa

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Gäller:
  • Experience Manager 6.5

Skapat för:

  • Administratör
  • Utvecklare

PWA Studio kan integreras smidigt med Adobe Commerce via GraphQL, vilket ger obegränsade möjligheter att skapa innovativa och engagerande butiker och andra digitala upplevelser.

Innehållsfragment är innehållsdelar med en fördefinierad struktur som gör att de kan konsumeras utan rubriker med GraphQL som API i olika format (till exempel JSON, Markdown) och oberoende rendering. Innehållsfragmenten innehåller alla datatyper och fält som krävs för att GraphQL ska vara säker på att ditt program bara begär det som är tillgängligt och får det som förväntas. Den flexibilitet de ger i form av hur de är upplagda gör dem perfekta att använda på flera platser och i flera kanaler.

Det är enkelt att utforma den struktur du behöver med Modellredigeraren för innehållsfragment i Adobe Experience Manager. Den största utmaningen att integrera Adobe Experience Manager Content Fragments (eller andra data) med ditt PWA Studio-program är att hämta data från flera GraphQL-slutpunkter. Orsaken är att PWA Studio fungerar med en enda Adobe Commerce GraphQL-slutpunkt.

Arkitektur architecture

PWA utan headless-arkitektur

Konfigurera PWA Studio setup-pwa

Följ dokumentationen för Adobe Commerce PWA Studio för att konfigurera ditt PWA Studio-program.

Om du vill ansluta PWA Studio till GraphQL-slutpunkten för AEM kan du använda AEM-tillägget för PWA Studio.

  1. Checka ut databasen

  2. I ditt PWA Studio-program lägger du till tillägget som ett utvecklingsberoende.

    code language-javascript 
    yarn add --dev file:{path-to-extension}/extension

  3. Lägg till Apollo Link-omslutningen i PWA Studio. Gör följande ändringar i pwa-root/src/index.js:

    code language-javascript 
      import { linkWrapper } from '@adobe/pwa-studio-aem-cfm-blog-extension';

// ...

<Adapter apiBase={apiBase} apollo={{ link: linkWrapper(apolloLink) }} store={store}>

    Mer information om anpassning av Apollo-klienten finns i linkWrapper.js.

  4. Om du vill utöka navigeringskomponenten med ett blogginlägg lägger du till följande tillägg i pwa-root/local-intercept.js:

    code language-javascript 
    const addBlogToNavigation = require('@adobe/pwa-studio-aem-cfm-blog-extension/src/addBlogToNavigation');

function localIntercept(targets) {
    addBlogToNavigation(targets);
}

    Mer information om anpassning av navigeringskomponenten finns i addBlogToNavigation.js och i dokumentationen för Extensibility Framework i PWA Studio.

  5. Apollo-klienten förväntar sig den AEM GraphQL-slutpunkten vid <https://pwa-studio/endpoint.js>. Anpassa UPWARD-konfigurationen för PWA Studio-programmet om du vill mappa slutpunkten till den här platsen:
    a. Om du vill pwa-root/.env lägger du till variabeln AEM_CFM_GRAPHQL och anpassar den så att den pekar på GraphQL-slutpunkten för AEM innehållsfragment.

    Exempel: AEM_CFM_GRAPHQL=http://localhost:4503/content/graphql/global

    b. Lägg till en proxymatchare i UPWARD-konfigurationen. Ett exempel på en UPWARD-konfiguration kan se ut så här:

   response:
     resolver: conditional
     when:
       - matches: request.url.pathname
         pattern: ^/endpoint.json(/|$)
         use: aemProxy
     default: veniaResponse

   aemProxy:
     resolver: proxy
     target: env.AEM_CFM_GRAPHQL
     ignoreSSLErrors: true

   status: response.status
   headers: response.headers
   body: response.body

AEM setup-aem

Följ dokumentationen för AEM innehållsfragment för att konfigurera en GraphQL-slutpunkt för ditt AEM. I ditt AEM lägger du till följande konfigurationer så att PWA Studio-programmet kan komma åt GraphQL-slutpunkten:

  • Resursdelningspolicy för korsursprung för Adobe (com.adobe.granite.cors.impl.CORSPolicyImpl)

    Ange egenskapen allowedorigin till det fullständiga värdnamnet för ditt PWA-program.

    Exempel: <https://pwa-studio-test-vflyn.local.pwadev:9366>

  • Apache Sling Referrer-filter (org.apache.sling.security.impl.ReferrerFilter.cfg.json)

    Ställ in egenskapen allow.hosts på värdnamnet för ditt PWA-program.

    Exempel: pwa-studio-test-vflyn.local.pwadev

Du hittar fullständiga exempel på båda konfigurationerna här: https://github.com/adobe/aem-pwa-studio-extensions/tree/master/aem-cfm-blog-extension/aem/config/src/main/content/jcr_root/apps/blog-demo/config.

För att visa GraphQL-slutpunkten förberedde Adobe några innehållsfragmentmodeller och data som exempel med hjälp av ett innehållspaket. Dessa delar fungerar tillsammans med React Components som medföljer PWA Studio.

Använda how-to-use

Det här tillägget är ett exempel på implementering av hur du ansluter ett PWA Studio-program med AEM för att hämta och återge innehåll via GraphQL.

Beroende på ditt sätt att arbeta vill du skapa egna modeller för innehållsfragment som resulterar i ett anpassat GraphQL-schema som sedan kan användas av dina egna React-komponenter.

Produktionsinställningarna kan variera i olika aspekter.

  • Du kan ha en enda federerad GraphQL-slutpunkt som kombinerar AEM- och Adobe Commerce GraphQL-data i stället för att anpassa Apollo-klienten.
  • Ditt PWA Studio-program kan använda AEM GraphQL-slutpunkts-URL direkt, utan någon proxy med UPWARD. Proxyservern kan också flyttas till ett annat lager (till exempel CDN).
  • Metoden passar bäst för dig och beror till stor del på hur du levererar PWA Studio-programmet till slutanvändaren.

Det här tillägget innehåller två exempel.

Blogg blog

Visa blogginlägg baserat på vissa innehållsfragmentmodeller. Dessutom innehåller det exempel på hur du konfigurerar Apollo-klienten så att den fungerar med AEM GraphQL-slutpunkt och hur du utökar navigeringskomponenten i PWA Studio. Mer information finns i GitHub.

PDP-berikning pdp-enrichment

Gör det möjligt för marknadsförare att enkelt utöka PDP:er med ytterligare innehåll som hanteras som innehållsfragment. Mer information finns i GitHub.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2