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

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

http://localhost:4000/electronics-spa/en/USD/product/CONF_CAM...

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第1张图片

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

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第2张图片

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

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

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第3张图片

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

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第4张图片

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第5张图片

在函数 isUserLoggedIn 里添加 console.log:

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第6张图片

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

运行时根本没有执行到 console.log 里来:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第7张图片

为什么运行时调用的是 asm service:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第8张图片

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第9张图片

从代码层面看,应该注入这个 AuthService 才对:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第10张图片

在 ASM auth service 的构造函数里打印 log:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第11张图片

加上打印语句:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第12张图片

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第13张图片

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

{{ product$ | async | json }}

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第14张图片

最后的效果:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第15张图片

同理:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第16张图片

Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第17张图片

难道是这个 wishlist entries 为空吗?
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第18张图片

果然:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第19张图片

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

wish list 是通过 cart 来实现的:
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题_第20张图片

getWishList(): Observable {
    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-1bf...,potent....

因此,登录后,Spartacus 仍在尝试从 guid 而不是代码加载购物车。
因此,我们会收到 未找到购物车 错误

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

购物车行为是:

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

你可能感兴趣的:(Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题)