Produkt-Karte
Der Grundstein aller Shop-Grids: Bild (oder Platzhalter), Sale-Badge, Wunsch-Herz, Titel, ui.price + ui.rating — komponiert aus den Shop-Elementen
Nutzt: ui.price ui.rating ui.icon
Beispiele
Sale-Artikel mit Badge, Wunsch-Herz, Preis und Bewertung
Normalpreis ohne Bewertung
Satin-Kimono mit Gürtel14,99 €
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| title * | string | — | Titel |
| href | string | "#" | Ziel |
| imageUrl | string | "" | Bild (leer = Fläche) |
| amount * | string | — | Preis |
| originalAmount | string | "" | Streichpreis |
| discount | string | "" | Rabatt-Badge |
| value | number | 0 | Bewertung (0 = ausblenden) |
| count | number | 0 | Anzahl Bewertungen |
| wishlist | boolean | true | Wunsch-Herz zeigen |
* Pflicht-Prop
Events & Slots
Events:
⚡ wishlist — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--product-card-elevation-control | var(--elevation-control) |
--product-card-radius-full | var(--radius-full) |
--product-card-radius-sm | var(--radius-sm) |
--product-card-radius-surface | var(--radius-surface) |
--product-card-sale | var(--color-sale) |
--product-card-surface-default | var(--color-surface-default) |
--product-card-surface-page | var(--color-surface-page) |
--product-card-surface-sunken | var(--color-surface-sunken) |
--product-card-text-default | var(--color-text-default) |
Genutzte Design-Tokens
color.salecolor.surface.defaultcolor.surface.pagecolor.surface.sunkencolor.text.defaultelevation.controlfont.family.defaultleading.baseradius.fullradius.smradius.surfacesize.05size.2size.8text.mdtext.xsweight.semibold
LLM-Notizen
component.product-card
Der Grundstein aller Shop-Raster: Bild (oder Platzhalter-Fläche), Sale-Badge, Wunsch-Herz, 2-zeiliger Titel, komponiert ui.price + ui.rating.
Wann nutzen
- Nie einzeln von Hand rastern —
section.product-gridnimmtproducts(Array dieser Props) und baut das auto-fill-Raster.
Wichtige Props
title*,amount* (formatiert, z.B. "9,49 €"),originalAmount(Streichpreis → Betrag färbt sich automatisch übercolor.sale),discount(Badge-Text),value/count(Rating),imageUrl,href,wishlist(Herz zeigen).
Beispiel-Node
{"definition": "component.product-card", "props": {"title": "Spitzen-Set, 3-teilig", "amount": "9,49 €", "originalAmount": "24,99 €", "discount": "-62%", "value": 4.7, "count": 2341}}
Hinweise
- Preis/Varianten sind aktuell Hand-Props — im Zielbild kommen sie aus dem Daten-Service (Produktdaten = Content, keine Design-Entscheidung).
- Herz emittiert
wishlist.