Wishlist

WishlistRoot fetches the user's wishlist and auto-saves changes. Toggle wishlist status from any product card.

---

Wishlist Page

<WishlistRoot>
  <WishlistItems>
    <Grid cols={4} gap={4}>
      <CollectionView>
        <Product class="border rounded-lg p-4">
          <ProductImage class="aspect-square object-cover rounded" />
          <ProductName class="font-medium mt-2" />
          <ProductPrice class="text-primary font-semibold" />
          <ProductRemoveFromWishlistTrigger class="mt-2 w-full" />
        </Product>
      </CollectionView>
    </Grid>
    <CollectionEmpty>
      <div class="text-center py-12">
        <p class="text-lg text-muted-foreground">Your wishlist is empty</p>
      </div>
    </CollectionEmpty>
  </WishlistItems>
</WishlistRoot>

---

Toggle from Any Product

Add ProductToggleWishlistTrigger inside any Product card — it auto-detects whether the product is in the wishlist and shows the correct state:

<Product class="border rounded-lg p-4">
  <ProductImage class="aspect-square object-cover rounded" />
  <ProductName class="font-medium mt-2" />
  <ProductPrice class="text-primary font-semibold" />
  <ProductAddToCartTrigger class="w-full mt-2" />
  <ProductToggleWishlistTrigger class="absolute top-2 right-2" />
</Product>

Or show/hide separate buttons with CSS data attributes:

<ProductAddToWishlistTrigger
  class="data-[in-wishlist]:hidden absolute top-2 right-2"
/>
<ProductRemoveFromWishlistTrigger
  class="hidden data-[in-wishlist]:block absolute top-2 right-2"
/>

---

How It Works

• WishlistRoot auto-fetches the wishlist using the store ID from context.
• WishlistItems provides a Collection of products — drop CollectionView to iterate, CollectionEmpty for empty state.
• Changes are auto-synced to the server. No manual save calls.
• Wishlist triggers work from anywhere — inside WishlistItems, embedded in ProductList cards, or on a standalone product page.