這個 configurable 產品(搜尋 home theater)明細頁面裡，沒有看到 add to wish list 的超連結：

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

![](https://img-blog.csdnimg.cn/img_convert/4199fcaae0d6ba0bec5dccc21ec6db5e.png)

有時我們會發現 Add to wish list 按鈕為空的情況：

![](https://img-blog.csdnimg.cn/img_convert/9a33cc99c09515b5e8ccf8597cf1c89b.png)

選擇器 `cx-add-to-wishlist` 下是空的，沒有任何元素，如上圖所示。

從 `ng-container` 裡的 `ngIf` 指令不難發現，add to wish list 的工作前提，是當前產品已經成功被獲取，並且使用者處於登入狀態。

![](https://img-blog.csdnimg.cn/img_convert/123482a0047ba1f8410b0f873f2a34ea.png)

在 Component `AddToWishListComponent` 裡列印出當前 product 的詳細資訊：

![](https://img-blog.csdnimg.cn/img_convert/4854b2fcf0a3bb4ff7fc73444870ea76.png)

![](https://img-blog.csdnimg.cn/img_convert/e597a9f5674189179fe22a3caec5b724.png)

在函式 `isUserLoggedIn` 裡新增 console.log:

![](https://img-blog.csdnimg.cn/img_convert/b2e411f93f71893b2c072b970daf944b.png)

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

執行時根本沒有執行到 console.log 裡來：
![](https://img-blog.csdnimg.cn/img_convert/1b26c2e25a0b43fa4f39b1ca76466417.png)

為什麼執行時呼叫的是 asm service：
![](https://img-blog.csdnimg.cn/img_convert/77cde575f9607ab7ba9f251414dd6100.png)

![](https://img-blog.csdnimg.cn/img_convert/61ec5c0f20575f91891a713507c4e75c.png)

從程式碼層面看，應該注入這個 AuthService 才對：
![](https://img-blog.csdnimg.cn/img_convert/0a239365615f4f0fbb4d95730961b5a9.png)

在 ASM auth service 的建構函式里列印 log：
![](https://img-blog.csdnimg.cn/img_convert/d071fea61d5283dcd8c1071473ff37cf.png)

加上列印語句：
![](https://img-blog.csdnimg.cn/img_convert/bb4f41c003a0c5fd6de7a333127ee121.png)

![](https://img-blog.csdnimg.cn/img_convert/c1f2e886ffdcde6ab1f9fb54856a2865.png)

在 add to wish list Component 頁面新增除錯資訊：

`<div> {{ product$ | async | json }}</div>`
![](https://img-blog.csdnimg.cn/img_convert/d163fcad75aa6287902b1cf8bd9ba179.png)

最後的效果：
![](https://img-blog.csdnimg.cn/img_convert/1dc4a8f965f889411a9f8d713115ab45.png)

同理：
![](https://img-blog.csdnimg.cn/img_convert/301a01dec11df68aa126cc28d6ff8c9c.png)

![](https://img-blog.csdnimg.cn/img_convert/6da57e5ee45c9e8554b0a23b69b1cb00.png)

難道是這個 wishlist entries 為空嗎？
![](https://img-blog.csdnimg.cn/img_convert/222c419d0c7824d09b80a5e9bf0f0dce.png)

果然：
![](https://img-blog.csdnimg.cn/img_convert/c6e11cb835db014d20042d0f66512f95.png)

變數 `wishListEntries$` 為空，導致 add to wish list 的超連結出不來。

wish list 是透過 cart 來實現的：
![](https://img-blog.csdnimg.cn/img_convert/6598bf8b6f63335470f3abf21942844a.png)

```typescript
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，登入後使用購物車程式碼。</cart></boolean>

Spartacus Storefront 產品明細頁面裡的 Add to Wish 動態隱藏問題

相關文章