关于前端:Spartacus-Storefront-产品明细页面里的-Add-to-Wish-动态隐藏问题

27次阅读

共计 1501 个字符，预计需要花费 4 分钟才能阅读完成。

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

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

有时咱们会发现 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：

加上打印语句：

在 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-1bf…,potent….

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

默认状况下，在 DEMO Spartacus 网站上，登录是间接在同一网站上实现的，

购物车行为是：