NotHeadless UI

ProductFilters y CatalogPagination

Filtros (facets) ligados a la URL (rango de precio, stock, ofertas, subcategorías y opciones con swatches de color) y paginación indexable. El filtrado corre del lado del servidor sobre la colección cacheada con @notheadless/sdk/commerce, porque la Storefront API solo filtra por categoría.

Ejemplo interactivo con datos de muestra. Sin conexión a una tienda real.

Cargando ejemplo…

// page.tsx (servidor)
import { filterProducts, getFacets, paginateList } from "@notheadless/sdk/commerce"

const collection = await nube.products.findMany({ where: { categoryId }, orderBy: parseSort(sp.sort), select })
const facets = getFacets(collection, { categoryParentId: categoryId })   // conteos sobre toda la colección
const { data, pagination } = paginateList(filterProducts(collection, parseFilters(sp)), parsePage(sp), 12)

<ProductFilters facets={facets} />            {/* sidebar en desktop */}
<FiltersSheet facets={facets} activeCount={countFilters(parseFilters(sp))} />  {/* en mobile */}
<ActiveFilters facets={facets} />
<ProductGrid products={data} />
<CatalogPagination page={pagination.page} totalPages={pagination.totalPages} searchParams={sp} pathname="/" />

Props

Prop	Tipo	Descripción
facets	Facets	Lo que devuelve getFacets(collection).
show	{ price?, availability?, categories?, options? }	Muestra u oculta secciones.
URL scheme	?min&max&stock&sale&cat&o.<Option>&page	Precios en la unidad principal de la moneda (no en centavos). Cualquier cambio reinicia ?page.

Cargando documentación…