De forma predeterminada, PWA Studio se integra perfectamente con Adobe Commerce a través de GraphQL, proporcionando opciones ilimitadas para crear tiendas innovadoras y atractivas y otras experiencias digitales.
Los fragmentos de contenido son fragmentos de contenido con una estructura predefinida que les permite consumirse sin encabezado utilizando GraphQL como API en diferentes formatos (por ejemplo, JSON, Markdown) y procesarse de forma independiente. Los fragmentos de contenido incluyen todos los tipos de datos y campos necesarios para que GraphQL garantice que la aplicación solo solicita lo que está disponible y recibe lo que se espera. La flexibilidad que proporcionan en términos de cómo están estructurados los hace perfectos para usarlos en varias ubicaciones y en varios canales.
Diseñar la estructura que necesita es fácil con el Editor del modelo de fragmentos de contenido dentro de Adobe Experience Manager. El principal desafío para la integración de fragmentos de contenido de Adobe Experience Manager (o cualquier otro dato) con la aplicación del PWA Studio es recuperar datos de varios extremos de GraphQL. Esto se debe a que, de forma predeterminada, el PWA Studio funciona con un único extremo de Adobe Commerce GraphQL.
Siga el Adobe Commerce Documentación del PWA Studio para configurar la aplicación de PWA Studio.
Para conectar el PWA Studio con el extremo de GraphQL AEM de la, puede utilizar el AEM Extensión para PWA Studio.
Desproteger el repositorio
En la aplicación PWA Studio, agregue la extensión como dependencia de desarrollo.
yarn add --dev file:{path-to-extension}/extension
Añada el envoltorio Apollo Link a la aplicación de PWA Studio. En pwa-root/src/index.js, realice los siguientes cambios:
import { linkWrapper } from '@adobe/pwa-studio-aem-cfm-blog-extension';
// ...
<Adapter apiBase={apiBase} apollo={{ link: linkWrapper(apolloLink) }} store={store}>
Puede encontrar más detalles sobre la personalización del cliente Apollo en linkWrapper.js.
Para ampliar el componente de navegación con una entrada de blog, añada las siguientes adaptaciones a pwa-root/local-intercept.js:
const addBlogToNavigation = require('@adobe/pwa-studio-aem-cfm-blog-extension/src/addBlogToNavigation');
function localIntercept(targets) {
addBlogToNavigation(targets);
}
Puede encontrar más detalles sobre la personalización del componente Navegación en addBlogToNavigation.js y en el Marco de extensibilidad documentación del PWA Studio.
AEM El cliente Apollo espera el punto final de GraphQL de la en <https://pwa-studio/endpoint.js>
. Para asignar el extremo a esta ubicación, deberá personalizar la configuración UPWARD de la aplicación PWA Studio: a. AEM Añada la variable_CFM_GRAPHQL AEM a pwa-root/.env y adáptela para que apunte a su punto final de GraphQL Fragmentos de contenido de.
Ejemplo: AEM_CFM_GRAPHQL=<http://localhost:4503/content/graphql/global>
b. Añada una resolución proxy a la configuración UPWARD. Una configuración de muestra ASCENDENTE podría tener este aspecto:
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 Siga la documentación de Fragmentos de contenido de para configurar un punto final de GraphQL AEM para su proyecto de AppMeasurement. AEM Además, en el proyecto de, agregue las siguientes configuraciones para permitir que la aplicación de PWA Studio acceda al extremo de GraphQL:
Política de uso compartido de recursos de origen cruzado de Adobe Granite (com.adobe.granite.cors.impl.CORSPolicyImpl)
Establezca la propiedad allowedorigin en el nombre de host completo de la aplicación PWA.
Ejemplo: <https://pwa-studio-test-vflyn.local.pwadev:9366>
Filtro de referente de Apache Sling (org.apache.sling.security.impl.ReferrerFilter.cfg.json)
Establezca la propiedad allow.hosts en el nombre de host de la aplicación PWA.
Ejemplo: pwa-studio-test-vflyn.local.pwadev
Puede encontrar ejemplos completos de ambas configuraciones aquí: 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.
Para mostrar el extremo de GraphQL, hemos preparado algunos modelos de fragmentos de contenido de muestra y datos a través de un paquete de contenido. Estos funcionan bien junto con los componentes de React proporcionados con la extensión de PWA Studio.
Esta extensión se considera una implementación de ejemplo de cómo conectar una aplicación PWA Studio AEM con la aplicación para recuperar y procesar contenido a través de GraphQL.
Según el caso de uso, desea crear sus propios modelos de fragmento de contenido personalizados, que resultan en un esquema de GraphQL personalizado que luego pueden consumir sus propios componentes de React.
Las configuraciones de producción pueden variar en varios aspectos.
Esta extensión incluye dos ejemplos.
Mostrar publicaciones de blog basadas en algunos modelos de fragmentos de contenido. AEM Además, contiene ejemplos de cómo configurar el cliente Apollo para que funcione con el extremo de GraphQL de y cómo ampliar el componente de navegación en PWA Studio. Consulte GitHub para obtener más información.
Permite a los especialistas en marketing enriquecer fácilmente los PDP con contenido adicional que se administra como fragmentos de contenido. Consulte GitHub para obtener más información.