Product

Alle product-componenten: losse elementen, productkaarten en de PDP-secties waarin ze samenkomen.

Losse elementen

<product-elements-badge>

Toont een label op een product (bijv. "Nieuw" of "Aanbieding").

Werkt op basis van de info uit variant.badge (kan dus per variant verschillen)

<product-elements-compare-button>

Voegt een product toe aan de vergelijkingslijst.

Communiceert met het compare component

<product-elements-wishlist-button>

Slaat een product op in de verlanglijst van de gebruiker.

Communiceert met het wishlist component

<product-elements-price>

Toont de prijs van een product, inclusief een eventuele oorspronkelijke (doorgestreepte) prijs.

<product-elements-stock-status>

Toont de voorraadstatus van een product (bijv. "Op voorraad").

<product-elements-amount-input>

Stepper om de gewenste hoeveelheid van een product te kiezen.

<product-elements-size-selection>

Opent de maatselectie van een product.

<product-elements-swatches>

Toont de beschikbare kleurvarianten van een product als gekleurde bolletjes.

Productkaarten & PDP-onderdelen

<product-blocks-card-default>

Standaard productkaart.

<compare-card>

Met de vergelijk-knop zichtbaar.

<product-blocks-card-compact>

Compacte weergave, bijv. voor een mini-productlijst.

  • Vandaag voor 16:30 besteld, vandaag verzonden
  • Gratis verzending (vanaf €50,-)
  • Eenvoudig retourneren in de winkel of per post
  • Zelf ophalen in Woerden kan vaak dezelfde dag nog!
<x-pdp.components.top-section-usp>

USP-kader met logo-badge voor de PDP top-section. Toont een lijstje met vinkjes via de usps-prop (array van teksten), bijv. verzend- en retourinfo.

Secties

De volledige pagina-onderdelen zoals ze op de PDP samenkomen. Klik hieronder om ze te zien:

Product Slider Section