SAP Commerce Cloud SmartEdit 打开 Spartacus home page 的网络请求

简介: SAP Commerce Cloud SmartEdit 打开 Spartacus home page 的网络请求
  • 本地启动 Hybris 服务器
  • 本地启动 Spartacus
  • Backoffice WCMS site 里维护的 preview url 为:http://localhost:4299/powertools-spa

  • 确保浏览器里输入 http://localhost:4299/powertools-spa 之后,可以正常访问。url 自动变为:http://localhost:4299/powertools-spa/en/USD/

第一个请求,这个 cmsTicketId 不是 Spartacus 生成的。应该是 SmartEdit 从 Hybris 服务器获取的。


GET /powertools-spa/cx-preview?cmsTicketId=647882292103273617673d6f-5d1f-4c1e-96c0-a97f1560226a HTTP/1.1

response:得到一个 CSR Spartacus home page:

完整的 url:http://localhost:4299/powertools-spa/cx-preview?cmsTicketId=647882292103273617673d6f-5d1f-4c1e-96c0-a97f1560226a


把这个 url 直接粘贴到浏览器地址栏,也能工作:

换一个不存在的 cmsTicketId 试试。

http://localhost:4299/powertools-spa/en/USD/cx-preview?cmsTicketId=6

似乎仍然可以工作:

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


这些 cmsTicketId 可以在 Chrome 开发者工具里观察到。Spartacus 在正常模式下运行,是看不到这个字段的。

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


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

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

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

private addSmartEditContract(slot: ContentSlotData): void {
    this.dynamicAttributeService.addDynamicAttributes(
      slot.properties,
      this.hostElement.nativeElement,
      this.renderer
    );
}

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

window.smartedit.renderComponent = function(componentId, componentType, pa



相关文章
|
7月前
|
存储 对象存储
Spartacus 添加 PWA 应用到 home 的实现原理分析
Spartacus 添加 PWA 应用到 home 的实现原理分析
126 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
|
6月前
|
缓存 自然语言处理 前端开发
Spartacus CSR 渲染模式下的 home page 网络请求
Spartacus CSR 渲染模式下的 home page 网络请求
27 1
|
7月前
|
编解码 监控 开发者
关于 SAP UI5 Page Map 里 Flex Enabled 标志位
关于 SAP UI5 Page Map 里 Flex Enabled 标志位
33 0
|
7月前
|
JavaScript 安全 前端开发
Spartacus 如何动态将 SmartEdit attribute 添加到 DOM 里,单步调试
Spartacus 如何动态将 SmartEdit attribute 添加到 DOM 里,单步调试
24 0
|
7月前
|
数据可视化 Android开发 开发者
SAP Fiori Tools Application Modeler Page Map 标题的数据源
SAP Fiori Tools Application Modeler Page Map 标题的数据源
36 0
|
7月前
|
存储 数据可视化 定位技术
关于 SAP Fiori Tools Application Modeler Page Map 功能的 app.json
关于 SAP Fiori Tools Application Modeler Page Map 功能的 app.json
32 0
|
7月前
SAP Fiori Tools Page Map 的实现详解和故障排除试读版
SAP Fiori Tools Page Map 的实现详解和故障排除试读版
38 0