官方文檔

SmartEdit 是一個可插拔的 JavaScript 框架，附帶一個 UI，使開發人員能夠管理現有的網頁。

SmartEdit 生態系統由共同提供 SmartEdit 產品的 modules 和 extensions 組成。

SmartEdit 是 SmartEdit 模塊中一個前端驅動的可擴展應用程序。 CMS REST 調用的 SAP Commerce Cloud 實現是 WCMS 模塊的一部分。 SmartEdit 的所有前端擴展 SmartEdit 都需要 npm-ancillary modules 用于其構建生命周期。

您必須安裝 smarteditaddon AddOn 才能使用 SmartEdit 編輯 SAP Commerce Cloud Accelerator 店面。 smarteditaddon 插件在任何基于 coreaccelerator 的店面中實現 SmartEdit contract.

You must configure your storefront so that you can edit it using SmartEdit. SAP provides the SmartEdit Contract for this purpose. The SmartEdit framework is designed to work on any storefront, SAP Commerce Cloud Accelerator or third party, that implements the SmartEdit Contract. Once you have implemented this contract, the SmartEdit web application will provide you with the necessary hooks to enhance the customer experience.

If you use an SAP Accelerator storefront, the smarteditaddon AddOn implements the conditions of the contract so you don’t have to.

SmartEdit 是一個用于管理店面內容的 Web 應用程序。 如果店面遵守 SmartEdit 店面設計 contract，則該網站的店面可以由 SmartEdit 進行編輯。

對于使用 yacceleratorstorefront 或 yb2bacceleratorstorefront EXTENSION 創建的店面，您可以通過啟用 smarteditaddon AddOn 使用 SmartEdit 編輯店面。 此插件確保可以使用 SmartEdit Web 應用程序編輯基于 coreaccelerator 的店面的內容。

cx-for-spa recipe 里是包含了 SmartEdit：

當允許使用 SmartEdit Web 應用程序編輯店面時，各種菜單和操作將顯示在店面頁面內容的頂部。 頁面內容可以根據多種條件而變化，例如站點、內容目錄、內容目錄版本、語言以及日期和時間。 這些變量中的每一個都構成了用戶的體驗上下文。 SmartEdit 使用 previewwebservices extension提供的 Preview API 將店面加載到指定的體驗上下文中。

SmartEdit Architecture

SmartEdit 架構可以分為兩個部分：前端和后端。如下：

• 前端：前端由 smartedit 和 cmssmartedit 擴展組成。這些擴展是使用 AngularJS 框架用 JavaScript 編寫的。為了管理基于 JavaScript 的擴展的構建生命周期，即清理、構建、打包、縮小或美化代碼，需要一些 SAP Commerce Cloud Platform 默認不提供的庫。 SmartEdit 使用 npmancillary 擴展來存儲和組織所需的庫。

• 后端：后端由 smarteditwebservices、cmswebservices、cmssmarteditwebservices、cmsfacades、cms2 和 cms2lib 擴展組成。這些擴展是使用 Spring 框架在 Java 中構建的。
  前端使用 RESTful API 與后端通信。與 CMS 相關的 REST API 在 smarteditwebservices、cmssmarteditwebservices 和 cmswebservices 擴展中定義。 CMS API 使用的業務邏輯駐留在 cmsfacades 擴展中，該擴展使用 cms2 和 cms2lib 擴展中可用的 CMS 服務。

要使用 SmartEdit Web 應用程序，用戶必須輸入有效的用戶名和密碼才能登錄。如果用戶有效，則將用戶憑據發送到授權服務器并返回 OAuth 令牌。 SAP Commerce Cloud Platform 支持此授權功能。 同樣，所有 CMS API 都受到保護，并要求在請求標頭中提供適當的授權令牌。

SmartEdit 框架是一個以 UI 為中心的業務工具框架，允許用戶以視覺增強的方式編輯更改。 它是一個輕量級 AngularJS JavaScript 應用程序，基于 SAP Commerce Cloud 提供的 UI（例如網站）和一組定義附加功能的模塊。

具體技術設計可以看這里。

登錄 smartedit，選擇 site 和對應的 catalog：

點 homepage：

找到這個 homepage：

編輯：

page label 就是 url：

如何創建新的頁面

SmartEdit 提供了一個直觀的向導，您可以使用它為內容目錄創建類別、內容、電子郵件和產品頁面。您還可以向頁面添加限制，以指定在何種條件下向客戶顯示頁面。

SmartEdit 提供了一個直觀的向導來幫助您為內容目錄創建頁面。您可以創建類別、內容、電子郵件和產品頁面。創建頁面時，您可以選擇創建主頁面或變體頁面。

primary page 是始終向所有用戶顯示的默認版本。您創建的所有變體頁面都基于主頁面。您無法為主頁分配限制。當不存在變體頁面或不存在與當前顯示條件匹配的變體頁面時，即顯示條件不滿足應用于現有的時間、用戶組、類別等限制規則時，顯示主頁面變體頁面。

變體頁面基于主頁面，但添加了限制。限制指定在何種條件下顯示變體頁面，例如當屬于特定組的用戶查看頁面時，或者當用戶在指定日期期間選擇頁面并且存在要在指定日期顯示的變體頁面時.您可以為變體頁面添加類別、時間、用戶組和其他限制。您可以添加到變體頁面的限制類型取決于頁面的類型。

創建頁面時，您應該注意以下事項：

(1) 如果主頁尚不存在，則您無法創建變體頁面。變體頁面必須基于主頁面。

(2) 您只能為 category 和 product 頁面類型創建一個主頁。

(3) 您可以為 content page 類型創建多個主頁面。

您只需要為內容頁面指定一個頁面標簽，并且它在內容目錄版本中必須是唯一的。您在主頁上指定了一個頁面標簽，它被所有關聯的變體頁面繼承。

您可以基于單個主頁面創建多個變體頁面。

您必須向變體頁面添加至少一個限制。

SAP 建議您將頁面添加到目錄的暫存版本，以便您以后可以將更改與目錄的在線版本同步。

選擇一個 template：

類型選擇為 primary：

Content Page 1 Template 的 content slots 可以在 Backoffice 里查看：

創建完畢后，狀態為 draft：

點了 Sync 之后報錯：

Items cannot be synched. One or more items haven’t been approved for publishing

創建完之后：

其實可以通過 impex 的方式，直接把 page 和 content slot 等定義，直接導入系統。

page draft status：

page 同步的前提條件是狀態改為 Ready to Sync:

To sync, update page status to Ready to Sync

注意下圖：我用 admin 登錄進去時是看不見這些的：

這涉及到 smartEdit 里的權限管理。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Commerce Cloud SmartEdit 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。