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愿望清单和产品卡模板。