Produkt-Bühne (PDP-Kopf)
Der Kopf der Produktdetailseite: Produkt-Galerie | Kaufbox (Titel, Sterne, Preis, Varianten-Picker, Mengen-Stepper, Warenkorb-CTA mit cart-Event, Trust-Punkte)
Nutzt: component.product-gallery component.variant-picker ui.price ui.rating ui.quantity-stepper ui.icon
Beispiele
EmpressEnvy 4-teiliges Dessous-Set mit Diamond-Mesh-Einsatz & Gold-Knopf
Art.-Nr. sw2409156678- Kostenloser Versand ab 29 €
- 30 Tage Rückgaberecht
- Sichere Zahlung
Wanderrucksack 32 Liter mit Regenhülle
Art.-Nr. wr-32-graphit- Versand am selben Werktag
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| split | string: 7-5 | 6-6 | 8-4 | 5-7 | "7-5" | Aufteilung Galerie / Kaufbereich |
| title * | string | — | Produkttitel |
| sku | string | "" | Artikelnummer |
| value | number | 0 | Bewertung |
| count | number | 0 | Anzahl Bewertungen |
| amount * | string | — | Preis |
| originalAmount | string | "" | Streichpreis |
| discount | string | "" | Rabatt-Badge |
| images | array | [] | Galerie-Bilder |
| colors | array | [] | Farben |
| sizes | array | [] | Größen |
| ctaLabel | string | "In den Warenkorb" | Warenkorb-CTA |
| trust | array | [] | Trust-Punkte (Icon aus ui.icon + Text) |
| spacing | string: none | sm | md | lg | xl | "none" | Eigenabstand |
* Pflicht-Prop
Events & Slots
Events:
⚡ cart⚡ 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 |
|---|---|
--grid-gap | var(--size-10) |