shopify wishlist

Shopify 願望清單

用於在 Shopify 商店上實現簡單的客戶願望清單的一組文件。

版本：2.3.0 - 與線上商店 2.0 相容

以前的版本：

• v2.1.0（網上商店1.0）
• v2.0.0
• v1.0.0

安裝

要開始使用Shopify Wishlist ，您必須將此儲存庫中的一些檔案複製到您的 Shopify 主題程式碼中。

注意：此設定假設您有一個用於顯示產品卡的程式碼片段。

要複製的文件：

回購文件	Shopify 主題位置
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. 將button-wishlist.liquid程式碼段放置在現有產品卡程式碼段內，或放在product.liquid模板上
   • {%- render 'button-wishlist', product: product -%}
   • 這將允許客戶向/從他們的願望清單中添加/刪除項目
2. 將product-card-template.liquid部分中的程式碼段替換為現有的產品卡程式碼段
   • 步驟 1 的相同片段
   • 您的產品卡片段可能使用不同的產品變數名稱，請仔細檢查？
3. 將您的產品卡元素類別名稱新增至Wishlist.js中的selectors對象
   • 範例：如果您的產品卡類別名稱是.product-item ，則selectors變數將如下所示：

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. 在 Shopify 後台建立一個新頁面：
   • 管理 > 線上商店 > 頁面 > 新增頁面
   • 將新頁面的template設定為page.wishlist
   • 此頁面將顯示客戶已儲存的願望清單項目
5. 將腳本放在theme.liquid中結束</head>標記之前
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

就是這樣！查看 Shopify 商店時，您應該會在產品卡內（可能在產品系列頁面上）或產品範本上看到願望清單按鈕。點擊願望清單按鈕將從客戶的願望清單中新增/刪除項目並觸發按鈕上的活動樣式。新增心願清單項目後，您可以導覽至步驟 3 中建立的頁面以查看您的心願清單。

示範 Shopify 商店

筆記

• 此願望清單使用 Javascript 和 localStorage 將客戶的願望清單保存在其瀏覽器上。如果使用者清除瀏覽器儲存或以隱身模式瀏覽，localStorage 將不會保留。
• 當客戶瀏覽產品並將其新增至他們的願望清單時，如果相應的產品已包含在願望清單中，腳本將自動將任何願望清單按鈕設為活動狀態。
• 這些文件沒有樣式或結構，因此您可以根據需要進行自訂。其目的是為您帶來心願清單的基本功能，沒有任何多餘的裝飾。
• 如果您正在使用未發布的主題，則還需要在已發布的主題上建立新模板。只有當範本存在於已發佈的主題中時，Shopify 管理員才允許您將頁面指派給範本。
• 如果您要升級到線上商店 2.0 版本，您將需要刪除舊的.liquid願望清單和產品卡範本。