如何获取 SAP Commerce Cloud Spartacus UI 购物车 Cart 的加载状态

在 Storefront AppModule 构造函数里注入 ActiveCartService：

private cartService: ActiveCartService,

调用其 API：

const loading$ = this.cartService.getLoading();loading$.subscribe((data) => console.log('Jerry cart loading? ', data));

打印出的日志：

active-cart.service.d.ts 里，仅仅包含方法的参数定义：

如果要查看其实现代码，还是得去 fesm2015 的 Spartacus-core.js 文件里查看：

getLoading(): Observable<boolean> {return this.cartSelector$.pipe(map((cartEntity) => cartEntity.loading),distinctUntilChanged());}

查看 this.cartSelector$ 的实现：

// Stream with active cart entityprotected cartSelector$ = this.activeCartId$.pipe(switchMap((cartId) => this.multiCartService.getCartEntity(cartId)));

cartSelector$ 的赋值逻辑：从 activeCartId$ 里取出 cartId，调用 multiCartService 读取。

MultiCartService 也只是从 store 里通过selector 去读取。

ActiveCartId$ 的赋值逻辑：

// This stream is used for referencing carts in API calls.protected activeCartId$ = this.userIdService.getUserId().pipe(// We want to wait with initialization of cartId until we have userId initialized// We have take(1) to not trigger this stream, when userId changes.take(1),switchMapTo(this.store),select(MultiCartSelectors.getActiveCartId),// We also wait until we initialize cart from localStorage. Before that happens cartId in store === nullfilter((cartId) => cartId !== activeCartInitialState),map((cartId) => {if (cartId === '') {// We fallback to current when we don't have particular cart id -> cartId === '', because that's how you reference latest user cart.return OCC_CART_ID_CURRENT;}return cartId;}));

在这个文件处加上一行打印语句：

果然看到这条语句了：

为什么初始的 loading 标志位为 true？

通过调试代码得知：

这个 LoadCart 继承了 EntityLoadAction，所以也继承了默认的 load：true 标志位。

那么什么时候又变成 false 呢？

调用栈看完了都没看到有 Spartacus 相关的代码：

只知道肯定发生在 Load Cart Success 之后。

从 map.js 里看到了线索：这个 value 里包含了购物车 cart 的业务数据：

以及 loading：false

这是我们的应用代码：

从 Cart selector 里取出 CartEntity，调用 map，将 loading 字段映射出来：

Cart 数据结构：

从这里也能说明，一定是 Load Cart Success 触发的第二次 loading 打印：

此时 cart 数据已经回来了，loading 为 false：

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

如何获取 SAP Commerce Cloud Spartacus UI 购物车 Cart 的加载状态相关推荐

SAP Commerce Cloud Spartacus UI 的购物车 Cart 功能
此功能是在 TUA Spartacus 库的 1.0 版中引入的. 购物车在 TUA Spartacus 与核心 Commerce Spartacus 中的工作方式不同,需要支持产品供应以及复杂的定价 ...
SAP Commerce Cloud Spartacus UI 的 ActionClass 数据结构设计
以 CmsSetPageSuccessIndex 为例: 运行时该 Action 类包含三大字段: (1) meta (2) payload (3) type meta meta 包含的 loader ...
SAP Commerce Cloud Spartacus UI 4.0.1 版本的安装
官方文档使用命令行创建一个基于 Angular 12 的应用: ng new mystore --style=scss 务必注意 SAP Spartacus 4 以上的安装环境要求: 然后命令行调 ...
SAP Commerce Cloud Spartacus UI footer 区域的设计模型
本文研究如下图高亮所示的 SAP 电商云 Footer 区域的设计明细. 对应的 HTML markdup 入口:cx-footer-navigation: cx-footer-navigation ...
SAP Commerce Cloud Spartacus UI 修改 primary color 的方法
问题解答 The easiest and recommended way to override basic primary colors, as of version 4.0, is by cha ...
SAP Commerce Cloud Spartacus UI 的高阶 reducer 设计
在 components.reducer.ts 里,loaderReducer 函数,会根据输入的 entityType,返回一阶 reducer. 然后在代码第86行,调用该一阶 reducer 进 ...
SAP Commerce Cloud Spartacus UI 读取 Component 元数据的 Action 设计
先看数据:该 page 包含了 35 个 Components: 可以看到这些 Components 属于 homepage,但是 payload 字段里,只包含了 35 个 Components 其 ...
SAP Commerce Cloud 新一代 UI Spartacus 和 Customer Data cloud 的集成
SAP Customer Data Cloud Integration Spartacus 3.2 版可用. SAP Customer Data Cloud 允许您启用自定义注册和登录,还可以管理用户 ...
SAP Commerce Cloud (电商云) UI 的懒加载功能
最近工作中处理了 SAP Commerce Cloud (电商云) UI 的一个懒加载 (Lazy Load) 功能的问题,这里把自己学到的东西做个记录. UI 懒加载,有时又称惰性加载,延迟加载,是 ...

如何获取 SAP Commerce Cloud Spartacus UI 购物车 Cart 的加载状态

如何获取 SAP Commerce Cloud Spartacus UI 购物车 Cart 的加载状态相关推荐

最新文章

热门文章