SAP Commerce SmartEdit 如何同 SAP Spartacus 协同工作
將Commerce Cloud里下列文件拷貝到Angular應(yīng)用的src文件夾里：
hybris/bin/modules/smartedit/smarteditaddon/acceleratoraddon/web/webroot/_ui/shared/common/js/webApplicationInjector.js
編輯Angular項(xiàng)目的angular.json, 把SmartEdit的webApplicationInjector.js添加進(jìn)去：
"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區(qū)域：
添加下面一行：
<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，點(diǎn)擊右上角的Settings超鏈接，向下滾動(dòng)whiteListedStorefronts，將Spartacus Storefront的鏈接添加進(jìn)去：
["https://localhost:4200"]在SmartEdit里以preview方式打開Spartacus頁面時(shí)，SmartEdit會(huì)發(fā)送如下包含了cmsTicketId的參數(shù)給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的頁面，而后者元數(shù)據(jù)來自backend，因此經(jīng)由Spartacus發(fā)送到backend的請求也需要附上cmsTicketId.
Spartacus里有個(gè)CmsTicketInterceptor, 負(fù)責(zé)動(dòng)態(tài)添加cmsTicketId參數(shù)。
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的請求，其響應(yīng)結(jié)構(gòu)里包含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={ ...默認(rèn)的預(yù)覽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;$productCatalogWhen 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預(yù)覽Spartacus頁面時(shí)，這些默認(rèn)的產(chǎn)品 / Category就派上用場了：
Same for the category page, category 575 is opened in the product list page:
更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:
總結(jié)
以上是生活随笔為你收集整理的SAP Commerce SmartEdit 如何同 SAP Spartacus 协同工作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 致我们终将逝去的青春歌曲 致我们终将逝去
- 下一篇： 算字的意思 算是什么意思