[官方文件](https://help.sap.com/viewer/e1391e5265574bfbb56ca4c0573ba1dc/v2005/en-US/05afb9877f884026ac9a98433f4be8bf.html)

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](https://help.sap.com/viewer/e1391e5265574bfbb56ca4c0573ba1dc/v2005/en-US/622cebcb444b42e18de2147775430b9d.html).

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

對於使用 yacceleratorstorefront 或 yb2bacceleratorstorefront EXTENSION 建立的店面，您可以透過啟用 smarteditaddon AddOn 使用 SmartEdit 編輯店面。 此外掛確保可以使用 SmartEdit Web 應用程式編輯基於 coreaccelerator 的店面的內容。

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

![](https://img-blog.csdnimg.cn/img_convert/d748c28ace37dcce5545a5f788ba07f7.png)

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

![](https://img-blog.csdnimg.cn/img_convert/533424b844574b1c914c5bbd5b00daf8.png)

# 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（例如網站）和一組定義附加功能的模組。

具體技術設計可以看[這裡](https://help.sap.com/viewer/e1391e5265574bfbb56ca4c0573ba1dc/v2005/en-US/b13701dcd2d44e5c97a36732167405a0.html)。

登入 smartedit，選擇 site 和對應的 catalog：
![](https://img-blog.csdnimg.cn/img_convert/bc6c732c4a208aa0c6d12d800a7e51e9.png)

點 homepage：
![](https://img-blog.csdnimg.cn/img_convert/842f076e68e97b731201721ae62ff943.png)

找到這個 homepage：
![](https://img-blog.csdnimg.cn/img_convert/88378ea4cb19b6c40ece5f925089c13e.png)

編輯：
![](https://img-blog.csdnimg.cn/img_convert/2beda2a49dca324a35ef7f8e4e2774d0.png)

page label 就是 url：
![](https://img-blog.csdnimg.cn/img_convert/1d2b9f9a000e11dcf4747e382b45962d.png)

# 如何建立新的頁面

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

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

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

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

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

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

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

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

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

您可以基於單個主頁面建立多個變體頁面。

您必須向變體頁面新增至少一個限制。

SAP 建議您將頁面新增到目錄的暫存版本，以便您以後可以將更改與目錄的線上版本同步。

![](https://img-blog.csdnimg.cn/img_convert/46a1efa246697dbf2070afda3460a320.png)

![](https://img-blog.csdnimg.cn/img_convert/747ef00417f618415d1ee54ae725d516.png)

選擇一個 template：
![](https://img-blog.csdnimg.cn/img_convert/dc84e659816f7ec86b43113d101fa32d.png)

型別選擇為 primary：
![](https://img-blog.csdnimg.cn/img_convert/e48ceaadce52b99ec3c8513e44607a83.png)

Content Page 1 Template 的 content slots 可以在 Backoffice 裡檢視：
![](https://img-blog.csdnimg.cn/img_convert/221bc1cc5b20ee3f5bb37c4fe857e474.png)

![](https://img-blog.csdnimg.cn/img_convert/2c3fce787640b20b4285753fc841d29c.png)

建立完畢後，狀態為 draft：
![](https://img-blog.csdnimg.cn/img_convert/c582eb10035d894d013ac1692aad3b5f.png)

![](https://img-blog.csdnimg.cn/img_convert/5056a1142328680e3b01409bc975fbd7.png)

點了 Sync 之後報錯：

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

![](https://img-blog.csdnimg.cn/img_convert/7628b735884b8ee9b59f6156a8e597e5.png)

建立完之後：

![](https://img-blog.csdnimg.cn/img_convert/5cd989f55b8282f388840f5502bbb788.png)

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

page draft status：
![](https://img-blog.csdnimg.cn/img_convert/e5285492924dd5da3018abd6d5ceb505.png)

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

![](https://img-blog.csdnimg.cn/img_convert/1821d86eb4c495178dbb3dfe4a7920d3.png)

> To sync, update page status to Ready to Sync

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

![](https://img-blog.csdnimg.cn/img_convert/653197b393ab2b254ed9aea07f96de6f.png)

這涉及到 smartEdit 裡的許可權管理。

SAP Commerce Cloud SmartEdit 學習筆記

相關文章