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)

Im Builder nutzen

Nutzt: component.product-gallery component.variant-picker ui.price ui.rating ui.quantity-stepper ui.icon

Beispiele

Kompletter PDP-Kopf: Galerie | Kaufbox mit Varianten, Stepper, CTA und Trust-Punkten

EmpressEnvy 4-teiliges Dessous-Set mit Diamond-Mesh-Einsatz & Gold-Knopf

Art.-Nr. sw2409156678(2.341)

9,49 €24,99 €-62%

Farbe: Schwarz

GrößeSMLXLGrößentabelle

In den Warenkorb

• Kostenloser Versand ab 29 €
• 30 Tage Rückgaberecht
• Sichere Zahlung

Eigenschaften

Prop	Typ	Default	Builder-Label
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)

* Pflicht-Prop

Events & Slots

Events: ⚡ cart⚡ wishlist — im Surface per on: {<event>: {action, params}} verdrahtbar.

Genutzte Design-Tokens

border.hairlinecolor.action.on-primarycolor.action.primarycolor.action.primary-hovercolor.border.defaultcolor.border.strongcolor.salecolor.surface.defaultcolor.text.defaultcolor.text.mutedfont.family.defaultfont.family.displayleading.tightradius.controlsize.10size.12size.3size.6text.mdtext.smtext.xltext.xstracking.wideweight.semibold