Wishlist Feature for E-Commerce

Developing Wishlist (Favorites List) Feature for E-commerce

Wishlist — list of products marked by user: "want to buy later", "tracking price", "gift list". Non-trivial functional block: button state synchronized globally, list works without auth via localStorage, merges with server on login. Plus price drop notifications, list sharing, marketing segmentation.

Use Cases

Three main scenarios, each with different requirements:

"Buy later" — quick save for return. No auth needed, localStorage enough.

"Tracking price" — user wants notification on price drop. Requires email/push + authenticated account.

"Gift Registry" — public or link-shared list. Requires server storage + unique URL.

Storage and Sync

Anonymous user: list in localStorage. On page load — initialize store from localStorage.

Authenticated user: list in DB, localStorage as cache. On auth — merge:

async function mergeWishlists(localItems: number[], userId: number) {
  const serverItems = await api.getWishlist(userId);
  const merged = [...new Set([...serverItems, ...localItems])];
  await api.syncWishlist(userId, merged);
  localStorage.removeItem('wishlist');
  return merged;
}

DB Schema:

wishlists (
  id, user_id, name, slug,
  is_public BOOLEAN DEFAULT FALSE,
  share_token VARCHAR(32),
  created_at
)

wishlist_items (
  id, wishlist_id, product_id, variant_id,
  note TEXT,
  added_at TIMESTAMPTZ,
  price_at_addition NUMERIC
)

User can have multiple wishlists (main + "for bedroom" + "gift"). For most stores one per user is enough.

"Add to Wishlist" Button

Heart icon (or bookmark) on product card and product page. Two states: empty / filled, with transition animation.

function WishlistButton({ productId }: { productId: number }) {
  const { isInWishlist, toggle, isLoading } = useWishlist(productId);

  return (
    <button
      onClick={() => toggle(productId)}
      disabled={isLoading}
      aria-label={isInWishlist ? 'Remove from favorites' : 'Add to favorites'}
      className={cn(
        'p-2 rounded-full transition-colors',
        isInWishlist ? 'text-red-500' : 'text-gray-400 hover:text-red-400'
      )}
    >
      <HeartIcon filled={isInWishlist} className="w-5 h-5" />
    </button>
  );
}

function useWishlist(productId: number) {
  const store = useWishlistStore();
  const [isLoading, setIsLoading] = useState(false);

  const toggle = async (id: number) => {
    setIsLoading(true);
    try {
      if (store.has(id)) {
        store.remove(id);
        if (isAuthenticated) await api.removeFromWishlist(id);
      } else {
        store.add(id);
        if (isAuthenticated) await api.addToWishlist(id);
      }
    } finally {
      setIsLoading(false);
    }
  };

  return { isInWishlist: store.has(productId), toggle, isLoading };
}

Optimistic UI: update store state immediately (without waiting for API). If server request fails — rollback in catch. User sees instant reaction.

Wishlist Page

Saved items — separate page in account (/account/wishlist) or public page when shared (/wishlist/{slug}).

Page interface:

• Product grid — same cards as in catalog, with remove button
• Filter: by availability, by date added, by price drop
• Sort: by date added, by price (asc/desc), by price change
• "Add all to cart" — batch operation, adds available products
• Availability status: "Out of stock" — visually marked, remains in list

For each product show price_at_addition vs current price — immediately see if price went up or down. Price drop — with icon "▼ −12%".

Price Drop Notifications

User can subscribe to price change notification:

price_alerts (
  id, user_id, product_id,
  threshold_type,        -- 'any_drop' | 'percent_drop' | 'target_price'
  threshold_value,
  is_active BOOLEAN,
  last_notified_at
)

Notification process (runs hourly or on price update):

foreach ($alerts as $alert) {
    $currentPrice = $alert->product->price;
    $shouldNotify = match ($alert->threshold_type) {
        'any_drop'      => $currentPrice < $alert->product->previous_price,
        'percent_drop'  => ($currentPrice / $alert->product->previous_price - 1) <= -$alert->threshold_value / 100,
        'target_price'  => $currentPrice <= $alert->threshold_value,
    };

    if ($shouldNotify && $alert->last_notified_at < now()->subDays(3)) {
        Mail::to($alert->user)->queue(new PriceDropNotification($alert->product, $currentPrice));
        $alert->update(['last_notified_at' => now()]);
    }
}

Frequency limit (last_notified_at < now()->subDays(3)) — don't spam on volatile prices.

Wishlist Sharing

When "Share list" enabled — generate share_token:

$wishlist->update([
    'is_public' => true,
    'share_token' => Str::random(32),
]);
return "/wishlist/{$wishlist->share_token}";

Public page: guest sees products, can add any to cart, cannot edit list. Perfect for gift lists (birthdays, weddings).

"Copy link" button + "Share to Telegram / WhatsApp" with pre-filled text.

Email Marketing Integration

Wishlist — valuable segment for personalized campaigns:

• "Sale in your favorites" — on sale start check product intersection
• "Favorite product running out" — stock < 3
• "You haven't visited — here's what changed in your list" — reactivation email

Implementation: on event (sale start / stock change) — async task queues users with product and sends personalized emails.

Wishlist Icon Badge

In nav — heart icon with badge (product count). Badge updates instantly via store, not API call on each render.

function WishlistNavIcon() {
  const count = useWishlistStore(state => state.items.length);
  return (
    <div className="relative">
      <HeartIcon className="w-6 h-6" />
      {count > 0 && (
        <span className="absolute -top-1 -right-1 bg-red-500 text-white
                         text-xs rounded-full w-4 h-4 flex items-center justify-center">
          {count > 99 ? '99+' : count}
        </span>
      )}
    </div>
  );
}

SEO Aspects

Private wishlists (/account/wishlist) — auth-protected, not indexed. Public shared wishlists — noindex by default unless implemented as editorial "collections" with unique content.

Analytics

• Which products added to favorites most — popularity signal, sales_count alternative for new items
• Wishlist-to-purchase conversion rate: % of users buying from wishlist
• Average time from wishlist add to purchase — helps timing email triggers

Timeline

• Basic wishlist (localStorage, button on card, list page without auth): 2–4 business days
• Server storage, merge on auth, price notifications: 1.5–2.5 weeks
• Sharing, multiple lists, email marketing integration: 2.5–4 weeks