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:
Marco
2026-07-23 14:46:44 +00:00
parent 03a29cf93c
commit 97833ab2bb
+2 -30
View File
@@ -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>
)}