Komma igång med AEM för PWA Studio getting-started-pwa
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 architecture
Konfigurera PWA Studio setup-pwa
Följ Adobe Commerce PWA Studio-dokumentationen för att konfigurera din PWA Studio-app.
Om du vill ansluta PWA Studio till GraphQL-slutpunkten för AEM kan du använda AEM-tillägget för PWA Studio.
-
Checka ut databasen
-
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 -
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.
-
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.
-
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. Lägg till variabeln AEM_CFM_GRAPHQL i pwa-root/.env och anpassa den så att den pekar på AEM Content Fragments GraphQL slutpunkt.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 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 finns det några färdiga modeller och data för innehållsfragment via ett innehållspaket. Dessa fungerar bra 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).
- Vilken metod som passar bäst för dig beror också i hög grad på hur du levererar PWA Studio till anvä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.