Feat: Display hierarchical categories in shop filters

Updated shop pages (/made-to-order and /products) to show categories
hierarchically in the filter sidebar. Now displays both parent and
child categories with visual hierarchy (e.g., "Apparel > Adults").

Changes:
- Query only parent categories (parentId = null) with children included
- Build flat category list showing hierarchy with > separator
- Filter logic remains unchanged - still filters by category slug
- Child categories only show if parent has showOnPersonalised/showOnProducts enabled

User experience:
- See all available category options
- Visual indication of subcategories (Apparel > Adults, Apparel > Kids, etc.)
- Click to filter by any level

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-21 17:54:57 +01:00
co-authored by Claude Haiku 4.5
parent 64adef53d3
commit da0a65cf26
2 changed files with 16 additions and 4 deletions
+8 -2
View File
@@ -20,10 +20,16 @@ function toArray(v?: string | string[]) {
export default async function ProductsPage({ searchParams }: { searchParams: SearchParams }) {
const categoryRows = await prisma.category.findMany({
where: { showOnPersonalised: true },
where: { showOnPersonalised: true, parentId: null },
orderBy: { name: 'asc' },
include: { children: { where: { showOnPersonalised: true }, orderBy: { name: 'asc' } } },
});
const CATEGORIES = categoryRows.map((c) => ({ value: c.slug, label: c.name }));
// Build flat list of all categories (parents and children) for filtering
const allCategories = categoryRows.flatMap((parent) => [
{ value: parent.slug, label: parent.name },
...parent.children.map((child) => ({ value: child.slug, label: `${parent.name} > ${child.name}` })),
]);
const CATEGORIES = allCategories;
const collectionRows = await prisma.collection.findMany({ orderBy: { name: 'asc' } });
const OCCASIONS = collectionRows.filter((c) => c.group === 'OCCASION').map((c) => ({ value: c.slug, label: c.name }));