將 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 專用用戶端具有多項優勢。請參閱 Use a SLAS Private Client (使用 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 頁面