Prise en main d’AEM Extension for PWA Studio

PWA Studio s’intègre de manière transparente à Adobe Commerce par le biais de GraphQL. Il offre des options illimitées pour créer des storefronts innovants et attrayants et d’autres expériences numériques.

Les fragments de contenu sont des éléments de contenu dotés d’une structure prédéfinie qui leur permettent d’être utilisés sans interface à l’aide de GraphQL en tant qu’API dans différents formats (par exemple, JSON, Markdown) et rendus indépendamment. Les fragments de contenu incluent tous les types de données et champs requis par GraphQL pour s’assurer que votre application ne demande que les éléments disponibles et reçoit les éléments attendus. La flexibilité qu’ils offrent en termes de structure les rend parfaitement utilisables à plusieurs emplacements et sur plusieurs canaux.

La conception de la structure dont vous avez besoin est simple avec l’éditeur de modèle de fragment de contenu d’Adobe Experience Manager. Le principal défi de l’intégration des fragments de contenu Adobe Experience Manager (ou de toute autre donnée) à votre application de PWA Studio consiste à récupérer des données à partir de plusieurs points d’entrée GraphQL. En effet, PWA Studio fonctionne avec un seul point d’entrée GraphQL de Commerce Adobe prêt à l’emploi.

Architecture

Architecture sans tête PWA

Configuration du PWA Studio

Suivez la documentation du PWA Studio Adobe pour configurer votre application de PWA Studio.

Pour connecter PWA Studio au point d’entrée GraphQL d’AEM, vous pouvez utiliser l’extension AEM pour PWA Studio.

  1. Extraction du référentiel

  2. Dans votre application de PWA Studio, ajoutez l’extension en tant que dépendance de développement.

    yarn add --dev file:{path-to-extension}/extension
    
  3. Ajoutez le wrapper Apollo Link à votre application de PWA Studio. Dans pwa-root/src/index.js, apportez les modifications suivantes :

      import { linkWrapper } from '@adobe/pwa-studio-aem-cfm-blog-extension';
    
    // ...
    
    <Adapter apiBase={apiBase} apollo={{ link: linkWrapper(apolloLink) }} store={store}>
    

    Vous trouverez plus d’informations sur la personnalisation du client Apollo dans linkWrapper.js.

  4. Pour étendre le composant de navigation avec une entrée Blog, ajoutez les adaptions suivantes à pwa-root/local-intercept.js :

    const addBlogToNavigation = require('@adobe/pwa-studio-aem-cfm-blog-extension/src/addBlogToNavigation');
    
    function localIntercept(targets) {
        addBlogToNavigation(targets);
    }    
    

    Vous trouverez plus d’informations sur la personnalisation du composant Navigation dans addBlogToNavigation.js et dans la documentation Extensibility Framework de PWA Studio.

  5. Le client Apollo s’attend à ce que le point d’entrée GraphQL AEM soit à https://pwa-studio/endpoint.js. Pour mapper le point de terminaison à cet emplacement, vous devez personnaliser la configuration UPWARD de votre application de PWA Studio :
    a. Ajoutez la variable AEM_CFM_GRAPHQL à pwa-root/.env et adaptez-la pour qu’elle pointe vers votre point d’entrée GraphQL de fragments de contenu AEM.

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

    b. Ajoutez un résolveur de proxy à votre configuration UPWARD. Voici un exemple de configuration UPWARD :

   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

Configuration des AEM

Consultez la documentation des fragments de contenu AEM pour configurer un point d’entrée GraphQL pour votre projet AEM. De plus, dans votre projet AEM, ajoutez les configurations suivantes pour permettre à votre application PWA Studio d’accéder au point d’entrée GraphQL :

  • Adobe de la stratégie de partage des ressources cross-origin Granite (com.adobe.granite.cors.impl.CORSPolicyImpl)

    Définissez la propriété allowedorigin sur le nom d’hôte complet de votre application de PWA.

    Exemple: https://pwa-studio-test-vflyn.local.pwadev:9366

  • Filtre de référent Apache Sling (org.apache.sling.security.impl.ReferrerFilter.cfg.json)

    Définissez la propriété allow.hosts sur le nom d’hôte de votre application de PWA.

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

Vous trouverez des exemples complets des deux configurations ici : 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.

Pour présenter le point d’entrée GraphQL, nous avons préparé quelques exemples de données et de modèles de fragments de contenu via un module de contenu. Ces composants fonctionnent bien avec les composants React fournis avec l’extension de PWA Studio.

Utilisation

Cette extension est considérée comme un exemple d’implémentation de la connexion d’une application de PWA Studio avec AEM pour récupérer et effectuer le rendu du contenu via GraphQL.

En fonction de votre cas d’utilisation, vous souhaitez créer vos propres modèles de fragment de contenu personnalisés, qui génèrent un schéma GraphQL personnalisé qui peut ensuite être utilisé par vos propres composants React.

Les configurations de production peuvent varier sous plusieurs aspects.

  • Vous pouvez disposer d’un point d’entrée GraphQL fédéré unique qui combine des données GraphQL AEM et Magento au lieu de personnaliser le client Apollo.
  • Votre application de PWA Studio peut utiliser directement l’URL AEM point d’entrée GraphQL, sans proxy avec UPWARD. Le proxy peut également être déplacé vers une autre couche (par exemple, CDN).
  • L’approche qui vous convient le mieux dépend également de la manière dont vous diffusez l’application de PWA Studio à l’utilisateur final.

Cette extension est fournie avec deux exemples.

Blog

Affichez les publications de blog en fonction de certains modèles de fragments de contenu. Il contient en outre des exemples de configuration du client Apollo pour qu’il fonctionne avec le point d’entrée GraphQL AEM et d’extension du composant de navigation dans PWA Studio. Voir GitHub pour plus d’informations.

Enrichissement PDP

Permet aux marketeurs d’enrichir facilement les PDP avec du contenu supplémentaire qui est géré en tant que fragments de contenu. Voir GitHub pour plus d’informations.

Sur cette page