将 Page Designer 与 PWA Kit 集成

使用 Page Designer，您可以为 Progressive Web App （PWA） Kit 站点创建可重用的页面类型和组件类型。使用 Business Manager 中的无代码可视化编辑器为您的站点设计、计划和发布 Page Designer 页面。当与 PWA Kit 站点集成时，Page Designer 可以使用 React 组件呈现动态响应式页面。

本指南介绍如何配置 PWA Kit，以便您的站点可以显示 Page Designer 页面。

在运行本教程中的命令之前，请将所有占位符替换为实际值。占位符的格式如 $PLACEHOLDER。

要将 Page Designer 与 PWA Kit 站点集成，请执行以下作：

• 使用以下任一实现方式构建站点：

  • 可组合网店（PWA Kit 版本 2.7.0 或更高版本）用于整个网站，使用 Retail React 应用模板
  • 分阶段无外设推出 （使用 Retail React 应用模板的Storefront Reference Architecture - SFRA 和 PWA Kit 版本 2.7.0 或更高版本）

• 创建或更新 SLAS 公共或私有客户端。按照 创建 SLAS 客户端 中的步骤作或使用 registerClient API 端点。

  • 在“范围 ”字段中，包括以下范围： sfcc.shopper-experience。

    与公共客户端相比，SLAS 专用客户端具有多项优势。请参阅使用 SLAS 私人客户端。

• 获取 SLAS 管理令牌。

• 在 Business Manager 中创建 Page Designer 页面。用 Page Designer 可视化编辑器创建页面

• 由于 PWA Kit 是解耦的 Web 应用，因此需要创建 Page Designer Internet Store Markup Language （ISML） 组件及其相应的 PWA Kit React 组件。
• 如果要在站点上使用的 ISML 组件在 Page Designer 中不存在，请在 Business Manager 中创建它们。请参阅 如何实现 Page Designer 组件。
• 有一些 PWA Kit React 组件与它们的 ISML 对应组件相匹配。请参阅 匹配 React 和 ISML 组件。如果没有匹配的 React 组件，你可以构建它。
• Business Manager 中的预览功能呈现 Storefront Reference Architecture （SFRA） ISML 组件。因此，React 站点的实际外观可能与预览版不同。若要更准确地预览 PWA Kit 网站，请使用 网店预览。

1. 在 PWA Kit 项目中，创建一个名为 app/pages/page-viewer/index.jsx 的文件，并添加此代码。

   该文件的目的是设置页面查看器以使用组件呈现 Page Designer 页面。此代码包括用于演示目的的示例组件。将代码中的组件替换为适用于站点的组件。此示例集成使用 @salesforce/commerce-sdk-react。

2. 在 PWA Kit 项目中，打开 app/routes.jsx 并添加导航到“”的路由。

   替换 $PAGE_ID 为您在 Business Manager 中为 Page Designer 页面定义的页面 ID。

3. 若要在本地启动 Web 服务器，请运行：

   npm start

4. 要查看以React.js呈现Page Designer页面，请转到

   `http：3000/page-viewer/$PAGE_ID'，并使用您在步骤 2 中标识的页面 ID。

   例如，如果您的页面 ID 是 123，请转至： http://localhost:3000/page-viewer/123。

这是具有匹配的 ISML 对应项的 React 组件列表。可以在 Page Designer GitHub Repo for PWA Kit 中找到 React 组件。

• GitHub: PWA Kit 的 Page Designer 存储库
• Salesforce 帮助： Page Designer 页面