SAP Commerce SmartEdit 如何同 SAP Spartacus 协同工作-阿里云开发者社区

开发者社区> jerrywangsap> 正文

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

简介: SAP Commerce SmartEdit 如何同 SAP Spartacus 协同工作
+关注继续查看

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


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


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


image.png

编辑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


image.png


一旦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就派上用场了:


image.png


Same for the category page, category 575 is opened in the product list page:



image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9972 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13731 0
React的工作原理,为什么我直接从JSBin copy到本地的代码无法执行
React的工作原理,为什么我直接从JSBin copy到本地的代码无法执行
11 0
SAP Fiori Elements里Smart Link工作原理介绍
SAP Fiori Elements里Smart Link工作原理介绍
7 0
JS引擎是如何工作的?从调用堆栈到Promise
有没有想过浏览器如何读取和运行JS代码? 这看起来很神奇,我们可以通过浏览器提供的控制台来了解背后的一些原理。
802 0
使用 mock 数据在本地运行 SAP Fiori Elements 应用的工作原理
使用 mock 数据在本地运行 SAP Fiori Elements 应用的工作原理
12 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载