将Commerce Cloud里下列文件拷贝到Angular应用的src文件夹里：
hybris/bin/modules/smartedit/smarteditaddon/acceleratoraddon/web/webroot/_ui/shared/common/js/webApplicationInjector.js
编辑Angular项目的angular.json, 把SmartEdit的webApplicationInjector.js添加进去：
编辑src/index.html文件的HEAD区域：
添加下面一行：
<script id="smartedit-injector" src="webApplicationInjector.js" data-smartedit-allow-origin="localhost:9002"></script>
1
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"
]
1
2
3
在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"
}
}
}
1
2
3
4
5
6
7
8
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”.
如下代码所示：
<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={
...
1
2
3
默认的预览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
1
2
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.
In SmartEdit, product with code 2053367 is opened in the product details page:
在SmartEdit预览Spartacus页面时，这些默认的产品 / Category就派上用场了：
Same for the category page, category 575 is opened in the product list page:
