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