如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称
我们看一个 PDP 即 product detail page 的实际例子:
http://localhost:4200/powertools-spa/en/USD/product/3881017/angle-grinder-rt-ag-125
在单页应用程序中,您可以通过显示应用程序的不同视图来控制用户看到的内容。 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
Content slot 也有很多数值在内:
总共 17 个 slot:
问题1:Spartacus 什么地方将参数 pageType=ProductPage 传给 OCC API?
根据关键字 ProductPage,居然搜索不到结果。
应该是我的搜索条件使用不对,现在正常了:
在 getContextParams 里设置断点:
这里能清晰看到,connector - (35 行)调用 adapter:
然而,是谁调用 35 行的 getList 呢?
继续在 cms-component.connector.ts 里设置断点:
最终发现,是 NavigationEntryItemEffects 负责驱动的。
更多Jerry的原创文章,尽在:“汪子熙”:
如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称相关推荐
- SAP 电商云 Spartacus UI 产品明细页面路由路径的自定义配置
如下图所示,为了减少 SAP 电商云 Spartacus 客户实施时不必要的配置,Spartacus 将不少页面的路由路径的默认配置,定义在如下的 default-routing-config.ts ...
- SAP 电商云 Spartacus UI 产品明细页面路由确定后,加载的是 page template
页面如下: http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115 ...
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
- SAP 电商云 Spartacus UI product 明细页面的路由配置
如果直接访问如下 url: http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT- ...
- 如何找到 SAP 电商云 Spartacus UI 导航 navigation 的驱动器 - NavigationEntryItemEffects
该 effect 有三个依赖: Actions CmsComponentConnector RoutingService loadNavigationItems$ 整个是一个 Observable 对 ...
- SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
- SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理
从前一篇文章SAP 电商云 Spartacus UI 的双重 layout 配置层设计 我们得知,Spartacus 层面的 layout-config.ts 可以控制 page template 应 ...
- Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...
- SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
最新文章
- Tomcat_7.x压缩版_环境变量配置(亲测有效)
- java reference_java中的4种reference的差别和使用场景(含理论、代码和执行结果)...
- 【读书笔记-数据挖掘概念与技术】数据挖掘的发展趋势和研究前沿
- [置顶]IA32 architecture 学习笔记 (一)
- Linux系统下提升进程优先级的办法
- SpringMVC的使用与requestMapper的使用
- linux 的文件软链接隐藏,Linux inode及硬链接软链接详解
- Python --- 卸载
- 如何基于k8s快速搭建TeamCity(YAML分享)
- nginx 电子书_Nginx最详细的反向代理配置步骤,拿去不谢
- 安装python时需要勾选_一体化污水处理设备安装时需要注意事项
- PHP -- Traits新特性
- word 插入公式附加右侧编号方法
- 均匀分布方差的计算方法
- WEB安全全基础漏洞学习
- 获取贵州茅台2010年1月1号至今的股票交易数据,计算该股票历史数据的5日均线和30日均线
- C语言实现求n的阶乘(n!),阶乘的和。
- 世界上各个国家和首都
- yaml的基本语法格式
- 网约车风云再起:“小窗口”和“大窗口”齐开
热门文章
- 写一个函数返回参数二进制中 1 的个数(三种方法)
- 浅谈MySQL的七种锁
- 调用模块,加入系统路径
- CSU 1785: 又一道简单题
- Web API系列(三)统一异常处理
- 如果你的sharepoint 2013很慢...
- IDC运维团队技术交流总结篇————换个角度看世界
- Python3 练习笔记五
- scikit-learn:通过Non-negative matrix factorization (NMF or NNMF)实现LSA(隐含语义分析)...
- Windows: 在系统启动时运行程序、定时计划任务、定时关机