❤️ Wishlist Components

Save for later functionality, favorites lists, and customer preference management

Classes used: live utility classes from the theme bundle.

🎭 Component Demonstrations

Interactive wishlist components and functionality demonstrations

Wishlist Grid

My Wishlist ( items)

💔

Your wishlist is empty

Start browsing and add your favorite items to your wishlist

Wishlist Button Variations

Heart Icon Button

🛍️

Text Button

Wishlist Counter

Wishlist Management

Multiple Wishlists

Share Wishlist

📝 Usage Examples

<button class="absolute top-2 right-2 p-2 bg-white rounded-full shadow-md transition-colors hover:bg-red-50">
  <svg class="w-4 h-4 text-red-500" viewBox="0 0 24 24" aria-hidden="true">
    <use href="#sparkles-icon-heart"></use>
  </svg>
</button>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <template x-for="item in wishlistItems" :key="item.id">
    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
      <!-- Product content -->
    </div>
  </template>
</div>
<div class="flex gap-2">
  <button @click="addToCart(item)" class="flex-1 px-3 py-2 bg-blue-600 text-white rounded">Add to Cart</button>
  <button class="px-3 py-2 border border-gray-300 rounded hover:bg-gray-50">Compare</button>
</div>

⚡ Performance & Accessibility

Wishlist Best Practices

  • ♿ Wishlist accessibility with proper button states, ARIA labels, and screen reader announcements for add/remove actions
  • ⚡ Performance optimization through efficient state management, API batching for bulk operations, and lazy loading of wishlist data
  • 📱 Mobile-friendly wishlist interactions with touch-optimized buttons, swipe gestures, and responsive grid layouts
  • 💾 Data persistence and synchronization across devices with automatic sync, offline capability, and cross-session wishlist retention