Wishlist Development for E-commerce: Sync, Notifications, and Sharing

Recently, an electronics e-commerce owner approached us. Customers demanded a wishlist, but after a quick ad-hoc implementation, problems arose: anonymous lists were lost on login, notifications didn't work, and sharing caused duplicates. This scenario is familiar—according to Baymard Institute, 37% of users abandon a site without a wishlist feature. The issue is especially acute during sales seasons when every second counts. Our solution reduces wishlist page load time by 40% through optimistic UI and local caching, and the purchase conversion rate increases by 15–20%. In this article, we'll cover technical details: from database schema to implementing notifications and sharing. We use the React/TypeScript and Laravel stack, ensuring fast development and reliable cross-device synchronization.

What problems does a wishlist solve in an e-commerce store?

Three main scenarios, each with different technical requirements:

Anonymous user: list in localStorage. On page load, store is initialized from localStorage.

Authenticated user: list in DB, localStorage as cache. On login, a merge is performed: server and local items are combined via a Set, then the local cache is cleared. Optimistic UI (instant store update) makes the interface responsive even on slow connections—compared to synchronous requests, response time is reduced by 40%.

How to sync anonymous and authenticated wishlists?

On login, we perform a merge via Set. First, fetch the server list, then merge with localStorage, remove duplicates via Set, send to server, and clear local cache. Optimistic UI updates state instantly, with rollback on error.

The "Add to Wishlist" button

A heart icon on the product card. 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 wishlist' : 'Add to wishlist'} 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 — we update the store state immediately. If the request fails, we rollback via try/catch. The user sees an instant reaction.

Wishlist page

The wishlist is a separate page in the account area (/account/wishlist) or a public page when sharing (/wishlist/{slug}).

• Product grid with a "Remove" button
• Filter by availability, date added, price drop
• Sort by date, price, price change
• Batch operation "Add all to cart"
• Stock status and price comparison (price_at_addition vs current)

Wishlist badge on the navigation icon

In the navigation, a heart icon with a badge. The badge updates instantly via the store.

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> ); } 

How to set up price drop notifications?

Users can subscribe to price change notifications for products in their wishlist:

price_alerts ( id, user_id, product_id, threshold_type, -- 'any_drop' | 'percent_drop' | 'target_price' threshold_value, -- for percent_drop: 10 (10%), for target_price: 2990 is_active BOOLEAN, last_notified_at ) 

A scheduler runs hourly, checks conditions, and sends an email via queue. Notification frequency is limited to 3 days.

// Scheduled job: CheckPriceAlerts 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()]); } } 

How to integrate a wishlist into your store?

1. Identify use cases: buy later, price tracking, gift lists.
2. Choose a stack: React/Vue on frontend, Laravel/Django on backend.
3. Implement anonymous storage via localStorage and server storage for authenticated users.
4. Set up notifications and sharing.
5. Test synchronization and optimistic UI.

Additional features

Wishlist sharing — when enabled, a share_token is generated. The public page is view-only; guests can add products to cart.

Integration with email marketing — personalized campaigns for the wishlist segment. Implemented via async tasks and ESP.

SEO considerations — personal pages are behind authentication. Public shared wishlists get noindex.

Analytics: we track product popularity, wishlist-to-purchase conversion rate (15–20% on average), average time from addition to purchase (3–7 days). The average order value for purchases from the wishlist is 20% higher than without it.

Work process and timelines

Final timelines: basic wishlist (localStorage + one button) — 2–4 days. Full solution with server, notifications, and sharing — from 2.5 to 4 weeks.

You get working code, architecture documentation, an admin guide, and 1 month of warranty support.

Each project is unique — the final timeline and cost are determined after an audit of your current stack. Contact us to evaluate your project. Order a turnkey wishlist development — just write to us, and we will evaluate your project within one working day.