wishlist-save-for-later

ウィッシュリスト／後で見る

概要

認証済みユーザーとゲストユーザーの両方を対象に、ブラウザーのセッションをまたいで保持されるウィッシュリストを実装します。共有可能なウィッシュリストのリンク、在庫切れのウィッシュリスト商品が再入荷した際のメール通知、カートへの移動フローが含まれます。localStorage に保存されたゲストのウィッシュリストは、ログイン時にサーバー側のリストと統合されます。

このスキルを使用するタイミング

• 購入はまだ決めていないものの、今後購入するために商品を保存しておきたい買い物客がいる場合
• カート内の商品に「後で見る」機能を提供して、カート放棄を減らす機能を構築する場合
• 人気商品が再入荷した際の通知を実装する場合
• ブランドのソーシャル共有戦略に、ウィッシュリストの共有を含める場合

基本手順

ステップ 1：マーチャントのプラットフォームを特定し、適切な方法を選択する

プラットフォーム	推奨される方法	理由
Shopify	Wishlist Plus（無料プラン）または Growave（月額 $9 から。ウィッシュリスト、ロイヤルティ、レビューを含む）をインストールします	Wishlist Plus は Shopify で最も多くインストールされているウィッシュリストアプリです。商品ページとコレクションページにハートボタンを追加し、ログインユーザー向けの永続的なウィッシュリスト、ブラウザーのストレージを使ったゲスト用ウィッシュリスト、共有可能なウィッシュリストページを提供します
WooCommerce	YITH WooCommerce Wishlist（無料）をインストールします。WooCommerce で最も広く使われているウィッシュリストプラグインです	YITH Wishlist は商品ページに「ウィッシュリストに追加」ボタンを追加し、顧客ごとに共有可能なウィッシュリストページを作成します。セッションを利用したゲスト用ウィッシュリストに対応し、「カートに移動」機能も含まれます
BigCommerce	組み込みの Wishlists 機能を Account → Wishlists で有効にします。この機能はプラットフォームに標準搭載されています。必要に応じて Wishlist Plus アプリで拡張します	BigCommerce には、登録済み顧客向けのサーバー側ウィッシュリストが標準で含まれています。ゲストにはサードパーティ製アプリまたはカスタムソリューションが必要です
カスタム／ヘッドレス	ゲストユーザーには localStorage、認証済みユーザーにはサーバー側ストレージを使って構築し、ログイン時に統合します	データモデル、共有、再入荷通知を完全に制御できます。実装方法は以下をご覧ください

ステップ 2：プラットフォームでウィッシュリストを設定する

---

Shopify

Wishlist Plus（推奨 — 無料プランあり）：

1. Shopify App Store から Wishlist Plus をインストールします
2. アプリのダッシュボードで次の設定を行います：
   • Guest wishlist を有効にします（ログアウト中のユーザーにはブラウザーのストレージを使用します）
   • Auto-merge を有効にします（ログイン時にゲストのウィッシュリストをアカウントのウィッシュリストに統合します）
   • ハートボタンの位置を設定します：カートに追加の上、カートに追加の下、または 商品画像上
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 を有効にします：ウィッシュリストページに「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 の商品ページに「Add to Wishlist」ボタンを追加するには：
   • 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 エラー時には元に戻して、動作が遅いという印象を防ぎます
• ログイン時にゲスト用ウィッシュリストを統合する — サインイン後に保存した商品が失われるほど、買い物客を苛立たせることはありません
• 再入荷通知メールをレート制限する — 再入荷イベントごとに、バリエーションごとの購読者に送信する通知は最大 1 通にします
• ヘッダーにウィッシュリストの件数を表示する — 小さなバッジで件数を示すと、利用を促せます
• ウィッシュリストからカートに移動できるようにする — 商品を追加してウィッシュリストから削除する処理を不可分に実行する「Move to Cart」ボタンを用意します
• ゲスト用ウィッシュリストに有効期限を設定する — 販売終了商品が表示されないよう、90 日を超えた localStorage のエントリーを削除します

よくある問題

問題	解決策
ログイン時にゲスト用ウィッシュリストが失われる	認証直後に統合フローを実装し、ログイン後のリダイレクト時に実行します
再入荷通知メールが複数回送信される	送信後に購読レコードの notifiedAt を設定し、notifiedAt IS NULL の購読者にのみ通知します
ウィッシュリストのハートを押すとページ全体が再レンダリングされる	ウィッシュリストの状態をコンテキストレベル（React Context または Zustand）で管理し、ハートボタンだけが再レンダリングされるようにします
共有リンクから非公開データが漏れる	共有ウィッシュリストには商品名、画像、価格のみを表示し、住所、メモ、アカウント情報は決して表示しません
プライベートブラウジングで localStorage がブロックされる	すべての読み書きを try/catch で囲み、現在のセッションではメモリ内ストレージにフォールバックします

関連スキル

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