Storefront 的客戶可以從產品詳細資訊頁面將產品新增到願望清單。 如果未登入，“新增到願望清單”選項將指示需要先登入才能將產品新增到願望清單。

將專案新增到願望清單後，可以透過 `My Account` 選單中的 `Wish List` 選項檢視願望清單的內容。

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

願望清單功能由 AddToWishListComponent 和 WishListService 元件組成。 這兩個元件都是 CMS 驅動的，可以在 SmartEdit 中配置。還可以使用 CMS 元件對映在 Spartacus 中自定義這些元件。

# 一些限制

一個使用者不能擁有多個願望清單。此外，每個願望清單都與特定使用者相關聯，因此無法與其他使用者共享願望清單。 最後，如果該產品缺貨，則無法將其新增到願望清單。

# 如何禁用 wishlist

願望清單功能在 Spartacus 中預設啟用。

禁用願望清單的唯一方法是透過 CMS。 可以透過更改 spartacussampledata 擴充套件或您的自定義外掛來禁用願望清單，如下所示：

透過從相關的 cms-responsive-content.impex 檔案中刪除以下行來刪除 WishListLink：

```sql
;;WishListLink;Wish List Link;/my-account/wishlist;WishListLink;WishListLink;;loggedInUser
```

注意：每個 `base site` 都有一個 cms-responsive-content.impex 檔案。

透過從相關 cms-responsive-content.impex 檔案的以下行中刪除 WishListLink，從 SiteLinksSlot 中刪除連結：

```sql
;;SiteLinksSlot;Slot contains some links;true;OrdersLink,WishListLink,StoreFinderLink,ContactUsLink,HelpLink
```

也可以在 Backoffice 裡執行這些操作。

新增到心願單的連結如下圖所示：

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

(1) 新增產品到心願單時，客戶需要維護必填欄位 size 嗎？

(2) 願望清單頁面上列出的產品和產品列表頁面 (PLP)上的產品資訊是否有差異？後者根據顏色變體對變體進行分組，並顯示給定顏色的可用尺寸變體列表。

底層實現：`cx-wish-list`

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

wish list item：
![](https://img-blog.csdnimg.cn/img_convert/12f89fc2448f9c28412dd0d161a1f3d9.png)

wish list 的資料來源透過 service 獲取：
![](https://img-blog.csdnimg.cn/img_convert/1d8f47388342de59b526011911409a5b.png)

Spartacus Storefront 的 wishlist 設計

相關文章