Cargando documentación…
Cargando documentación…
NotHeadless UI
Un toggle con corazón, un contador para el header y una grilla de favoritos. Los ids se guardan en localStorage y se sincronizan entre pestañas, y los datos de los productos se cargan con un único request en lote.
Ejemplo interactivo con datos de muestra. Sin conexión a una tienda real.
<WishlistButton product={product} />
<WishlistTrigger href="/favoritos" />
// app/favoritos/page.tsx
<WishlistGrid load={getProductsByIds} />
// lib/actions.ts
"use server"
export const getProductsByIds = (ids: number[]) =>
nube.products.findMany({ where: { ids }, select: productCardSelect }) // en lotes de ≤ 30 por requestLas cards de producto incluyen el botón de favoritos (wishlist) por defecto. Pasá actions={false} para ocultarlo.