PWA Studi si integra perfettamente con Adobe Commerce tramite GraphQL, offrendo opzioni illimitate per la creazione di vetrine innovative e coinvolgenti e di altre esperienze digitali.
I frammenti di contenuto sono parti di contenuto con una struttura predefinita che consente loro di essere utilizzate in modo headless utilizzando GraphQL come API in diversi formati (ad esempio JSON, Markdown) ed eseguirne il rendering indipendente. I frammenti di contenuto includono tutti i tipi di dati e i campi necessari per GraphQL per garantire che l’applicazione richieda solo ciò che è disponibile e riceva ciò che è previsto. La flessibilità che offrono in termini di struttura li rende perfetti per l'utilizzo in più posizioni e su più canali.
La progettazione della struttura necessaria è semplice grazie all’Editor modelli di frammento di contenuto in Adobe Experience Manager. La sfida principale per integrare frammenti di contenuto Adobe Experience Manager (o qualsiasi altro dato) con l’applicazione PWA Studi è rappresentata dal recupero di dati da più endpoint GraphQL. Questo perché PWA Studi funziona con un singolo endpoint GraphQL di Adobe Commerce.
Segui Adobe Commerce Documentazione di PWA Studi per configurare l’app PWA Studi.
Per collegare PWA Studi all’endpoint GraphQL di AEM, è possibile utilizzare la variabile Estensione AEM per PWA Studi.
Consulta il repository
Nell’applicazione PWA Studi, aggiungi l’estensione come dipendenza di sviluppo.
yarn add --dev file:{path-to-extension}/extension
Aggiungi il wrapper Apollo Link all’applicazione PWA Studi. In pwa-root/src/index.js, apporta le seguenti modifiche:
import { linkWrapper } from '@adobe/pwa-studio-aem-cfm-blog-extension';
// ...
<Adapter apiBase={apiBase} apollo={{ link: linkWrapper(apolloLink) }} store={store}>
Puoi trovare ulteriori dettagli sulla personalizzazione del client Apollo in linkWrapper.js.
Per estendere il componente di navigazione con una voce Blog, aggiungi i seguenti adattamenti a pwa-root/local-intercept.js:
const addBlogToNavigation = require('@adobe/pwa-studio-aem-cfm-blog-extension/src/addBlogToNavigation');
function localIntercept(targets) {
addBlogToNavigation(targets);
}
Per ulteriori informazioni sulla personalizzazione del componente Navigazione in addBlogToNavigation.js e Framework di estendibilità documentazione di PWA Studi.
Il client Apollo si aspetta l’endpoint GraphQL AEM in https://pwa-studio/endpoint.js. Per mappare l’endpoint a questa posizione, è necessario personalizzare la configurazione UPWARD dell’applicazione PWA Studi: a) Aggiungi la variabile AEM_CFM_GRAPHQL a pwa-root/.env e adattala per puntare all’endpoint GraphQL dei frammenti di contenuto AEM.
Esempio: AEM_CFM_GRAPHQL=http://localhost:4503/content/graphql/global
b) Aggiungi un risolutore proxy alla tua configurazione UPWARD. Un esempio di configurazione UPWARD potrebbe essere il seguente:
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
Per impostare un endpoint GraphQL per il progetto AEM, segui la documentazione AEM Frammenti di contenuto . Inoltre, nel progetto AEM, aggiungi le seguenti configurazioni per consentire all’applicazione PWA Studi di accedere all’endpoint GraphQL:
Criterio per la condivisione delle risorse tra le origini di Adobe Granite (com.adobe.granite.cors.impl.CORSPolicyImpl)
Imposta la proprietà allowedorigin sull’hostname completo dell’applicazione PWA.
Filtro di riferimento Apache Sling (org.apache.sling.security.impl.ReferrerFilter.cfg.json)
Imposta la proprietà allow.hosts sul nome host dell'applicazione PWA.
Esempio: pwa-studio-test-vflyn.local.pwadev
Puoi trovare esempi completi di entrambe le configurazioni qui: 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.
Per mostrare l’endpoint GraphQL, abbiamo preparato alcuni modelli e dati di frammenti di contenuto di esempio tramite un pacchetto di contenuti. Questi funzionano bene insieme ai componenti React forniti con l’estensione PWA Studi.
Questa estensione è considerata un esempio di implementazione di come collegare un’applicazione PWA Studi con AEM per recuperare ed eseguire il rendering del contenuto tramite GraphQL.
A seconda del caso d’uso, vuoi creare modelli di frammenti di contenuto personalizzati che generano uno schema GraphQL personalizzato che può essere utilizzato dai tuoi componenti React.
Le impostazioni di produzione possono variare in diversi aspetti.
Questa estensione include due esempi.
Visualizza i post di blog in base ad alcuni modelli di frammenti di contenuto. Inoltre, contiene esempi su come configurare il client Apollo in modo che funzioni con l’endpoint GraphQL AEM e come estendere il componente di navigazione in PWA Studi. Vedi GitHub per ulteriori dettagli.
Consente agli addetti al marketing di arricchire facilmente i PDP con contenuti aggiuntivi gestiti come frammenti di contenuto. Vedi GitHub per ulteriori dettagli.