SAP Spartacus 和 SmartEdit 协同工作需要遵循的协议
SmartEdit Contract in Spartacus
必須包含在每個頁面中的 webApplicationInjector.js 文件。 Spartacus 的 SmartEdit 安裝說明詳細介紹了如何將此 js 文件包含到您的應用程序中。
A preview ticket API mechanism
Get cmsTicketId (also called previewToken)
當在 SmartEdit 中啟動 Spartacus 時，SmartEdit 會以 cmsTicketId 作為參數(shù)向 Spartacus 發(fā)送請求。當在 SmartEdit 中啟動 Spartacus 時，SmartEdit 會以 cmsTicketId 作為參數(shù)向 Spartacus 發(fā)送請求。
https://localhost:4200/cx-preview?cmsTicketId=6477500489900224fda62f41-167a-40fe-9ecc-39019a64ebb9
默認情況下，SmartEdit 將 /cx-preview 附加到店面 URI，以便它可以預覽您的店面。 但是您可以配置 SmartEdit 以將請求路由到應用程序中的另一個端點。 使用 impex 中的 storefrontPreviewRoute 屬性指定自定義店面路由，如下例所示：
INSERT_UPDATE SmartEditConfiguration;key[unique=true];value ;storefrontPreviewRoute;"""my-custom-preview"""cmsTicketId 在后端生成。 它包含許多SmartEdit 所需的信息，例如site-id 或catalogVersion。
Smartedit Interceptor
為了使 SmartEdit 能夠在 Spartacus 中加載頁面，它需要獲取所有必需的上下文數(shù)據(jù)，包括站點、內(nèi)容目錄和內(nèi)容目錄版本，也可以是指定語言或日期和時間的。 因此，需要將 cmsTicketId 附加到從 Spartacus 發(fā)送到后端的任何 CMS 請求。
在 Spartacus 中，我們有 CmsTicketInterceptor。 如果 cmsTicketId 存在并且請求是 cms 指定的，它將添加 cmsTicketId 作為請求參數(shù)之一。
例子：https://localhost:9002/rest/v2/electronics-spa/cms/pages?fields=DEFAULT&lang=en&curr=USD&cmsTicketId=6477500489900224fda62f41-167a-40fe-9ecc-39019a64ebb9
HTML Markup Contract
HTML 標記合同規(guī)定每個 CMS 組件和每個內(nèi)容槽都必須包裝在一個 HTML 標簽中并包含特定元素。
properties in CMS items received from backend
使用 cmsTicketId 發(fā)送 CMS 請求，響應 JSON 數(shù)據(jù)中會有屬性字段。 properties 包含包含 CMS 項目所需的動態(tài)屬性組。 例如，CMS 頁面中的屬性可能包含以下數(shù)據(jù)：
"label" : "homepage", "properties" : {"smartedit" : {"classes" : "smartedit-page-uid-homepage smartedit-page-uuid-eyJpdGVtSWQiOiJob21lcGFnZSIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ== smartedit-catalog-version-uuid-electronics-spaContentCatalog/Staged"}} }在組 smartedit 中，有課程。 這是此 CMS 頁面所需的 SmartEdit 合同。 因此，我們需要將這些“類”添加到 html body 標簽的類列表中。 如果您檢查 html 頁面源代碼，您將看到 body 標簽具有“類”。
<body class="smartedit-page-uid-homepage smartedit-page-uuid-eyJpdGVtSWQiOiJob21lcGFnZSIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ== smartedit-catalog-version-uuid-electronics-spaContentCatalog/Staged"><cx-storefront ng-version="8.0.0" class="stop-navigating"><header><cx-page-layout section="header" ng-reflect-section="header" class="header"><!--bindings={ ...CMS 插槽和組件也包含這些屬性。 我們需要將這些屬性添加到組件/插槽標簽中。 以下是“HelpLink”組件的示例。
{"uid" : "HelpLink","uuid" : "eyJpdGVtSWQiOiJIZWxwTGluayIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ==","typeCode" : "CMSLinkComponent","modifiedTime" : "2019-07-02T13:44:27.77-04:00","name" : "Help Link","container" : "false","external" : "false","url" : "/faq","linkName" : "Help","properties" : {"smartedit" : {"catalogVersionUuid" : "electronics-spaContentCatalog/Staged","componentType" : "CMSLinkComponent","componentId" : "HelpLink","classes" : "smartEditComponent","componentUuid" : "eyJpdGVtSWQiOiJIZWxwTGluayIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ=="}},"target" : "false" }對應的 HTML 代碼：
<cx-link data-smartedit-catalog-version-uuid="electronics-spaContentCatalog/Staged" data-smartedit-component-type="CMSLinkComponent" data-smartedit-component-id="HelpLink" class="smartEditComponent" data-smartedit-component-uuid="eyJpdGVtSWQiOiJIZWxwTGluayIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ==" data-smart-edit-component-process-status="removeComponent" data-smartedit-element-uuid="8505cd4a-11b3-4fc8-b278-6f8ff74e50b3" style="position: relative;">DynamicAttributeService
在 Spartacus 中，我們有 DynamicAttributeService。 它可以為 DOM 添加動態(tài)屬性。 這些屬性是從從后端接收的 CMS 項目的屬性中提取的。
可以有許多不同的屬性組，其中之一是 smartedit。 但是 EC 允許插件創(chuàng)建不同的組。 例如，個性化可以添加腳本組等。
要將 SmartEdit HTML 標記合約添加到 Slot，我們有以下功能：
private addSmartEditContract(slot: ContentSlotData): void {this.dynamicAttributeService.addDynamicAttributes(slot.properties,this.hostElement.nativeElement,this.renderer); }addDynamicAttributes 函數(shù)在 3.2 版中已棄用。 如果您使用的是 Spartacus 3.2 或更新版本，請改用 addAttributesToComponent 和 addAttributesToSlot 函數(shù)。
Rerendering Components and Content Slots After Editing
在用戶對組件或內(nèi)容槽進行更改后，用戶將希望看到頁面上反映的更改。 SmartEdit 通過僅重新渲染更改的內(nèi)容來優(yōu)化此功能。
對于前端呈現(xiàn)的頁面，店面重新呈現(xiàn)頁面而不是 SmartEdit。 在這種情況下，Spartacus 在 window.smartedit 命名空間中實現(xiàn)了 renderComponent 函數(shù)，如以下代碼摘錄所示：
window.smartedit.renderComponent = function(componentId, componentType, parentId) { ... };如果 parentId 不存在，則 CMS 項是一個槽，然后 renderComponent 實際上刷新整個 CMS 頁面。 如果 parentId 確實存在，則 CMS 項是一個組件，在這種情況下，只會刷新此 CMS 組件。
Default Preview Category/Product
每個站點都有 defaultPreviewCategory、defaultPreviewProduct 和 defaultPreviewCatalog。 例如：
UPDATE CMSSite;uid[unique=true];defaultPreviewCategory(code, $productCV);defaultPreviewProduct(code, $productCV);defaultPreviewCatalog(id) ;$spaSiteUid;575;2053367;$productCatalog在 SmartEdit 中打開分類或產(chǎn)品頁面時，您會發(fā)現(xiàn)不僅加載了 CMS 頁面，還加載了默認的預覽產(chǎn)品/分類。
在 SmartEdit 中，在產(chǎn)品詳細信息頁面中打開代碼為 2053367 的產(chǎn)品：
分類頁面也一樣，在商品列表頁面打開分類575：
2021-6-29 分析一個客戶的 incident
這是客戶系統(tǒng)后臺出問題時候返回的 CMS response：
這是 SAP internal 系統(tǒng)返回的 CMS response：
更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:
總結(jié)
以上是生活随笔為你收集整理的SAP Spartacus 和 SmartEdit 协同工作需要遵循的协议的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三星手机如何补电(三星智能手机)
- 下一篇： qq飞车后追加速是什么(PC版官方网站)