wishlist-save-for-later

愿望清单 / 稍后保存

概述

实现可跨浏览器会话保留的愿望清单，支持已认证用户和访客用户。包括可分享的愿望清单链接、愿望清单中缺货商品的到货提醒邮件，以及移至购物车的流程。访客愿望清单存储在 localStorage 中，登录时会与服务器端清单合并。

何时使用此技能

• 当购物者想保存商品以便日后购买，但尚未准备好下单时
• 当需要为购物车中的商品提供“稍后保存”功能，以减少购物车放弃率时
• 当需要为高需求商品实现到货提醒时
• 当品牌的社交分享策略需要包含愿望清单分享时

核心说明

步骤 1：确定商家的平台并选择合适的方案

平台	推荐方案	原因
Shopify	安装 Wishlist Plus（免费套餐）或 Growave（每月 $9 起，包含愿望清单 + 忠诚度计划 + 评论）	Wishlist Plus 是 Shopify 上安装量最高的愿望清单应用——它会在商品页和商品系列页添加心形按钮，为已登录用户提供持久化愿望清单，通过浏览器存储支持访客愿望清单，并提供可分享的愿望清单页面
WooCommerce	安装 YITH WooCommerce Wishlist（免费）——使用最广泛的 WooCommerce 愿望清单插件	YITH Wishlist 会在商品页添加“添加到愿望清单”按钮，为每位客户创建可分享的愿望清单页面，通过会话支持访客愿望清单，并包含“移至购物车”功能
BigCommerce	在 Account → Wishlists 中启用内置的 Wishlists 功能——这是平台原生功能；如有需要，可通过 Wishlist Plus 应用扩展	BigCommerce 内置了面向注册客户的服务器端愿望清单；访客则需要第三方应用或自定义方案
自定义 / 无头架构	使用 localStorage 为访客用户存储数据，为已认证用户使用服务器端存储；登录时进行合并	可全面掌控数据模型、分享和到货提醒；请参阅下方实现方案

步骤 2：在平台上设置愿望清单

---

Shopify

Wishlist Plus（推荐——提供免费套餐）：

1. 从 Shopify App Store 安装 Wishlist Plus
2. 在应用控制面板中：
   • 设置 Guest wishlist：启用（为已退出登录的用户使用浏览器存储）
   • 设置 Auto-merge：启用（登录时将访客愿望清单合并到账户愿望清单）
   • 配置心形按钮的位置：Above add to cart、Below add to cart 或 On product image
3. 应用会自动在所有商品页和商品系列卡片上添加心形/愿望清单按钮
4. 在应用设置中配置 Wishlist page URL（默认值：/pages/wishlist）
5. 启用 Email reminders：当愿望清单中的商品促销或恢复库存时发送提醒邮件
6. 将愿望清单链接添加到导航中：
   • 前往 Online Store → Navigation → Main menu
   • 添加指向 /pages/wishlist 的链接

到货提醒：

• 恢复库存时，Wishlist Plus 会自动发送到货提醒邮件
• 在 Wishlist Plus → Email Settings 中配置邮件模板和发送时间

WooCommerce

YITH WooCommerce Wishlist（免费版）：

1. 从 WordPress.org 安装并启用
2. 前往 YITH → Wishlist → Settings → General：
   • 设置 Wishlist page：新建一个包含 [yith_wcwl_wishlist] 短代码的页面，然后选择该页面
   • 启用 Share wishlist：允许客户分享愿望清单的公开 URL
   • 启用 Move to cart：在愿望清单页面显示“移至购物车”按钮
   • 配置 Add to Wishlist button 的位置：位于“加入购物车”按钮下方，或通过短代码/小工具添加
3. 前往 YITH → Wishlist → Settings → Guest Users：
   • 启用 Allow guests to use wishlist：将数据存储在会话/ Cookie 中
   • 设置 Redirect after login：登录后重定向到愿望清单页面，以便自动合并访客清单
4. 插件会创建客户专属的愿望清单页面，分享地址为 /wishlist/?token=[user-token]

使用 YITH 实现到货提醒：

• 安装配套插件 YITH WooCommerce Back In Stock Notifications（免费）
• 愿望清单中的商品缺货时，客户会看到“有货时通过电子邮件通知我”选项
• 在插件设置中配置通知邮件模板

---

BigCommerce

内置愿望清单：

1. 已登录客户可在其 Account → Wishlists 区域使用愿望清单
2. 客户可以创建多个命名愿望清单（生日、家居等）
3. 要在 Cornerstone 的商品页面添加“加入愿望清单”按钮：
   • 前往 Storefront → My Themes → Customize
   • 在 Product Page 中启用 Add to Wishlist 按钮（如果该按钮尚未显示）
4. 分享愿望清单：客户可以在账户中将单个愿望清单设为公开，并分享 URL

**访客愿望清单：**BigCommerce 的内置愿望清单需要登录。请从 BigCommerce App Marketplace 安装 Wishlist Plus，以支持访客愿望清单。

---

自定义 / 无头架构

使用 localStorage 保存访客愿望清单：

// lib/wishlistStore.js
const KEY = 'guest_wishlist';

export function getGuestWishlist() {
  try { return JSON.parse(localStorage.getItem(KEY) ?? '[]'); } catch { return []; }
}

export function toggleGuestWishlist(item) {
  const items = getGuestWishlist();
  const exists = items.some(i => i.variantId === item.variantId);
  const updated = exists
    ? items.filter(i => i.variantId !== item.variantId)
    : [...items, { ...item, addedAt: Date.now() }];
  try { localStorage.setItem(KEY, JSON.stringify(updated)); } catch {}
  return updated;
}

登录时合并访客愿望清单：

export async function mergeGuestWishlistOnLogin() {
  const guestItems = getGuestWishlist();
  if (guestItems.length === 0) return;
  await fetch('/api/wishlist/merge', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: guestItems }),
  });
  localStorage.removeItem('guest_wishlist');
}

// Server: POST /api/wishlist/merge
// Insert only items not already in the user's server wishlist

心形按钮组件：

function WishlistButton({ product, variant }) {
  const { toggle, isWishlisted } = useWishlist();
  const wishlisted = isWishlisted(variant.id);
  return (
    <button
      onClick={() => toggle({ productId: product.id, variantId: variant.id })}
      aria-label={wishlisted ? `Remove ${product.name} from wishlist` : `Add ${product.name} to wishlist`}
      aria-pressed={wishlisted}
      className={`wishlist-btn ${wishlisted ? 'active' : ''}`}>
      <svg aria-hidden="true" viewBox="0 0 24 24"
        fill={wishlisted ? 'currentColor' : 'none'} stroke="currentColor">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
      </svg>
    </button>
  );
}

到货提醒触发器（在库存 Webhook 或 cron 上运行）：

async function notifyBackInStock(variantId) {
  const subscribers = await db.backInStockSubscriptions.findMany({
    where: { variantId, notifiedAt: null },
  });
  for (const sub of subscribers) {
    await emailService.send({
      to: sub.email,
      template: 'back-in-stock',
      data: { productName: sub.productName, productUrl: sub.productUrl },
    });
    await db.backInStockSubscriptions.update({
      where: { id: sub.id }, data: { notifiedAt: new Date() },
    });
  }
}

最佳实践

• 为切换操作提供乐观 UI — 点击后立即更新心形图标；如果 API 出错则恢复原状，避免用户感觉响应迟缓
• 登录时合并访客愿望清单 — 登录后丢失已保存商品是最让购物者恼火的事
• 限制到货提醒邮件的发送频率 — 每次补货事件中，每位订阅者对每个商品变体最多发送一条通知
• 在页眉中显示愿望清单数量 — 小徽标上的数量有助于提升参与度
• 允许从愿望清单移至购物车 — 提供“移至购物车”按钮，以原子方式将商品加入购物车并从愿望清单中移除
• 设置访客愿望清单的过期时间 — 清除超过 90 天的 localStorage 条目，避免显示已停产商品

常见问题

问题	解决方案
登录后访客愿望清单丢失	在身份验证后立即实现合并流程；在登录后的重定向中触发该流程
到货提醒邮件重复发送	发送后在订阅记录上标记 notifiedAt；仅通知 notifiedAt IS NULL 的订阅者
点击愿望清单心形图标导致整页重新渲染	在上下文层级管理愿望清单状态（React Context 或 Zustand），以便仅重新渲染心形按钮
分享链接泄露私人数据	分享的愿望清单仅显示商品名称、图片和价格，绝不显示地址、备注或账户信息
无痕浏览时 localStorage 被阻止	使用 try/catch 包裹所有读写操作；回退到内存存储，以供当前会话使用

相关技能

• @recently-viewed-products
• @product-page-design
• @cart-abandonment-recovery
• @accessibility-commerce