开箱即用地,PWA Studio通过GraphQL与Adobe Commerce无缝集成,为创建创新且引人入胜的店面和其他数字体验提供了无限的选项。
内容片段是具有预定义结构的内容片段,允许使用GraphQL作为API以不同格式(例如JSON、Markdown)进行无头使用并独立渲染。 内容片段包含GraphQL所需的所有数据类型和字段,以确保您的应用程序仅请求可用内容并接收预期内容。 它们在结构方面提供的灵活性使其非常适合在多个位置和多个渠道中使用。
在Adobe Experience Manager中使用内容片段模型编辑器,可以轻松设计所需的结构。 将Adobe Experience Manager内容片段(或任何其他数据)与PWA Studio应用程序集成的主要挑战是从多个GraphQL端点获取数据。 这是因为,PWA Studio可开箱即用于单个Adobe Commerce GraphQL端点。
关注Adobe Commerce PWA Studio文档 来设置PWA Studio应用程序。
要将PWA Studio与AEM的GraphQL端点连接,您可以使用 AEM扩展for PWA Studio.
签出存储库
在PWA Studio应用程序中,将该扩展添加为开发依赖项。
yarn add --dev file:{path-to-extension}/extension
将Apollo Link包装器添加到您的PWA Studio应用程序。 在pwa-root/src/index.js中,进行以下更改:
import { linkWrapper } from '@adobe/pwa-studio-aem-cfm-blog-extension';
// ...
<Adapter apiBase={apiBase} apollo={{ link: linkWrapper(apolloLink) }} store={store}>
您可以在 linkWrapper.js.
要使用博客条目扩展导航组件,请将以下适配添加到pwa-root/local-intercept.js :
const addBlogToNavigation = require('@adobe/pwa-studio-aem-cfm-blog-extension/src/addBlogToNavigation');
function localIntercept(targets) {
addBlogToNavigation(targets);
}
您可以在 addBlogToNavigation.js 和 扩展性框架 PWA Studio文档。
Apollo客户端将在以下位置获得AEM GraphQL端点: <https://pwa-studio/endpoint.js>
. 要将端点映射到此位置,您需要自定义PWA Studio应用程序的UPPRAD配置:a.将AEM_CFM_GRAPHQL变量添加到pwa-root/.env,并调整该变量以指向您的AEM内容片段GraphQL端点。
示例: AEM_CFM_GRAPHQL=<http://localhost:4503/content/graphql/global>
b.将代理解析程序添加到UPPRAD配置。 向上配置示例可能如下所示:
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内容片段文档,为AEM项目设置GraphQL端点。 此外,在AEM项目中,添加以下配置,以允许PWA Studio应用程序访问GraphQL端点:
AdobeGranite跨源资源共享策略(com.adobe.granite.cors.impl.CORSPolicyImpl)
将允许的源属性设置为PWA应用程序的完整主机名。
示例: <https://pwa-studio-test-vflyn.local.pwadev:9366>
Apache Sling反向链接过滤器(org.apache.sling.security.impl.ReferrerFilter.cfg.json)
将allow.hosts属性设置为PWA应用程序的主机名。
示例: pwa-studio-test-vflyn.local.pwadev
您可以在此处找到两种配置的完整示例: 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.
为了展示GraphQL端点,我们通过内容包准备了一些示例内容片段模型和数据。 这些功能与随PWA Studio扩展提供的React组件可以很好地协同工作。
此扩展被视为如何将PWA Studio应用程序与AEM连接以通过GraphQL检索和渲染内容的示例实施。
根据您的用例,您需要创建自己的自定义内容片段模型,这些模型会生成一个自定义GraphQL模式,然后由您自己的React组件使用该模式。
生产设置可以在多个方面有所不同。
此扩展包含两个示例。
根据某些内容片段模型显示博客帖子。 此外,它还包含如何配置Apollo客户端以与AEM GraphQL端点一起使用以及如何在PWA Studio中扩展导航组件的示例。 请参阅 GitHub 以了解更多详细信息。
使营销人员能够通过作为内容片段管理的其他内容轻松扩充PDP。 请参阅 GitHub 以了解更多详细信息。