Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题

简介: Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题

这个 configurable 产品(搜索 home theater)明细页面里,没有看到 add to wish list 的超链接:


http://localhost:4000/electronics-spa/en/USD/product/CONF_CAMERA_SL-PROF-BLACK/digital-camera-professional-black

1a52826fcf96b5f9192f14b0651e7e03_4199fcaae0d6ba0bec5dccc21ec6db5e.png

有时我们会发现 Add to wish list 按钮为空的情况:


选择器 cx-add-to-wishlist 下是空的,没有任何元素,如上图所示。

ng-container 里的 ngIf 指令不难发现,add to wish list 的工作前提,是当前产品已经成功被获取,并且用户处于登录状态。


在 Component AddToWishListComponent 里打印出当前 product 的详细信息:


在函数 isUserLoggedIn 里添加 console.log:

  isUserLoggedIn(): Observable<boolean> {
    return this.authStorageService.getToken().pipe(
      tap((token) => { console.log('Jerry token: ', token)}),
      map((userToken) => Boolean(userToken?.access_token)),
      distinctUntilChanged()
    );
  }


运行时根本没有执行到 console.log 里来:

为什么运行时调用的是 asm service:


从代码层面看,应该注入这个 AuthService 才对:

在 ASM auth service 的构造函数里打印 log:

加上打印语句:

0400faec9f853aebbea0aeeca7419149_c1f2e886ffdcde6ab1f9fb54856a2865.png


在 add to wish list Component 页面添加调试信息:

<div> {{ product$ | async | json }}</div>


最后的效果:

同理:


难道是这个 wishlist entries 为空吗?

果然:


变量 wishListEntries$ 为空,导致 add to wish list 的超链接出不来。

wish list 是通过 cart 来实现的:

getWishList(): Observable<Cart> {
    return combineLatest([
      this.getWishListId(),
      this.userService.get(),
      this.userIdService.getUserId(),
    ]).pipe(
      distinctUntilChanged(),
      tap(([wishListId, user, userId]) => {
        if (
          !Boolean(wishListId) &&
          userId !== OCC_USER_ID_ANONYMOUS &&
          Boolean(user) &&
          Boolean(user.customerId)
        ) {
          this.loadWishList(userId, user.customerId);
        }
      }),
      filter(([wishListId]) => Boolean(wishListId)),
      switchMap(([wishListId]) => this.multiCartService.getCart(wishListId))
    );
  }


Spartacus 登录后,用户直接回到店面,第一次调用是这样的:

https://localhost:9002/occ/v2/jerry/users/current/carts/0-1bff26781e2c?fields=DEFAULT,potent…


因此,登录后,Spartacus 仍在尝试从 guid 而不是代码加载购物车。

因此,我们会收到 未找到购物车 错误


默认情况下,在 DEMO Spartacus 网站上,登录是直接在同一网站上完成的,

购物车行为是:

  • 登录前使用购物车 guid,登录后使用购物车代码。

相关文章
|
6月前
|
缓存 前端开发 JavaScript
Spartacus SSR 使用场景里,CDN 应该 cache 哪些类型的页面
Spartacus SSR 使用场景里,CDN 应该 cache 哪些类型的页面
|
6月前
|
设计模式 API 数据处理
Spartacus 在 PDP 页面点击 Add to Cart 之后,读取最新 product 数据的设计
Spartacus 在 PDP 页面点击 Add to Cart 之后,读取最新 product 数据的设计
|
6月前
|
前端开发 JavaScript 安全
Spartacus product summary 页面的设计原理
Spartacus product summary 页面的设计原理
|
6月前
|
存储 供应链 调度
Spartacus 在 Back-Office 修改了产品的价格和描述信息后,修改会反应在 PDP 页面上吗
Spartacus 在 Back-Office 修改了产品的价格和描述信息后,修改会反应在 PDP 页面上吗
|
6月前
|
机器学习/深度学习 供应链 监控
Spartacus 产品主数据的 stock level 字段
Spartacus 产品主数据的 stock level 字段
|
6月前
|
前端开发 搜索推荐 开发者
Spartacus empty cart 页面的显示逻辑
Spartacus empty cart 页面的显示逻辑
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
|
6月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现

相关实验场景

更多