DocumentatieAEM as a Cloud ServiceHandboek

Aan de slag met AEM extensie voor PWA Studio

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:
  • Commerce Integration Framework

Gemaakt voor:

  • Beheerder

PWA Studio kan naadloos worden geïntegreerd met Adobe Commerce via GraphQL en biedt onbeperkte mogelijkheden voor het maken van innovatieve en boeiende winkels en andere digitale ervaringen.

Inhoudsfragmenten zijn stukken inhoud met een vooraf gedefinieerde structuur waarmee ze zonder kop kunnen worden gebruikt als API in verschillende indelingen (bijvoorbeeld JSON, Markdown) en onafhankelijk kunnen worden weergegeven. Inhoudsfragmenten omvatten alle gegevenstypen en velden die voor GraphQL zijn vereist. Uw toepassing vraagt dan alleen wat er beschikbaar is en ontvangt wat er wordt verwacht. De flexibiliteit die ze bieden in termen van de structuur ervan maakt ze perfect voor gebruik op meerdere locaties en via meerdere kanalen.

U kunt de gewenste structuur eenvoudig ontwerpen met de Content Fragment Model Editor in Adobe Experience Manager. De belangrijkste uitdaging om de Fragments van de Inhoud van Adobe Experience Manager (of om het even welke andere gegevens) met uw toepassing van de PWA Studio te integreren is het halen van gegevens van veelvoudige eindpunten van GraphQL. Dit komt doordat PWA Studio buiten het vak werkt met één Adobe Commerce GraphQL-eindpunt.

Architectuur

PWA headless architectuur

PWA Studio instellen

Volg de documentatie van de PWA Studio van Adobe Commerce 🔗 aan opstelling uw PWA Studio app.

Om PWA Studio met het eindpunt van GraphQL van AEM te verbinden, kunt u de AEM Uitbreiding voor PWA Studiogebruiken.

  1. Ontdek de opslagplaats

  2. Voeg de extensie toe als ontwikkelafhankelijkheid in de toepassing PWA Studio.

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

  3. Voeg de omslag van de Verbinding van Apollo aan uw toepassing van de PWA Studio toe. Breng de volgende wijzigingen aan in pwa-root/src/index.js:

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

// ...

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

    U kunt meer details op de aanpassing van de Cliënt van Apollo in linkWrapper.jsvinden.

  4. Als u de navigatiecomponent wilt uitbreiden met een blogbericht, voegt u de volgende aanpassingen toe aan pwa-root/local-intercept.js:

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

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

    U kunt meer details over de aanpassing van de component van de Navigatie in addBlogToNavigation.jsen in de documentatie van het Kader van de Uitbreidbaarheidvan PWA Studio vinden.

  5. De Apollo-client verwacht het eindpunt van AEM GraphQL op <https://pwa-studio/endpoint.js> . Om het eindpunt aan deze plaats in kaart te brengen, pas de configuratie UPWARD van uw toepassing van de PWA Studio aan:
    a. Voeg de variabele AEM_CFM_GRAPHQL toe aan pwa-root/.env en pas deze aan om naar het eindpunt van uw AEM Content Fragments GraphQL te wijzen.

    Voorbeeld: AEM_CFM_GRAPHQL=<http://localhost:4503/content/graphql/global>

    b. Voeg een proxyoplosser toe aan uw UPWARD-configuratie. Een voorbeeld-UPWARD-configuratie kan er als volgt uitzien:

   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 instellen

Volg de documentatie van de Fragmenten van de Inhoud van de AEM aan opstelling een eindpunt van GraphQL voor uw AEM project. Ook, in uw AEM project, voeg de volgende configuraties toe om uw toepassing van de PWA Studio toe te staan om tot het eindpunt van GraphQL toegang te hebben:

  • Beleid voor het delen van bronnen tussen verschillende bronnen van Adoben (com.adobe.granite.cors.impl.CORSPopolicyImpl)

    Stel de toegestane oorspronkelijke eigenschap in op de volledige hostnaam van de PWA-toepassing.

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

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

    Stel de eigenschap allow.hosts in op de hostnaam van uw PWA-toepassing.

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

Hier vindt u volledige voorbeelden van beide configuraties: 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 .

Als u het GraphQL-eindpunt wilt laten zien, hebt u een aantal voorbereide modellen en gegevens voor voorbeeldinhoudsfragmenten via een inhoudspakket. Deze werken goed samen met de React Componenten die van de uitbreiding van de PWA Studio worden voorzien.

Hoe wordt het gebruikt

Deze extensie wordt beschouwd als een voorbeeldimplementatie voor het tot stand brengen van een verbinding tussen een PWA Studio-toepassing en AEM om inhoud op te halen en weer te geven via GraphQL.

Afhankelijk van uw gebruiksscenario wilt u uw eigen aangepaste modellen voor inhoudsfragmenten maken die resulteren in een aangepast GraphQL-schema dat vervolgens door uw eigen React-componenten kan worden gebruikt.

Productie-instellingen kunnen in meerdere opzichten verschillen.

  • U kunt één gefederaliseerd GraphQL-eindpunt hebben, waarbij AEM- en Adobe Commerce GraphQL-gegevens worden gecombineerd in plaats van dat de Apollo-client wordt aangepast.
  • Uw toepassing van de PWA Studio kon het eindpunt URL van AEM GraphQL direct, zonder een volmacht met UPWARD gebruiken. De proxy kan ook naar een andere laag worden verplaatst (bijvoorbeeld CDN).
  • Welke benadering het beste voor u ook past hangt sterk af van hoe u de toepassing van de PWA Studio aan de gebruiker levert.

Deze extensie bevat twee voorbeelden.

Blog

Blogberichten weergeven op basis van bepaalde modellen van inhoudsfragmenten. Bovendien bevat het voorbeelden van hoe te om de cliënt van Apollo te vormen om met het eindpunt van AEM GraphQL te werken en hoe te om de navigatiecomponent in PWA Studio uit te breiden. Zie GitHubvoor meer details.

PDP-verrijking

Laat marketers toe om PDPs met extra inhoud gemakkelijk te verrijken die als Fragments van de Inhoud wordt beheerd. Zie GitHubvoor meer details.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab