SAP Spartacus 和 SmartEdit 协同工作需要遵循的协议

简介: SAP Spartacus 和 SmartEdit 协同工作需要遵循的协议

必须包含在每个页面中的 webApplicationInjector.js 文件。 Spartacus 的 SmartEdit 安装说明详细介绍了如何将此 js 文件包含到您的应用程序中。


A preview ticket API mechanism

Get cmsTicketId (also called previewToken)

当在 SmartEdit 中启动 Spartacus 时,SmartEdit 会以 cmsTicketId 作为参数向 Spartacus 发送请求。当在 SmartEdit 中启动 Spartacus 时,SmartEdit 会以 cmsTicketId 作为参数向 Spartacus 发送请求。


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


默认情况下,SmartEdit 将 /cx-preview 附加到店面 URI,以便它可以预览您的店面。 但是您可以配置 SmartEdit 以将请求路由到应用程序中的另一个端点。 使用 impex 中的 storefrontPreviewRoute 属性指定自定义店面路由,如下例所示:


image.pngcmsTicketId 在后端生成。 它包含许多SmartEdit 所需的信息,例如site-id 或catalogVersion。


Smartedit Interceptor

为了使 SmartEdit 能够在 Spartacus 中加载页面,它需要获取所有必需的上下文数据,包括站点、内容目录和内容目录版本,也可以是指定语言或日期和时间的。 因此,需要将 cmsTicketId 附加到从 Spartacus 发送到后端的任何 CMS 请求。


在 Spartacus 中,我们有 CmsTicketInterceptor。 如果 cmsTicketId 存在并且请求是 cms 指定的,它将添加 cmsTicketId 作为请求参数之一。


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


HTML Markup Contract

HTML 标记合同规定每个 CMS 组件和每个内容槽都必须包装在一个 HTML 标签中并包含特定元素。


properties in CMS items received from backend

使用 cmsTicketId 发送 CMS 请求,响应 JSON 数据中会有属性字段。 properties 包含包含 CMS 项目所需的动态属性组。 例如,CMS 页面中的属性可能包含以下数据:

cmsTicketId 在后端生成。 它包含许多SmartEdit 所需的信息,例如site-id 或catalogVersion。


Smartedit Interceptor

为了使 SmartEdit 能够在 Spartacus 中加载页面,它需要获取所有必需的上下文数据,包括站点、内容目录和内容目录版本,也可以是指定语言或日期和时间的。 因此,需要将 cmsTicketId 附加到从 Spartacus 发送到后端的任何 CMS 请求。


在 Spartacus 中,我们有 CmsTicketInterceptor。 如果 cmsTicketId 存在并且请求是 cms 指定的,它将添加 cmsTicketId 作为请求参数之一。


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


HTML Markup Contract

HTML 标记合同规定每个 CMS 组件和每个内容槽都必须包装在一个 HTML 标签中并包含特定元素。


properties in CMS items received from backend

使用 cmsTicketId 发送 CMS 请求,响应 JSON 数据中会有属性字段。 properties 包含包含 CMS 项目所需的动态属性组。 例如,CMS 页面中的属性可能包含以下数据:


image.png在组 smartedit 中,有课程。 这是此 CMS 页面所需的 SmartEdit 合同。 因此,我们需要将这些“类”添加到 html body 标签的类列表中。 如果您检查 html 页面源代码,您将看到 body 标签具有“类”。image.pngCMS 插槽和组件也包含这些属性。 我们需要将这些属性添加到组件/插槽标签中。 以下是“HelpLink”组件的示例。image.png对应的 HTML 代码:image.pngDynamicAttributeService

在 Spartacus 中,我们有 DynamicAttributeService。 它可以为 DOM 添加动态属性。 这些属性是从从后端接收的 CMS 项目的属性中提取的。


可以有许多不同的属性组,其中之一是 smartedit。 但是 EC 允许插件创建不同的组。 例如,个性化可以添加脚本组等。


要将 SmartEdit HTML 标记合约添加到 Slot,我们有以下功能:


image.pngaddDynamicAttributes 函数在 3.2 版中已弃用。 如果您使用的是 Spartacus 3.2 或更新版本,请改用 addAttributesToComponent 和 addAttributesToSlot 函数。


Rerendering Components and Content Slots After Editing

在用户对组件或内容槽进行更改后,用户将希望看到页面上反映的更改。 SmartEdit 通过仅重新渲染更改的内容来优化此功能。


对于前端呈现的页面,店面重新呈现页面而不是 SmartEdit。 在这种情况下,Spartacus 在 window.smartedit 命名空间中实现了 renderComponent 函数,如以下代码摘录所示:


image.png如果 parentId 不存在,则 CMS 项是一个槽,然后 renderComponent 实际上刷新整个 CMS 页面。 如果 parentId 确实存在,则 CMS 项是一个组件,在这种情况下,只会刷新此 CMS 组件。


Default Preview Category/Product

每个站点都有 defaultPreviewCategory、defaultPreviewProduct 和 defaultPreviewCatalog。 例如:


image.png在 SmartEdit 中打开分类或产品页面时,您会发现不仅加载了 CMS 页面,还加载了默认的预览产品/分类。

在 SmartEdit 中,在产品详细信息页面中打开代码为 2053367 的产品:image.pngimage.png

2021-6-29 分析一个客户的 incident这是客户系统后台出问题时候返回的 CMS response:image.pngimage.png

相关文章
|
7月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
39 0
|
7月前
|
安全
Spartacus Storefront 里如何在 SmartEdit 访问环境下暂时禁用 Early login
Spartacus Storefront 里如何在 SmartEdit 访问环境下暂时禁用 Early login
34 0
|
4月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
4月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
42 0
|
4月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
25 0
|
7月前
|
JavaScript 安全 前端开发
Spartacus 如何动态将 SmartEdit attribute 添加到 DOM 里,单步调试
Spartacus 如何动态将 SmartEdit attribute 添加到 DOM 里,单步调试
24 0
|
7月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
48 0
|
7月前
|
JavaScript 容器
关于 SAP Spartacus generic-link component 的模板代码
关于 SAP Spartacus generic-link component 的模板代码
42 2
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
32 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0