SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计

简介: SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计

在客户端渲染即 CSR 模式下,我们能在 Chrome 开发者工具里观测到大量根据 product code 读取产品主数据的 HTTP 请求:

51.png响应结果:

image.png

上面的数据,对应屏幕里这个产品:300938

52.png

通过 cx carousel 这个控件发起的 HTTP 请求:

53.png

这个高亮区域是 template:

54.png即:

55.png

这个 template 是 carousel 的消费者在 html 里传入的:

image.png

消费者之一就是 cx-product-carousel:

56.png

57.png

product carousel 里的产品列表来自 productCodes 字段,通过 this.productService.get 根据产品 code 读取产品主数据。


58.png

数据源来自依赖注入的 componentData.

image.png

什么时候被填充呢?

image.png

productCodes 的运行时数据:

image.png

准备渲染 ProductCarousel Component:

59.png

先得取得 ComponentData 的依赖:

image.png

找到了该依赖的 provide 记录:

61.png

62.png

调用 dataprovider,根据 uid 和 type 取得 ComponentData:

64.png

这里采取了一个延迟加载,当 Observable 被 subscribe 时,再执行:

65.png

什么时候被 subscribe 呢?答案如下:

66.png

items$ 的数据也来自 ComponentData:

67.png

ComponentData 数据读取,通过 cms service 完成:

image.png

从 store 里读取:

69.png

目录
相关文章
|
6月前
|
人工智能 搜索推荐 Serverless
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
|
6月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
6月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
6月前
|
存储 安全 数据管理
SAP 产品 data archive 数据归档的重要性
SAP 产品 data archive 数据归档的重要性
|
6月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
6月前
|
存储 供应链 调度
Spartacus 在 Back-Office 修改了产品的价格和描述信息后,修改会反应在 PDP 页面上吗
Spartacus 在 Back-Office 修改了产品的价格和描述信息后,修改会反应在 PDP 页面上吗
|
6月前
|
机器学习/深度学习 供应链 监控
Spartacus 产品主数据的 stock level 字段
Spartacus 产品主数据的 stock level 字段
|
6月前
|
存储 供应链
什么是 SAP 产品主数据的 Scale 属性
什么是 SAP 产品主数据的 Scale 属性
|
6月前
|
存储 供应链
什么是 SAP 产品主数据里的 Sales Unit 概念
什么是 SAP 产品主数据里的 Sales Unit 概念
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen