SAP Commerce SmartEdit如何同SAP Spartacus协同工作

发布日期：2021-06-30 14:39:47 浏览次数：3 分类：技术文章

本文共 3508 字，大约阅读时间需要 11 分钟。

将Commerce Cloud里下列文件拷贝到Angular应用的src文件夹里：

hybris/bin/modules/smartedit/smarteditaddon/acceleratoraddon/web/webroot/_ui/shared/common/js/webApplicationInjector.js

编辑Angular项目的angular.json, 把SmartEdit的webApplicationInjector.js添加进去：

"architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:browser",  "options": {
       "outputPath": "dist/mystore",    "index": "src/index.html",    "main": "src/main.ts",    "polyfills": "src/polyfills.ts",    "tsConfig": "src/tsconfig.app.json",    "assets": [      "src/favicon.ico",      "src/assets",      "src/webApplicationInjector.js"		],   ...

编辑src/index.html文件的HEAD区域：

添加下面一行：

Replace localhost:9002 with the domain of your server.

This line tells SmartEdit that Spartacus is allowed to be edited by SmartEdit.

上面一行代码，语义上是告诉SmartEdit，Spartacus允许其页面被SmartEdit编辑。

以Administrator登录SmartEdit，点击右上角的Settings超链接，向下滚动whiteListedStorefronts，将Spartacus Storefront的链接添加进去：

[    "https://localhost:4200" ]

在SmartEdit里以preview方式打开Spartacus页面时，SmartEdit会发送如下包含了cmsTicketId的参数给Spartacus：

https://localhost:4200/cx-preview?cmsTicketId=6477500489900224fda62f41-167a-40fe-9ecc-39019a64ebb9

cx-preview path代表以preview模式打开Spartacus.

cmsTicketId is generated in SAP Commerce Cloud backend. It contains many information required by SmartEdit, such as site-id or catalogVersion.

包含了site-id / catalogVersion信息。

To make SmartEdit be able to load pages in Spartacus, it needs to get all the required context data, which includes site, content catalog, and content catalog version, and can also be for a specified language, or date and time. Therefore, cmsTicketId needs to be appended to any CMS requests sent from Spartacus to backend.

SmartEdit加载Spartacus的页面，而后者元数据来自backend，因此经由Spartacus发送到backend的请求也需要附上cmsTicketId.

Spartacus里有个CmsTicketInterceptor, 负责动态添加cmsTicketId参数。

In Spartacus, we have CmsTicketInterceptor. If cmsTicketId exists and requests are cms specified, it adds cmsTicketId as one of the request parameters.

https://localhost:9002/rest/v2/electronics-spa/cms/pages?fields=DEFAULT&lang=en&curr=USD&cmsTicketId=6477500489900224fda62f41-167a-40fe-9ecc-39019a64ebb9

一旦SAP Commerce Cloud后台收到包含cmsTicketId的请求，其响应结构里包含properties字段：

..."label" : "homepage","properties" : {
       "smartedit" : {
           "classes" : "smartedit-page-uid-homepage smartedit-page-uuid-eyJpdGVtSWQiOiJob21lcGFnZSIsImNhdGFsb2dJZCI6ImVsZWN0cm9uaWNzLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJTdGFnZWQifQ== smartedit-catalog-version-uuid-electronics-spaContentCatalog/Staged"        }    }}

In the group smartedit, there is classes. It is the required SmartEdit contract for this CMS page. So, we need add these “classes” into the class list of the html body tag. If you check the html page source, you will see the body tag has the “classes”.

如下代码所示：

默认的预览Category/Product

Each site has defaultPreviewCategory, defaultPreviewProduct and defaultPreviewCatalog. For example:

UPDATE CMSSite;uid[unique=true];defaultPreviewCategory(code, $productCV);defaultPreviewProduct(code, $productCV);defaultPreviewCatalog(id);$spaSiteUid;575;2053367;$productCatalog

When open category or product pages in SmartEdit, you will find that not only the CMS pages are loaded, the default preview product/category is also loaded.