从前一篇文章SAP 电商云 Spartacus UI 的双重 layout 配置层设计 我们得知,Spartacus 层面的 layout-config.ts 可以控制 page template 应该显示的 slots 信息。同时,这个信息也可以通过 OCC page API 从 commerce 后台获得,但 Spartacus 层面的配置具有更高的优先级。

本文讨论 OCC page API 返回之后,Spartacus 如何对其进行处理。

在 Chrome 的 redux 扩展里找到 action 的名称:
[Cms] Load Page Data Success

作为关键字进行查找:

设置一个断点:

这里只是执行完 mergeMap:

在 reducer 里,会把数据存储到 state 里:

state 里这些数据,什么时候,被谁通过什么样的方式读取呢?

试试这个 cms.service.ts 里:

getCurrentPage:直接从 store 里读取:

getComponentData:

更多Jerry的原创文章,尽在:“汪子熙”:

SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理相关推荐

  1. SAP 电商云 Spartacus UI 根据 CMS Component uid 获取数据

    uid:LanguageComponent getComponentData 内部会调用 createComponentData: 如果当前不可用,会加载: 最终从 NgRx store 即内存存储中 ...

  2. SAP 电商云 Spartacus UI 的 slot,position 和 Component

    在 for 循环里进行的渲染: 最后渲染出来这些 Component 都位于 position 的 slot 内: slot 和 position 一一对应: slot 里面又循环 Component ...

  3. SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数

    为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...

  4. SAP 电商云 Spartacus UI Quick Order 主页的实现

    存货单位(英語:stock keeping unit,SKU/ˌɛsˌkeɪˈjuː/),也翻译为库存单元,是一個會計學名詞,定义为库存管理中的最小可用单元,例如纺织品中一个SKU通常表示规格.颜色. ...

  5. SAP 电商云 Spartacus UI 产品搜索结果的设计明细

    我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...

  6. Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例

    关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...

  7. SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改

    我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...

  8. 在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合

    先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...

  9. SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子

    如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...

最新文章

  1. Anaconda 2019.03 发布,Python 跨平台科学计算软件
  2. 2020年香港将推两个创新研发平台,专注医疗及AI领域
  3. [机器学习] Coursera ML笔记 - 神经网络(Representation)
  4. boost::endian模块实现udt转换的测试程序
  5. [Leetcode][第44题][JAVA][通配符匹配][贪心][动态规划]
  6. POJ 1681 高斯消元 枚举自由变元
  7. 惯性张量惯性矩惯性积、转动惯量、面积转动惯量、质量转动惯量
  8. CCFCSP历年认证考试真题解答汇总(已解决20道,持续更新ing)
  9. [转]关于uboot的main_loop
  10. python关键词排名_全自动监控网站关键词排名(Python实现)
  11. 【计算机科学基础】基于搜索引擎的信息检索
  12. Centos7 KVM 虚拟机加载NVIDIA驱动
  13. 国外经典网页设计:50个优秀的移动网站设计实例
  14. Dev c++自带小游戏
  15. java时差_Java中的时差
  16. [Greenfoot中文教程] 自序 – Greenfoot WWWWW
  17. 物联网卡流量池系统的作用
  18. html调用exe传参,exe之间传递参数或dll 向exe传递
  19. vue真机调试_vue项目在自己手机上调试功能
  20. 数据结构-时间复杂度计算示例

热门文章

  1. MySQL在大数据、高并发场景下的SQL语句优化
  2. vmware-tools安装
  3. 2016-7-4收藏夹接口
  4. 央广记者在自律联盟现场采访京都贷执行董事长
  5. 我是如何学习写一个操作系统(八):内存管理和段页机制
  6. 团队任务3:第一次冲刺
  7. P1387 最大正方形
  8. QTP 11 补丁大全
  9. 如何升级cordova插件
  10. Visual Studio + C# + Xamarin = iOS/Android/Windows Apps