feat(ecommerce): breadcrumb real + conteos por filtro en el catalogo
ADR 0005 seccion 3 (patron Amazon), primer item de "Filtros facetados
en sidebar con breadcrumb de categoria":
- Breadcrumb (Inicio > raiz > hija) armado caminando parentId sobre la
jerarquia real de categorias (misma que ya consume el mega-menu de
navbar.tsx), no un dato nuevo -- CatalogClient ahora recibe el
arreglo `categories: Category[]` completo ademas del
`categoryGroups` ya existente
- Conteo por valor en cada filtro de la sidebar (Categoria/Marca/Edad),
ej. "Marca (12)": se calcula client-side sobre los productos que ya
pasan el resto de filtros activos, cada dimension excluyendose a si
misma (patron faceted-count estandar). Sin Meilisearch por ahora,
como preveia el ADR ("server-side simple por ahora")
Filtrado existente refactorizado a funciones matchesX() puras y
reutilizadas tanto por `filtered` como por los conteos, sin cambiar el
comportamiento de filtrado ya validado.
This commit is contained in:
devops committed
1 parent
707a05cc6e
commit
bc566b1fc0
2 files changed
+131
-23
No files matched your search
@@ -1,22 +1,62 @@
|
||||
"use client";
|
||||
|
||||
import { SlidersHorizontal, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { ChevronRight, SlidersHorizontal, X } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ProductCard } from "@/components/product/product-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { Product } from "@/lib/headless/types";
|
||||
import type { Category, Product } from "@/lib/headless/types";
|
||||
|
||||
type CatalogClientProps = {
|
||||
products: Product[];
|
||||
categories?: Category[];
|
||||
categoryGroups?: Record<string, string[]>;
|
||||
initialCategory?: string;
|
||||
initialCollection?: string;
|
||||
initialQuery?: string;
|
||||
};
|
||||
|
||||
function matchesQuery(product: Product, query: string): boolean {
|
||||
if (!query) return true;
|
||||
const search = [product.name, product.category, product.collection, product.brand].join(" ").toLowerCase();
|
||||
return search.includes(query.toLowerCase());
|
||||
}
|
||||
function matchesCategory(product: Product, allowedCategories: string[]): boolean {
|
||||
return allowedCategories.includes(product.category);
|
||||
}
|
||||
function matchesCollection(product: Product, collection: string): boolean {
|
||||
return !collection || product.collection === collection;
|
||||
}
|
||||
function matchesBrand(product: Product, brand: string): boolean {
|
||||
return brand === "Todas" || product.brand === brand;
|
||||
}
|
||||
function matchesAge(product: Product, age: string): boolean {
|
||||
return age === "Todas" || product.ageRange === age;
|
||||
}
|
||||
function matchesPrice(product: Product, maxPrice: number): boolean {
|
||||
return product.price === null || maxPrice === 0 || product.price <= maxPrice;
|
||||
}
|
||||
|
||||
// Camina parentId hacia arriba desde la categoria seleccionada para armar
|
||||
// el breadcrumb real (Inicio > raiz > hija), igual que en Amazon.
|
||||
function buildBreadcrumb(categories: Category[], name: string): Category[] {
|
||||
const node = categories.find((category) => category.name === name);
|
||||
if (!node) return [];
|
||||
const trail = [node];
|
||||
let current = node;
|
||||
while (current.parentId) {
|
||||
const parent = categories.find((category) => category.id === current.parentId);
|
||||
if (!parent) break;
|
||||
trail.unshift(parent);
|
||||
current = parent;
|
||||
}
|
||||
return trail;
|
||||
}
|
||||
|
||||
export function CatalogClient({
|
||||
products,
|
||||
categories: categoryNodes = [],
|
||||
categoryGroups = {},
|
||||
initialCategory = "Todos",
|
||||
initialCollection = "",
|
||||
@@ -55,29 +95,20 @@ export function CatalogClient({
|
||||
// tiene la raiz asignada directamente. Si no es una raiz conocida, se
|
||||
// trata como el nombre de categoria exacto de siempre.
|
||||
const allowedCategories = categoryGroups[category] ?? [category];
|
||||
const breadcrumb = useMemo(() => (category === "Todos" ? [] : buildBreadcrumb(categoryNodes, category)), [categoryNodes, category]);
|
||||
|
||||
const filtered = useMemo(
|
||||
() =>
|
||||
products
|
||||
.filter((product) => {
|
||||
const search = [
|
||||
product.name,
|
||||
product.category,
|
||||
product.collection,
|
||||
product.brand,
|
||||
]
|
||||
.join(" ")
|
||||
.toLowerCase();
|
||||
|
||||
return (
|
||||
(!query || search.includes(query.toLowerCase())) &&
|
||||
(category === "Todos" || allowedCategories.includes(product.category)) &&
|
||||
(!collection || product.collection === collection) &&
|
||||
(brand === "Todas" || product.brand === brand) &&
|
||||
(age === "Todas" || product.ageRange === age) &&
|
||||
(product.price === null || maxPrice === 0 || product.price <= maxPrice)
|
||||
);
|
||||
})
|
||||
.filter(
|
||||
(product) =>
|
||||
matchesQuery(product, query) &&
|
||||
(category === "Todos" || matchesCategory(product, allowedCategories)) &&
|
||||
matchesCollection(product, collection) &&
|
||||
matchesBrand(product, brand) &&
|
||||
matchesAge(product, age) &&
|
||||
matchesPrice(product, maxPrice),
|
||||
)
|
||||
.sort((a, b) =>
|
||||
sort === "name"
|
||||
? a.name.localeCompare(b.name, "es")
|
||||
@@ -88,6 +119,57 @@ export function CatalogClient({
|
||||
[age, allowedCategories, brand, category, collection, maxPrice, products, query, sort],
|
||||
);
|
||||
|
||||
// Conteos por valor de filtro (patron Amazon: "Marca (12)"), calculados
|
||||
// sobre los productos que ya pasan el resto de filtros activos -- cada
|
||||
// dimension se cuenta excluyendose a si misma para reflejar cuantos
|
||||
// resultados habria si se eligiera ese valor.
|
||||
const categoryCounts = useMemo(() => {
|
||||
const base = products.filter(
|
||||
(product) => matchesQuery(product, query) && matchesCollection(product, collection) && matchesBrand(product, brand) && matchesAge(product, age) && matchesPrice(product, maxPrice),
|
||||
);
|
||||
const counts: Record<string, number> = { Todos: base.length };
|
||||
for (const name of categories) {
|
||||
if (name === "Todos") continue;
|
||||
const allowed = categoryGroups[name] ?? [name];
|
||||
counts[name] = base.filter((product) => matchesCategory(product, allowed)).length;
|
||||
}
|
||||
return counts;
|
||||
}, [age, brand, categories, categoryGroups, collection, maxPrice, products, query]);
|
||||
|
||||
const brandCounts = useMemo(() => {
|
||||
const base = products.filter(
|
||||
(product) =>
|
||||
matchesQuery(product, query) &&
|
||||
(category === "Todos" || matchesCategory(product, allowedCategories)) &&
|
||||
matchesCollection(product, collection) &&
|
||||
matchesAge(product, age) &&
|
||||
matchesPrice(product, maxPrice),
|
||||
);
|
||||
const counts: Record<string, number> = { Todas: base.length };
|
||||
for (const value of brands) {
|
||||
if (value === "Todas") continue;
|
||||
counts[value] = base.filter((product) => product.brand === value).length;
|
||||
}
|
||||
return counts;
|
||||
}, [age, allowedCategories, brands, category, collection, maxPrice, products, query]);
|
||||
|
||||
const ageCounts = useMemo(() => {
|
||||
const base = products.filter(
|
||||
(product) =>
|
||||
matchesQuery(product, query) &&
|
||||
(category === "Todos" || matchesCategory(product, allowedCategories)) &&
|
||||
matchesCollection(product, collection) &&
|
||||
matchesBrand(product, brand) &&
|
||||
matchesPrice(product, maxPrice),
|
||||
);
|
||||
const counts: Record<string, number> = { Todas: base.length };
|
||||
for (const value of ages) {
|
||||
if (value === "Todas") continue;
|
||||
counts[value] = base.filter((product) => product.ageRange === value).length;
|
||||
}
|
||||
return counts;
|
||||
}, [ages, allowedCategories, brand, category, collection, maxPrice, products, query]);
|
||||
|
||||
const reset = () => {
|
||||
setQuery("");
|
||||
setCategory("Todos");
|
||||
@@ -101,6 +183,27 @@ export function CatalogClient({
|
||||
return (
|
||||
<div className="mx-auto max-w-7xl px-4 py-10">
|
||||
<div className="mb-8">
|
||||
{breadcrumb.length > 0 && (
|
||||
<nav aria-label="Breadcrumb" className="mb-4 flex flex-wrap items-center gap-1.5 text-xs font-bold text-slate-500">
|
||||
<Link href="/catalog" prefetch={false} className="hover:text-fuchsia-600">
|
||||
Inicio
|
||||
</Link>
|
||||
{breadcrumb.map((node, index) => (
|
||||
<span key={node.id} className="flex items-center gap-1.5">
|
||||
<ChevronRight className="size-3" />
|
||||
{index === breadcrumb.length - 1 ? (
|
||||
<span aria-current="page" className="text-slate-900">
|
||||
{node.name}
|
||||
</span>
|
||||
) : (
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-fuchsia-600">
|
||||
{node.name}
|
||||
</Link>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">
|
||||
Catálogo completo
|
||||
</span>
|
||||
@@ -134,9 +237,10 @@ export function CatalogClient({
|
||||
values={categories}
|
||||
selected={category}
|
||||
onChange={setCategory}
|
||||
counts={categoryCounts}
|
||||
/>
|
||||
<Filter title="Marca" values={brands} selected={brand} onChange={setBrand} />
|
||||
<Filter title="Edad" values={ages} selected={age} onChange={setAge} />
|
||||
<Filter title="Marca" values={brands} selected={brand} onChange={setBrand} counts={brandCounts} />
|
||||
<Filter title="Edad" values={ages} selected={age} onChange={setAge} counts={ageCounts} />
|
||||
|
||||
<fieldset>
|
||||
<legend className="mb-3 text-sm font-black">Precio máximo</legend>
|
||||
@@ -205,11 +309,13 @@ function Filter({
|
||||
values,
|
||||
selected,
|
||||
onChange,
|
||||
counts,
|
||||
}: {
|
||||
title: string;
|
||||
values: string[];
|
||||
selected: string;
|
||||
onChange: (value: string) => void;
|
||||
counts?: Record<string, number>;
|
||||
}) {
|
||||
return (
|
||||
<fieldset>
|
||||
@@ -227,6 +333,7 @@ function Filter({
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
{counts && <span className="ml-1 opacity-60">({counts[value] ?? 0})</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user