如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称

简介: 如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称

我们看一个 PDP 即 product detail page 的实际例子:


http://localhost:4200/powertools-spa/en/USD/product/3881017/angle-grinder-rt-ag-125


image.png


在单页应用程序中,您可以通过显示应用程序的不同视图来控制用户看到的内容。 Spartacus 使用 Angular Router 来处理从一个视图到另一个视图的导航。 路由器通过将每个 URL 视为呈现特定视图的指令来完成此操作。


我们加载这个 PDP 时,OCC API url:


https://host:9002/occ/v2/powertools-spa/cms/pages?pageType=ProductPage&code=3881017&lang=en&curr=USD


ProductPage 是 CMS 里一种特殊的 page 类型,参数为 product code:3881017


返回的 OCC response 里,能看到 page template:ProductDetailsPageTemplate



image.png

Content slot 也有很多数值在内:


image.png

总共 17 个 slot:


image.pngimage.png

问题1:Spartacus 什么地方将参数 pageType=ProductPage 传给 OCC API?


根据关键字 ProductPage,居然搜索不到结果。

image.pngimage.png


应该是我的搜索条件使用不对,现在正常了:

image.png


在 getContextParams 里设置断点:


image.png

这里能清晰看到,connector - (35 行)调用 adapter:


image.png

然而,是谁调用 35 行的 getList 呢?

继续在 cms-component.connector.ts 里设置断点:

image.png


最终发现,是 NavigationEntryItemEffects 负责驱动的。

image.png

相关文章
|
1月前
|
Ubuntu Java 测试技术
【Linux】一站式教会:Ubuntu(无UI界面)使用apache-jmeter进行压测
【Linux】一站式教会:Ubuntu(无UI界面)使用apache-jmeter进行压测
|
1月前
|
存储 测试技术 UED
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
81 1
|
1月前
|
安全 Linux Nacos
如何使用公网地址远程访问内网Nacos UI界面查看注册服务
如何使用公网地址远程访问内网Nacos UI界面查看注册服务
77 0
|
21天前
|
XML Android开发 数据格式
【Android UI】使用RelativeLayout与TableLayout实现登录界面
【Android UI】使用RelativeLayout与TableLayout实现登录界面
27 5
|
30天前
|
JavaScript API
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
29 1
|
14天前
|
机器学习/深度学习 算法 数据可视化
【深度学习实战】基于深度学习的图片风格快速迁移软件(Python源码+UI界面)
【深度学习实战】基于深度学习的图片风格快速迁移软件(Python源码+UI界面)
|
14天前
|
机器学习/深度学习 算法 数据可视化
基于OpenCV的人脸检测软件(含Python源码+UI界面+图文详解)
基于OpenCV的人脸检测软件(含Python源码+UI界面+图文详解)
|
1月前
|
UED
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
|
1月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
1月前
|
存储 监控 数据库
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步