Remove product thumbnails from the order list, keep them on the detail page
Bestellübersicht rows now show only text (Bestellnummer, Datum, Artikel-Anzahl, Status, Gesamtbetrag) — no product images. The order detail page (app/konto/bestellungen/[orderNumber]/page.tsx) is untouched and still shows a thumbnail per item, which is the only place they should appear.
This commit is contained in:
@@ -1,20 +1,13 @@
|
||||
import type { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Reveal } from "../../components/Reveal";
|
||||
import { Footer } from "../../components/Footer";
|
||||
import { formatPrice, formatDate } from "../../lib/format";
|
||||
import { getSessionCustomer, getCustomerOrders } from "../../lib/customerAuth";
|
||||
import { getProductImagesByIds } from "../../lib/payload";
|
||||
import { OrderStatusBadge } from "../components/OrderStatusBadge";
|
||||
import { LogoutButton } from "../components/LogoutButton";
|
||||
|
||||
// Caps how many of an order's items get a thumbnail before folding the
|
||||
// rest into a "+N" pill — a row here is one line in a list, not a full
|
||||
// receipt (that's the detail page), so it stays a glance-able preview.
|
||||
const MAX_THUMBNAILS = 4;
|
||||
|
||||
// robots: noindex — account area, same reasoning as /checkout.
|
||||
export const metadata: Metadata = {
|
||||
title: "Meine Bestellungen",
|
||||
@@ -30,7 +23,6 @@ export default async function KontoBestellungenPage() {
|
||||
if (!session) redirect("/konto/login");
|
||||
|
||||
const orders = await getCustomerOrders(session.token, session.customer.id);
|
||||
const imagesByProductId = await getProductImagesByIds(orders.flatMap((order) => order.productIds));
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -47,31 +39,12 @@ export default async function KontoBestellungenPage() {
|
||||
<p className="text-body text-text-muted">Du hast noch keine Bestellung aufgegeben.</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
{orders.map((order) => {
|
||||
const thumbnails = order.productIds.slice(0, MAX_THUMBNAILS).map((id) => imagesByProductId.get(id));
|
||||
const overflow = order.productIds.length - MAX_THUMBNAILS;
|
||||
return (
|
||||
{orders.map((order) => (
|
||||
<Link
|
||||
key={order.orderNumber}
|
||||
href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
|
||||
className="flex flex-wrap items-center gap-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
|
||||
>
|
||||
<div className="flex -space-x-2 shrink-0">
|
||||
{thumbnails.map((url, i) =>
|
||||
url ? (
|
||||
<div key={i} className="relative size-11 rounded-sm overflow-hidden border-2 border-bg-base">
|
||||
<Image src={url} alt="" fill sizes="44px" className="object-cover" />
|
||||
</div>
|
||||
) : (
|
||||
<div key={i} className="size-11 rounded-sm bg-bg-muted border-2 border-bg-base" />
|
||||
),
|
||||
)}
|
||||
{overflow > 0 && (
|
||||
<div className="relative size-11 rounded-sm border-2 border-bg-base bg-bg-muted flex items-center justify-center">
|
||||
<span className="text-label font-bold text-text-muted">+{overflow}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-label text-text-muted">Bestellnummer</p>
|
||||
<p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>
|
||||
@@ -93,8 +66,7 @@ export default async function KontoBestellungenPage() {
|
||||
<p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user