當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SAP Spartacus 和 SmartEdit 协同工作需要遵循的协议

發布時間：2023/12/19 编程问答 56 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 作為參數向 Spartacus 發送請求。當在 SmartEdit 中啟動 Spartacus 時，SmartEdit 會以 cmsTicketId 作為參數向 Spartacus 發送請求。

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 中加載頁面，它需要獲取所有必需的上下文數據，包括站點、內容目錄和內容目錄版本，也可以是指定語言或日期和時間的。因此，需要將 cmsTicketId 附加到從 Spartacus 發送到后端的任何 CMS 請求。

在 Spartacus 中，我們有 CmsTicketInterceptor。如果 cmsTicketId 存在并且請求是 cms 指定的，它將添加 cmsTicketId 作為請求參數之一。

例子：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 標記合同規定每個 CMS 組件和每個內容槽都必須包裝在一個 HTML 標簽中并包含特定元素。

properties in CMS items received from backend

使用 cmsTicketId 發送 CMS 請求，響應 JSON 數據中會有屬性字段。 properties 包含包含 CMS 項目所需的動態屬性組。例如，CMS 頁面中的屬性可能包含以下數據：

"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 添加動態屬性。這些屬性是從從后端接收的 CMS 項目的屬性中提取的。

可以有許多不同的屬性組，其中之一是 smartedit。但是 EC 允許插件創建不同的組。例如，個性化可以添加腳本組等。

要將 SmartEdit HTML 標記合約添加到 Slot，我們有以下功能：

private addSmartEditContract(slot: ContentSlotData): void {this.dynamicAttributeService.addDynamicAttributes(slot.properties,this.hostElement.nativeElement,this.renderer); }

addDynamicAttributes 函數在 3.2 版中已棄用。如果您使用的是 Spartacus 3.2 或更新版本，請改用 addAttributesToComponent 和 addAttributesToSlot 函數。

Rerendering Components and Content Slots After Editing

在用戶對組件或內容槽進行更改后，用戶將希望看到頁面上反映的更改。 SmartEdit 通過僅重新渲染更改的內容來優化此功能。

對于前端呈現的頁面，店面重新呈現頁面而不是 SmartEdit。在這種情況下，Spartacus 在 window.smartedit 命名空間中實現了 renderComponent 函數，如以下代碼摘錄所示：

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 中打開分類或產品頁面時，您會發現不僅加載了 CMS 頁面，還加載了默認的預覽產品/分類。

在 SmartEdit 中，在產品詳細信息頁面中打開代碼為 2053367 的產品：

分類頁面也一樣，在商品列表頁面打開分類575：

2021-6-29 分析一個客戶的 incident

這是客戶系統后臺出問題時候返回的 CMS response：

這是 SAP internal 系統返回的 CMS response：

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

總結

以上是生活随笔為你收集整理的SAP Spartacus 和 SmartEdit 协同工作需要遵循的协议的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：三星手机如何补电(三星智能手机)
下一篇： qq飞车后追加速是什么(PC版官方网站)