Initial commit: Craft2Prints with Stages 1-3
This commit is contained in:
Andymick
@@ -0,0 +1,249 @@
|
||||
import { prisma } from '@/lib/prisma';
|
||||
import { toProductDTO } from '@/lib/product';
|
||||
import { fetchActivePromotions } from '@/lib/promotions';
|
||||
import ProductCard from '@/components/ProductCard';
|
||||
import type { Prisma } from '@prisma/client';
|
||||
|
||||
type SearchParams = {
|
||||
category?: string | string[];
|
||||
collection?: string | string[];
|
||||
color?: string | string[];
|
||||
min?: string;
|
||||
max?: string;
|
||||
q?: string;
|
||||
};
|
||||
|
||||
function toArray(v?: string | string[]) {
|
||||
if (!v) return [];
|
||||
return Array.isArray(v) ? v : [v];
|
||||
}
|
||||
|
||||
export default async function ProductsPage({ searchParams }: { searchParams: SearchParams }) {
|
||||
const categoryRows = await prisma.category.findMany({
|
||||
where: { showOnPersonalised: true },
|
||||
orderBy: { name: 'asc' },
|
||||
});
|
||||
const CATEGORIES = categoryRows.map((c) => ({ value: c.slug, label: c.name }));
|
||||
|
||||
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 }));
|
||||
const RECIPIENTS = collectionRows.filter((c) => c.group === 'RECIPIENT').map((c) => ({ value: c.slug, label: c.name }));
|
||||
|
||||
const selectedCategories = toArray(searchParams.category);
|
||||
const selectedCollections = toArray(searchParams.collection);
|
||||
const selectedColors = toArray(searchParams.color);
|
||||
const q = searchParams.q?.trim() ?? '';
|
||||
const minDollars = searchParams.min ? Number(searchParams.min) : undefined;
|
||||
const maxDollars = searchParams.max ? Number(searchParams.max) : undefined;
|
||||
|
||||
// Full palette across every product, for the swatch filter — independent of
|
||||
// whatever else is currently filtered, so switching colors doesn't hide options.
|
||||
const allProducts = await prisma.product.findMany({
|
||||
where: { showOnPersonalised: true },
|
||||
select: { colors: true },
|
||||
});
|
||||
const paletteSet = new Set<string>();
|
||||
for (const p of allProducts) {
|
||||
(JSON.parse(p.colors) as string[]).forEach((c) => paletteSet.add(c));
|
||||
}
|
||||
const palette = Array.from(paletteSet);
|
||||
|
||||
const where: Prisma.ProductWhereInput = { showOnPersonalised: true };
|
||||
if (selectedCategories.length) {
|
||||
where.category = { in: selectedCategories };
|
||||
}
|
||||
if (selectedCollections.length) {
|
||||
where.collections = { some: { slug: { in: selectedCollections } } };
|
||||
}
|
||||
if (selectedColors.length) {
|
||||
where.AND = [{ OR: selectedColors.map((c) => ({ colors: { contains: c } })) }];
|
||||
}
|
||||
if (q) {
|
||||
where.name = { contains: q };
|
||||
}
|
||||
if (minDollars !== undefined || maxDollars !== undefined) {
|
||||
where.basePrice = {
|
||||
...(minDollars !== undefined ? { gte: Math.round(minDollars * 100) } : {}),
|
||||
...(maxDollars !== undefined ? { lte: Math.round(maxDollars * 100) } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
const activePromotions = await fetchActivePromotions();
|
||||
const rows = await prisma.product.findMany({ where, orderBy: { createdAt: 'asc' } });
|
||||
const products = rows.map((p) => toProductDTO(p, activePromotions));
|
||||
|
||||
const hasFilters =
|
||||
selectedCategories.length > 0 ||
|
||||
selectedCollections.length > 0 ||
|
||||
selectedColors.length > 0 ||
|
||||
q ||
|
||||
minDollars !== undefined ||
|
||||
maxDollars !== undefined;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-6 py-12">
|
||||
<div className="mb-8 flex items-baseline justify-between">
|
||||
<h1 className="font-display text-4xl">Shop all</h1>
|
||||
<p className="tag-label">
|
||||
{products.length} template{products.length === 1 ? '' : 's'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form method="GET" className="grid gap-10 md:grid-cols-[220px_1fr]">
|
||||
{/* Sidebar filters */}
|
||||
<aside className="space-y-8">
|
||||
<div>
|
||||
<label htmlFor="q" className="tag-label mb-2 block">
|
||||
Search
|
||||
</label>
|
||||
<input
|
||||
id="q"
|
||||
name="q"
|
||||
defaultValue={q}
|
||||
placeholder="Search templates…"
|
||||
className="w-full border border-line px-3 py-2 text-sm focus:border-ink"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="tag-label mb-3">Category</p>
|
||||
<div className="space-y-2">
|
||||
{CATEGORIES.map((c) => (
|
||||
<label key={c.value} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="category"
|
||||
value={c.value}
|
||||
defaultChecked={selectedCategories.includes(c.value)}
|
||||
className="h-4 w-4 accent-splash-pink"
|
||||
/>
|
||||
{c.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{OCCASIONS.length > 0 && (
|
||||
<div>
|
||||
<p className="tag-label mb-3">Occasion</p>
|
||||
<div className="space-y-2">
|
||||
{OCCASIONS.map((c) => (
|
||||
<label key={c.value} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="collection"
|
||||
value={c.value}
|
||||
defaultChecked={selectedCollections.includes(c.value)}
|
||||
className="h-4 w-4 accent-splash-pink"
|
||||
/>
|
||||
{c.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{RECIPIENTS.length > 0 && (
|
||||
<div>
|
||||
<p className="tag-label mb-3">Gifts for</p>
|
||||
<div className="space-y-2">
|
||||
{RECIPIENTS.map((c) => (
|
||||
<label key={c.value} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="collection"
|
||||
value={c.value}
|
||||
defaultChecked={selectedCollections.includes(c.value)}
|
||||
className="h-4 w-4 accent-splash-pink"
|
||||
/>
|
||||
{c.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<p className="tag-label mb-3">Color</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{palette.map((hex) => {
|
||||
const checked = selectedColors.includes(hex);
|
||||
return (
|
||||
<label key={hex} className="cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="color"
|
||||
value={hex}
|
||||
defaultChecked={checked}
|
||||
className="peer sr-only"
|
||||
/>
|
||||
<span
|
||||
title={hex}
|
||||
className={`block h-8 w-8 rounded-full border transition-transform peer-checked:scale-110 peer-checked:border-ink peer-checked:ring-2 peer-checked:ring-ink peer-checked:ring-offset-2 peer-checked:ring-offset-paper ${
|
||||
checked ? 'border-ink' : 'border-line'
|
||||
}`}
|
||||
style={{ backgroundColor: hex }}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="tag-label mb-3">Price</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
name="min"
|
||||
min={0}
|
||||
placeholder="Min"
|
||||
defaultValue={searchParams.min ?? ''}
|
||||
className="w-full border border-line px-2 py-2 text-sm focus:border-ink"
|
||||
/>
|
||||
<span className="text-muted">–</span>
|
||||
<input
|
||||
type="number"
|
||||
name="max"
|
||||
min={0}
|
||||
placeholder="Max"
|
||||
defaultValue={searchParams.max ?? ''}
|
||||
className="w-full border border-line px-2 py-2 text-sm focus:border-ink"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="border border-ink px-4 py-2 text-sm hover:border-clay hover:bg-clay hover:text-paper"
|
||||
>
|
||||
Apply filters
|
||||
</button>
|
||||
{hasFilters && (
|
||||
<a href="/made-to-order" className="text-center text-sm text-muted hover:text-ink">
|
||||
Clear filters
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Grid */}
|
||||
<div>
|
||||
{products.length === 0 ? (
|
||||
<div className="border border-line bg-surface p-12 text-center">
|
||||
<p className="font-display text-xl">No templates match those filters</p>
|
||||
<p className="mt-2 text-sm text-muted">Try widening your price range or clearing a filter.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{products.map((p) => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user