官方文檔

SmartEdit 是一個(gè)可插拔的 JavaScript 框架，附帶一個(gè) UI，使開發(fā)人員能夠管理現(xiàn)有的網(wǎng)頁。

SmartEdit 生態(tài)系統(tǒng)由共同提供 SmartEdit 產(chǎn)品的 modules 和 extensions 組成。

SmartEdit 是 SmartEdit 模塊中一個(gè)前端驅(qū)動的可擴(kuò)展應(yīng)用程序。 CMS REST 調(diào)用的 SAP Commerce Cloud 實(shí)現(xiàn)是 WCMS 模塊的一部分。 SmartEdit 的所有前端擴(kuò)展 SmartEdit 都需要 npm-ancillary modules 用于其構(gòu)建生命周期。

您必須安裝 smarteditaddon AddOn 才能使用 SmartEdit 編輯 SAP Commerce Cloud Accelerator 店面。 smarteditaddon 插件在任何基于 coreaccelerator 的店面中實(shí)現(xiàn) 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 是一個(gè)用于管理店面內(nèi)容的 Web 應(yīng)用程序。 如果店面遵守 SmartEdit 店面設(shè)計(jì) contract，則該網(wǎng)站的店面可以由 SmartEdit 進(jìn)行編輯。

對于使用 yacceleratorstorefront 或 yb2bacceleratorstorefront EXTENSION 創(chuàng)建的店面，您可以通過啟用 smarteditaddon AddOn 使用 SmartEdit 編輯店面。 此插件確?？梢允褂?SmartEdit Web 應(yīng)用程序編輯基于 coreaccelerator 的店面的內(nèi)容。

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

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

SmartEdit Architecture

SmartEdit 架構(gòu)可以分為兩個(gè)部分：前端和后端。如下：

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

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

要使用 SmartEdit Web 應(yīng)用程序，用戶必須輸入有效的用戶名和密碼才能登錄。如果用戶有效，則將用戶憑據(jù)發(fā)送到授權(quán)服務(wù)器并返回 OAuth 令牌。 SAP Commerce Cloud Platform 支持此授權(quán)功能。 同樣，所有 CMS API 都受到保護(hù)，并要求在請求標(biāo)頭中提供適當(dāng)?shù)氖跈?quán)令牌。

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

具體技術(shù)設(shè)計(jì)可以看這里。

登錄 smartedit，選擇 site 和對應(yīng)的 catalog：

點(diǎn) homepage：

找到這個(gè) homepage：

編輯：

page label 就是 url：

如何創(chuàng)建新的頁面

SmartEdit 提供了一個(gè)直觀的向?qū)?#xff0c;您可以使用它為內(nèi)容目錄創(chuàng)建類別、內(nèi)容、電子郵件和產(chǎn)品頁面。您還可以向頁面添加限制，以指定在何種條件下向客戶顯示頁面。

SmartEdit 提供了一個(gè)直觀的向?qū)韼椭鸀閮?nèi)容目錄創(chuàng)建頁面。您可以創(chuàng)建類別、內(nèi)容、電子郵件和產(chǎn)品頁面。創(chuàng)建頁面時(shí)，您可以選擇創(chuàng)建主頁面或變體頁面。

primary page 是始終向所有用戶顯示的默認(rèn)版本。您創(chuàng)建的所有變體頁面都基于主頁面。您無法為主頁分配限制。當(dāng)不存在變體頁面或不存在與當(dāng)前顯示條件匹配的變體頁面時(shí)，即顯示條件不滿足應(yīng)用于現(xiàn)有的時(shí)間、用戶組、類別等限制規(guī)則時(shí)，顯示主頁面變體頁面。

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

創(chuàng)建頁面時(shí)，您應(yīng)該注意以下事項(xiàng)：

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

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

(3) 您可以為 content page 類型創(chuàng)建多個(gè)主頁面。

您只需要為內(nèi)容頁面指定一個(gè)頁面標(biāo)簽，并且它在內(nèi)容目錄版本中必須是唯一的。您在主頁上指定了一個(gè)頁面標(biāo)簽，它被所有關(guān)聯(lián)的變體頁面繼承。

您可以基于單個(gè)主頁面創(chuàng)建多個(gè)變體頁面。

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

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

選擇一個(gè) template：

類型選擇為 primary：

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

創(chuàng)建完畢后，狀態(tài)為 draft：

點(diǎn)了 Sync 之后報(bào)錯(cuò)：

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

創(chuàng)建完之后：

其實(shí)可以通過 impex 的方式，直接把 page 和 content slot 等定義，直接導(dǎo)入系統(tǒng)。

page draft status：

page 同步的前提條件是狀態(tài)改為 Ready to Sync:

To sync, update page status to Ready to Sync

注意下圖：我用 admin 登錄進(jìn)去時(shí)是看不見這些的：

這涉及到 smartEdit 里的權(quán)限管理。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。