Komma igång med AEM för PWA Studio

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. Det beror på att PWA Studio fungerar med en enda Adobe Commerce GraphQL-slutpunkt.

Arkitektur

Konfigurera PWA Studio

Följ Adobe Commerce PWA Studio dokumentation för att konfigurera din PWA Studio-app.

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

1. Checka ut databasen

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

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

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

     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:

   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 Extensibility Framework Dokumentation för PWA Studio.

5. Apollo-klienten förväntar sig den AEM GraphQL-slutpunkten vid <https://pwa-studio/endpoint.js>. Om du vill mappa slutpunkten till den här platsen måste du anpassa UPWARD-konfigurationen för ditt PWA Studio-program: a. Lägg till variabeln AEM_CFM_GRAPHQL till pwa-root/.env och anpassa 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

Följ AEM Content Fragments dokumentation 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)

  Ställ in den tillåtna origin-egenskapen på 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 har vi förberett några innehållsfragmentmodeller och data via ett innehållspaket. Dessa fungerar bra tillsammans med React Components som medföljer PWA Studio.

Användning

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).
• Vilken metod som passar bäst för dig beror också i hög grad på hur du levererar PWA Studio till slutanvändaren.

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

Blogg

Visa blogginlägg baserat på vissa Content Fragment-modeller. 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. Se GitHub för mer information.

PDP-berikning

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

Resurser för Business.Adobe.com