将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區域：
添加下面一行：
<script id="smartedit-injector" src="webApplicationInjector.js" data-smartedit-allow-origin="localhost:9002"></script>
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”.
如下代碼所示：
<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={
...
預設的預覽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.
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: