Add product image gallery, harden Klaro border reset, remove attribution link

ProductGallery.tsx (main image + thumbnail strip) wired into
TodoKartenHero.tsx, only replacing the static hero photo once a
product actually has extra gallery photos — no visual change
otherwise. Backend field: Products.gallery (see payload repo).

Klaro's hard black border was still showing after the previous
color-only pass — the targeted border:none rule wasn't enough, so
this blanket-resets border/outline on every .klaro descendant and
re-adds only the shadow this theme actually wants. Also disables the
"Realisiert mit Klaro!" attribution link (BSD-3-Clause has no
on-page-attribution requirement, Klaro's own disablePoweredBy flag
covers this cleanly).

Updates the frontend README with the gallery + Klaro fixes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-08-01 21:41:23 +00:00
parent f6b001dd11
commit 417bbd430e
7 changed files with 151 additions and 16 deletions
+20
View File
@@ -1854,6 +1854,26 @@ has its own dedicated Live Preview renderer, not the shared generic
order-status one — there's no order for this email type, so no fake
"Bestellnummer" line; CTA is "Zum Produkt", not "Bestellung ansehen".
## Product image gallery
`ProductGallery.tsx` — main image + thumbnail strip, swappable on click,
backed by an optional `Products.gallery` field (backend, `hasMany` upload,
empty for most products — see the Payload README). Renders as a single
plain image with no thumbnail row at all when `gallery` is empty, i.e. the
same appearance every product already had before this existed — a product
only gets the gallery UI once someone deliberately adds extra photos in
the admin.
There's no generic `/shop/[slug]` product detail page in this app — every
product beyond the plain grid card gets a bespoke hero page (currently
just `/todo-cards`), matching the custom-per-client site model.
`ProductGallery` is wired into `TodoKartenHero.tsx` as a drop-in
replacement for that page's static hero photo — but only once
`product.gallery.length > 0`; otherwise the curated static lifestyle
photo (`/hero-todo-karten.png`, deliberately not just the catalog image)
stays exactly as it was. A future bespoke product page can reuse the same
component the same way.
## Tests
`npm run test:unit` (Vitest, `node` environment, no jsdom/Next.js runtime