fix(ecommerce): nav y tiles data-driven contra la jerarquia real de categorias
Sub-fase 2 de Etapa 2 (ADR 0005 seccion 6). Navbar y CategoryTiles usaban arrays hardcodeados (Figuras/Peluches/Mochilas/Marvel) que ya no coinciden con los nombres reales de categoria en Medusa desde que se elimino legacyProductMeta (PR #29) -- todos esos links de navegacion quedaron rotos silenciosamente (0 productos al filtrar). - lib/headless: nuevo tipo Category + metodo getCategories() en CatalogProvider (medusa via /store/product-categories, mock deriva de su catalogo plano, shopify sin implementar como el resto de sus metodos). - Navbar: arbol real de categorias (6 raices/21 nodos), dropdown de hijos por raiz en desktop, lista anidada en el sheet movil. Colecciones del sheet ahora se derivan de los productos reales en vez de un array hardcodeado con 2 nombres obsoletos (Marvel/Frozen vs. los reales Universo Marvel/Reino de Frozen). - CategoryTiles: tiles de home por categoria raiz real; imagen solo donde ya existe asset, gradiente honesto donde no (no hay fotografia para las 6 raices todavia, deuda explicita del ADR). - catalog-client/catalog page: cuando el query param `category` es una raiz con hijos, se expande a los nombres reales de sus hijos para que el filtro (igualdad exacta de producto.category) siga funcionando -- sin esto, tiles/nav apuntando a una raiz mostrarian 0 productos porque ningun producto tiene la raiz asignada directamente. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_013dunTcReWMKhWgCPkvAVHD
This commit is contained in:
devopsandClaude Sonnet 5 committed
1 parent
0508c6328e
commit
8742ce714c
11 files changed
+323
-130
No files matched your search
@@ -1,14 +1,66 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import type { Category } from "@/lib/headless/types";
|
||||
|
||||
const categories = [
|
||||
{ title: "Juguetes", subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", href: "/catalog?category=Figuras", color: "from-yellow-300 to-orange-400" },
|
||||
{ title: "Peluches", subtitle: "Compañeros para regalar", image: "/images/categories/peluches.webp", href: "/catalog?category=Peluches", color: "from-pink-400 to-fuchsia-500" },
|
||||
{ title: "Mochilas", subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", href: "/catalog?category=Mochilas", color: "from-cyan-400 to-blue-500" },
|
||||
{ title: "Marvel", subtitle: "Tu héroe favorito", image: "/images/categories/marvel.webp", href: "/catalog?collection=Marvel", color: "from-red-500 to-rose-700" },
|
||||
];
|
||||
// No hay fotografia real todavia para las 6 categorias raiz de la taxonomia
|
||||
// (ver ADR 0005) -- solo se mapean imagen/subtitulo para las que ya tienen
|
||||
// un asset en public/images/categories/. Las demas caen al tile de solo
|
||||
// gradiente en vez de mostrar una imagen que no les corresponde.
|
||||
const tileContent: Record<string, { subtitle: string; image?: string; color: string }> = {
|
||||
juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "from-yellow-300 to-orange-400" },
|
||||
"mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "from-cyan-400 to-blue-500" },
|
||||
"bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "from-pink-300 to-fuchsia-400" },
|
||||
educativos: { subtitle: "Aprender jugando", color: "from-emerald-400 to-teal-600" },
|
||||
"accion-y-aventura": { subtitle: "Para explorar sin límites", color: "from-red-500 to-rose-700" },
|
||||
variedades: { subtitle: "Un poco de todo", color: "from-violet-400 to-purple-600" },
|
||||
};
|
||||
|
||||
export function CategoryTiles() {
|
||||
return <section className="mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-4"><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Explora por mundos</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Encuentra tu próximo tesoro</h2></div><Link href="/catalog" className="hidden font-black text-cyan-700 sm:block">Ver todo →</Link></div><div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">{categories.map((item) => <Link key={item.title} href={item.href} className={`group relative min-h-80 overflow-hidden rounded-[2rem] bg-gradient-to-br ${item.color} shadow-xl`}><Image src={item.image} alt={item.title} fill sizes="(max-width: 640px) 100vw, 25vw" className="object-cover transition duration-500 group-hover:scale-105" /><div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-white/5" /><div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-white"><div><h3 className="text-2xl font-black">{item.title}</h3><p className="mt-1 text-sm font-semibold text-white/80">{item.subtitle}</p></div><span className="grid size-11 place-items-center rounded-full bg-white text-slate-950 transition group-hover:rotate-45"><ArrowUpRight /></span></div></Link>)}</div></section>;
|
||||
const defaultTile = { subtitle: "Explora esta categoría", color: "from-slate-400 to-slate-600" };
|
||||
|
||||
export function CategoryTiles({ categories }: { categories: Category[] }) {
|
||||
const roots = categories.filter((category) => !category.parentId);
|
||||
|
||||
if (roots.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-7xl px-4 py-14">
|
||||
<div className="mb-8 flex items-end justify-between gap-4">
|
||||
<div>
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Explora por mundos</span>
|
||||
<h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Encuentra tu próximo tesoro</h2>
|
||||
</div>
|
||||
<Link href="/catalog" className="hidden font-black text-cyan-700 sm:block">Ver todo →</Link>
|
||||
</div>
|
||||
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
{roots.map((category) => {
|
||||
const content = tileContent[category.handle] ?? defaultTile;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={category.id}
|
||||
href={`/catalog?category=${encodeURIComponent(category.name)}`}
|
||||
className={`group relative min-h-64 overflow-hidden rounded-[2rem] bg-gradient-to-br ${content.color} shadow-xl`}
|
||||
>
|
||||
{content.image && (
|
||||
<>
|
||||
<Image src={content.image} alt={category.name} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 33vw, 16vw" className="object-cover transition duration-500 group-hover:scale-105" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-white/5" />
|
||||
</>
|
||||
)}
|
||||
<div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-white">
|
||||
<div>
|
||||
<h3 className="text-xl font-black">{category.name}</h3>
|
||||
<p className="mt-1 text-sm font-semibold text-white/80">{content.subtitle}</p>
|
||||
</div>
|
||||
<span className="grid size-11 shrink-0 place-items-center rounded-full bg-white text-slate-950 transition group-hover:rotate-45">
|
||||
<ArrowUpRight />
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user