``` `timer` * **Type**: `string` * **Beschrijving**: De huidige timerwaarde, opgemaakt als string * **Gebruik**: Toon een afteltimer in aangepaste aankondigingsimplementaties ```

Time remaining: {props.timer}

``` `shouldUseTimer` * **Type**: `boolean` * **Beschrijving**: Geeft aan of de timerfunctionaliteit is ingeschakeld voor deze aankondiging * **Gebruik**: Render timergerelateerde inhoud en bedieningselementen voorwaardelijk ```

{props.shouldUseTimer && ( {props.timer} )}

``` `isTimerExpiredAndShouldHide` * **Type**: `boolean` * **Beschrijving**: Geeft aan of de timer is verlopen en de aankondiging verborgen moet worden * **Gebruik**: Bepaal de zichtbaarheid van de hele aankondiging op basis van de timerstatus ```

{!props.isTimerExpiredAndShouldHide && (

{props.timer}

)}

```

## Gestaffelde beloningen

Met de Rewards-module kun je de weergave van de beloningsvoortgang aanpassen met je eigen ontwerp, terwijl essentiële beloningsfunctionaliteit behouden blijft, zoals het volgen van mijlpalen, voortgangsvisualisatie en beloningsberichten.

### Beschikbare props - **Volledig sjabloon**

Voortgangsbalk voor gestaffelde beloningen met pictogrammen voor gratis verzending en productmijlpalen

`rewardsMessageHtml` * **Type**: `string` * **Beschrijving**: De HTML-inhoud van het beloningsbericht * **Gebruik**: Toon het beloningsbericht met rijke opmaak in aangepaste implementaties ```

``` `milestonesCompleted` * **Type**: `number` * **Beschrijving**: Het aantal mijlpalen dat is voltooid * **Gebruik**: Toon het aantal voltooide mijlpalen of bereken het voltooiingspercentage ```

{Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete

``` `milestonesData` * Type: ``` { milestonesToRender: { id: string; label: string; icon: React.ReactElement; isCompleted: boolean; positionPercent: number; }[]; progressPercent: number; showMilestones: boolean; settings: { iconContainerSize: string; iconAlignment: string; labelAlignment: string; hideLabel: boolean; }; } ``` * **Beschrijving**: Volledige mijlpaalconfiguratie en voortgangsgegevens voor het beloningssysteem * **Gebruik**: Toegang tot mijlpaalinformatie, voortgangspercentage en weergave-instellingen * **Eigenschappen**: * `milestonesToRender`: Array van mijlpaalobjecten met voltooiingsstatus en positionering * `progressPercent`: Huidige voortgang als percentage (0-100) * `showMilestones`: Of mijlpaalmarkeringen moeten worden weergegeven * `settings`: Visuele configuratie voor de mijlpaalweergave

## Kortingen

De Discounts-module ondersteunt aangepaste sjablonen, zodat je je eigen weergave kunt ontwerpen met behoud van essentiële functionaliteit zoals regelbeheer, sectiezichtbaarheid en beloningspresentatie. De interne moduletype-identifier voor aangepaste sjablonen is `TRIGGERED_REWARDS` voor achterwaartse compatibiliteit met bestaande code van aangepaste sjablonen.

### **Beschikbare props - Volledig sjabloon**

`rules` * **Type**: ``` { id: string; title: string; description: string; conditionsMet: boolean; }[] ``` * **Beschrijving**: Array van kortingsregels die momenteel zijn ingeschakeld * **Gebruik**: Toon beschikbare beloningen, hun titels, beschrijvingen en of aan de voorwaarden van elke regel is voldaan * **Eigenschappen**: * `id`: Unieke identifier voor de beloningsregel * `title`: Titel van de kortingsregel * `description`: Beschrijving van de beloningsregel * `conditionsMet`: Of momenteel aan de voorwaarden van de regel wordt voldaan door de winkelwagen. Gebruik dit om UX-patronen te bouwen als "je hebt X ontgrendeld" versus "besteed nog \$Y om X te ontgrendelen" ```

{props.rules.map((rule) => (

{rule.title}

{rule.conditionsMet ? "Reward unlocked!" : rule.description}

))}

``` `showSection` * **Type**: `boolean` * **Beschrijving**: Geeft aan of de Discounts-sectie moet worden weergegeven * **Gebruik**: Bepaal de zichtbaarheid van de hele Discounts-module ```

{props.showSection && (

Available Rewards...

)}

``` `onToggleSection` * **Type**: `() => void` * **Beschrijving**: Een callbackfunctie die de zichtbaarheidsstatus van de Discounts-sectie omschakelt * **Gebruik**: Koppel aan knoppen of interactieve elementen zodat gebruikers de beloningensectie kunnen tonen/verbergen ``` ```

## Aanbevelingen

Met de Recommendation-module kun je de weergave van upsell-producten aanpassen met je eigen ontwerp, terwijl essentiële e-commercefunctionaliteit behouden blijft, zoals variantselectie, toevoegen-aan-winkelwagen-acties en de weergave van productinformatie.

### **Beschikbare props - Sjabloon voor aanbevelingstegel**

Aanbevelingstegel met een snowboardproduct, prijs en Add-knop

*Het sjabloon voor de aanbevelingstegel deelt [dezelfde prop-interface als het sjabloon voor de upsell-tegel](#available-props-upsell-tile-template) in de Upsells-module. Alle beschikbare props, typen en gebruiksvoorbeelden zijn gedocumenteerd in de sectie Upsells-module hieronder.*

## Winkelwagenartikelen

Met de Cart Items-module kun je de weergave van winkelwagenartikelen aanpassen met je eigen ontwerp, terwijl essentiële e-commercefunctionaliteit behouden blijft. Deze module biedt meerdere sjabloontypen, elk met eigen specifieke props voor verschillende aspecten van de weergave van winkelwagenartikelen. **Een laadindicator tonen tijdens het toevoegen aan de winkelwagen of winkelwagenupdates:** De standaard Cart Items-module biedt geen ingebouwde spinner voor "toevoegen aan winkelwagen". Als je een laadstatus wilt weergeven terwijl een artikel wordt toegevoegd of een winkelwagenbewerking bezig is, gebruik dan het Product tile-sjabloon en lees de props `isLoading` en `loadingOperation` (hieronder gedocumenteerd) om voorwaardelijk een spinner of overlay te renderen. Aangepaste sjablonen vereisen developer-ervaring — zie de mededeling bovenaan deze pagina.

### **Beschikbare props - Product tile-sjabloon**

**Let op:** Het inschakelen van het *Product Tile*-sjabloon overschrijft alle andere sjablonen in deze module, waaronder het **Variant-sjabloon**, **Properties-sjabloon**, **Bundle-sjabloon** en **Price-sjabloon**.\ Als je aangepaste code in een van die sjablonen wilt gebruiken, ***moet*** *je het Product Tile-sjabloon uitschakelen.* Producttegel in de winkelwagen met afbeelding, variant, aanbiedingsprijs, aantalkiezer en abonneerknop

Producttegel in de winkelwagen met afbeelding, variant, aanbiedingsprijs, aantalkiezer en abonneerknop

`title` * **Type**: `string` * **Beschrijving**: De titel/naam van het product * **Gebruik**: Toon de hoofdproductnaam bij winkelwagenartikelen `variant` * **Type**: `React.ReactNode` * **Beschrijving**: Vooraf gerenderd component met variantinformatie * **Gebruik**: Toon variantdetails als React-component `properties` * **Type**: `React.ReactNode` * **Beschrijving**: Vooraf gerenderd component met producteigenschappen * **Gebruik**: Toon producteigenschappen en abonnementsinformatie als React-component `bundle` * **Type**: `React.ReactNode` * **Beschrijving**: Vooraf gerenderd component met bundeldetails * **Gebruik**: Toon bundelinformatie als React-component `compareAtPrice` * **Type**: `string | undefined` * **Beschrijving**: Opgemaakte vergelijkingsprijs (originele prijs) * **Gebruik**: Toon de originele prijs bij afgeprijsde artikelen `price` * **Type**: `string` * **Beschrijving**: Opgemaakte huidige prijs * **Gebruik**: Toon de huidige artikelprijs `savings` * **Type**: `string | undefined` * **Beschrijving**: Opgemaakt besparingsbedrag * **Gebruik**: Toon hoeveel de klant bespaart `imageUrl` * **Type**: `string | undefined` * **Beschrijving**: URL van de productafbeelding * **Gebruik**: Toon de productafbeelding `productUrl` * **Type**: `string | undefined` * **Beschrijving**: URL van de productpagina * **Gebruik**: Link naar de productdetailpagina `quantity` * **Type**: `number` * **Beschrijving**: Huidig aantal van het artikel in de winkelwagen * **Gebruik**: Toon en beheer het artikelaantal `showQuantitySelector` * **Type**: `boolean` * **Beschrijving**: Of de aantalbediening moet worden getoond * **Gebruik**: Toon de aantalkiezer voorwaardelijk `discountCodes` * **Type**: `string[] | undefined` * **Beschrijving**: Array van toegepaste kortingscodes voor dit artikel * **Gebruik**: Toon artikelspecifieke kortingen `subscription` * **Type**: ``` { subscriptionUpgradeData: { buttonText: string; defaultSellingPlanId: number; } | null; sellingPlansData: { sellingPlanGroups: { name: string; selling_plans: { id: number; name: string; }[]; }[] | null; activeSellingPlanId: string; oneTimePurchaseText: string | null; } | null; upgradeSellingPlan: (item: CartItem, sellingPlanId: number) => void; changeSellingPlan: (item: CartItem, value: string) => void; getSellingPlanGroupText: (groupName: string, planName: string) => string; } ``` * **Beschrijving**: Volledig abonnementsbeheerobject met upgradegegevens, verkoopplannen en handlerfuncties * **Gebruik**: Beheer abonnementsfunctionaliteit * Het subscription-object bevat: * **subscriptionUpgradeData**: Upgrade-informatie (null als er geen upgrade beschikbaar is) * `buttonText`: Tekst voor de upgradeknop * `defaultSellingPlanId`: ID van het standaardverkoopplan voor upgrades * **sellingPlansData**: Beschikbare opties voor verkoopplannen (null als er geen plannen zijn) * `sellingPlanGroups`: Array van plangroepen met hun verkoopplannen * `activeSellingPlanId`: ID van het momenteel geselecteerde verkoopplan * `oneTimePurchaseText`: Tekst voor de optie eenmalige aankoop (null indien niet beschikbaar) * **upgradeSellingPlan**: Functie om te upgraden naar een specifiek verkoopplan * **changeSellingPlan**: Functie om het huidige verkoopplan te wijzigen * **getSellingPlanGroupText**: Hulpfunctie om de weergavetekst van het verkoopplan op te maken `onIncrease` * **Type**: `() => void` * **Beschrijving**: Functie om het artikelaantal te verhogen * **Gebruik**: Verwerk acties om het aantal te verhogen `onDecrease` * **Type**: `() => void` * **Beschrijving**: Functie om het artikelaantal te verlagen * **Gebruik**: Verwerk acties om het aantal te verlagen `onDeleteProduct` * **Type**: `() => void` * **Beschrijving**: Functie om het artikel uit de winkelwagen te verwijderen * **Gebruik**: Verwerk het verwijderen van artikelen `onQuantityChange` * **Type**: `(quantity: string) => void` * **Beschrijving**: Functie om directe aantalinvoer te verwerken * **Gebruik**: Verwerk handmatige aantalwijzigingen `handleInputChange` * **Type**: `(e: React.ChangeEvent) => void` * **Beschrijving**: Handler voor invoerwijzigingen van het aantalveld * **Gebruik**: Verwerk wijzigingen in het invoerveld voor het aantal `replaceItemWithVariant` * **Type**: `(variantId: string) => Promise<{ success: boolean }>` * **Beschrijving**: Functie om het artikel te vervangen door een andere variant * **Gebruik**: Verwerk het wisselen van varianten `isLoading` * **Type**: `boolean` * **Beschrijving**: Laadstatus voor winkelwagenbewerkingen * **Gebruik**: Toon laadindicatoren `loadingOperation` * **Type**: `'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined` * **Beschrijving**: Specifieke bewerking die momenteel wordt geladen * **Gebruik**: Toon bewerkingsspecifieke laadstatussen `setLoadingOperation` * **Type**: `(op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void` * **Beschrijving**: Functie om de laadstatus van bewerkingen in te stellen * **Gebruik**: Beheer laadstatussen voor verschillende bewerkingen `rawItem` * **Type**: `CartItem` (zie het `CartItem`-[type hieronder](#cartitem-object-properties)) * **Beschrijving**: Ruwe winkelwagenartikelgegevens met alle informatie

### **Beschikbare props - Variant-sjabloon**

Variantregel van een winkelwagenartikel met de geselecteerde maat Medium

`item` * **Type**: `CartItem` (zie het `CartItem`-[type hieronder](#cartitem-object-properties)) * **Beschrijving**: Ruwe winkelwagenartikelgegevens met variantinformatie * **Gebruik**: Toegang tot variantdetails van het winkelwagenartikel

### **Beschikbare props - Properties-sjabloon**

Eigenschapsregel van een winkelwagenartikel met een cadeauboodschap

`productProperties` * **Type**: `{ key: string; value: string; isUrl?: boolean; }[]` * **Beschrijving**: Array van producteigenschappen (aangepaste velden, regelartikeleigenschappen) `subscriptionLabel` * **Type**: `string | undefined` * **Beschrijving**: Label voor abonnementsinformatie

### **Beschikbare props - Bundle-sjabloon**

Uitgeklapte bundel met drie inbegrepen componentproducten met varianten

`getSizedImageUrl` * **Type**: `getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string` * **Beschrijving**: Hulpfunctie om afbeeldings-URL's met de juiste afmetingen op te halen `item` * **Type**: ``` { itemComponents: { quantity: number; image: { url: string; height: number | null; width: number | null; alt: string; }; product: { title: string; has_only_default_variant: boolean; }; variantTitle: string; }[]; variantTitle: string | undefined; hasComponents: boolean; } ``` * **Beschrijving**: Informatie over het bundelartikel, inclusief componenten. `itemComponents` is een array van componentobjecten — loop erover met map om elk gebundeld component te renderen. `showDetailsText` * **Type**: `string | undefined` * **Beschrijving**: Tekst voor de actie "details tonen" * **Gebruik**: Toon de tekst van de uitklapknop `hideDetailsText` * **Type**: `string | undefined` * **Beschrijving**: Tekst voor de actie "details verbergen" `isExpanded` * **Type**: `boolean` * **Beschrijving**: Of de bundeldetails zijn uitgeklapt `toggleCollapsible` * **Type**: `() => void` * **Beschrijving**: Functie om de zichtbaarheid van de bundeldetails om te schakelen * **Gebruik**: Verwerk uitklap-/inklapacties `chevronDownIconComponent` * **Type**: `React.ReactElement` * **Beschrijving**: Vooraf gerenderd chevron-pictogram voor uitklappen/inklappen * **Gebruik**: Toon een consistente uitklap-/inklapindicator

### **Beschikbare props - Price-sjabloon**

Winkelwagenprijs met doorgestreepte originele prijs, aanbiedingsprijs en besparing

`compareAtPrice` * **Type**: `string | undefined` * **Beschrijving**: Opgemaakte vergelijkingsprijs (originele prijs) * **Gebruik**: Toon de originele prijs bij afgeprijsde artikelen `price` * **Type**: `string` * **Beschrijving**: Opgemaakte huidige prijs * **Gebruik**: Toon de huidige artikelprijs `savings` * **Type**: `string | undefined` * **Beschrijving**: Opgemaakt besparingsbedrag * **Gebruik**: Toon hoeveel de klant bespaart

### **Eigenschappen van het CartItem-object**

Het `CartItem`-object bevat alle gedetailleerde informatie over een winkelwagenregel. Dit object is beschikbaar als props.rawItem in het Product Tile-sjabloon en als props.item in het Variant-sjabloon.

#### **Kernidentificatie**

* `key (string)` - Unieke identifier voor dit winkelwagenartikel. * `id (number)` - Variant-ID (verouderd veld, gebruik in plaats daarvan variant\_id) * `variant_id (number)` - De Shopify-variant-ID voor dit artikel * `product_id (number)` - De Shopify-product-ID * `lineIdxFrom1 (number)` - 1-gebaseerde index van dit artikel in de oorspronkelijke winkelwagen vóór wijzigingen

#### **Productinformatie**

* `title (string)` - De titel van de winkelwagenregel (meestal de varianttitel) * `product_title (string)` - De hoofdtitel van het product * `handle (string)` - URL-handle van het product (bijv. "camp-stool") * `vendor (string)` - Naam van de leverancier/het merk van het product * `product_type (string)` - Productcategorie/-type voor belastingdoeleinden * `sku (string)` - Stock Keeping Unit-identifier * `product_description (string)` - Volledige productbeschrijving * `product_has_only_default_variant (boolean)` - Of het product slechts één variant heeft

#### **Prijzen (alle prijzen in centen)**

* `quantity (number)` - Aantal van dit artikel in de winkelwagen * `price (number)` - Stukprijs vóór kortingen * `original_price (number)` - Hetzelfde als price * `discounted_price (number)` - Stukprijs na kortingen op productniveau * `compare_at_price (number | null)` - Vergelijkingsprijs (adviesprijs). Let op: dit veld wordt toegevoegd door Upcart en wordt niet geleverd door de cart-API van Shopify * `final_line_price (number)` - Totaalprijs na kortingen op productniveau (quantity × discounted\_price) * `original_line_price (number)` - Totaalprijs vóór kortingen (quantity × price) * `line_price (number)` - Totaalprijs na alle kortingen * `final_price (number)` - **Verouderd** - Stukprijs na productkortingen (houdt geen rekening met het aantal) * `total_discount (number)` - Hetzelfde als line\_level\_total\_discount * `line_level_total_discount (number)` - Totaal kortingsbedrag toegepast op deze winkelwagenregel

#### **Media en URL's**

* `image (string)` - URL van de primaire productafbeelding * `url (string)` - Relatief URL-pad naar de productpagina (bijv. "/products/camp-stool?variant=42789611372803") * `featured_image (object | null)` - Details van de uitgelichte afbeelding: * `alt (string)` - Alt-tekst van de afbeelding * `aspect_ratio (number)` - Beeldverhouding van de afbeelding * `height (number)` - Afbeeldingshoogte in pixels * `url (string)` - Afbeeldings-URL * `width (number)` - Afbeeldingsbreedte in pixels

#### **Varianten en opties**

* `variant_title (string | null)` - Varianttitel (bijv. "Large / Red") * `variant_options (string[])` - Array van variantoptiewaarden * `options_with_values (Array)` - Gedetailleerde optie-informatie: * `name (string)` - Optienaam (bijv. "Size") * `value (string)` - Optiewaarde (bijv. "Large") * `untranslated_product_title (string | undefined)` - Oorspronkelijke producttitel vóór vertaling (alleen in reacties op winkelwagenmutaties) * `untranslated_variant_title (string | undefined)` - Oorspronkelijke varianttitel vóór vertaling (alleen in reacties op winkelwagenmutaties)

#### **Aangepaste eigenschappen en metadata**

* `properties (Record | null)` - Aangepaste regelartikeleigenschappen, of `null` wanneer de regel er geen heeft — controleer dit voordat je een sleutel leest. Eigenschappen waarvan de sleutels beginnen met `__` zijn altijd verborgen voor klanten; sleutels die beginnen met één `_` zijn ook verborgen wanneer de winkelwageninstelling **Hide properties starting with single underscore "\_"** aan staat. * `gift_card (boolean)` - Of dit artikel een cadeaubon is * `taxable (boolean)` - Of dit artikel belastbaar is * `requires_shipping (boolean)` - Of dit artikel verzending vereist * `grams (number)` - Artikelgewicht in grammen

#### **Kortingen en promoties**

* `discounts (Array)` - Vereenvoudigde kortingsinformatie: * `amount (number)` - Kortingsbedrag in centen * `title (string)` - Titel/naam van de korting * `line_level_discount_allocations (Array)` - Gedetailleerde informatie over de kortingstoewijzing: * `amount (number)` - Kortingsbedrag in centen * `discount_application (object)` - Volledige details van de kortingstoepassing: * `allocation_method (string)` - Hoe de korting wordt toegewezen * `created_at (string)` - Wanneer de korting is aangemaakt * `description (string | null)` - Kortingsbeschrijving * `key (string)` - Sleutelidentifier van de korting * `target_selection (string)` - Waarop de korting is gericht * `target_type (string)` - Type doelwit * `title (string)` - Kortingstitel * `total_allocated_amount (number)` - Totaal toegewezen bedrag * `type ('discount_code' | '')` - Kortingstype (lege string voor automatische kortingen) * `value (string)` - Kortingswaarde * `value_type (string)` - Hoe de waarde wordt toegepast

#### **Bundelproducten**

* `has_components (boolean | undefined)` - Of dit artikel een bundel is die andere producten bevat (alleen in GET cart-reacties) * `item_components (Array | null | undefined)` - Details van bundelcomponenten: * `quantity (number)` - Aantal van dit component * `image (object)` - Componentafbeelding: * `url (string)` - Afbeeldings-URL * `height (number | null)` - Afbeeldingshoogte * `width (number | null)` - Afbeeldingsbreedte * `alt (string)` - Alt-tekst * `product (object)` - Productinformatie van het component: * `title (string)` - Producttitel * `has_only_default_variant (boolean)` - Of het product alleen een standaardvariant heeft * `variantTitle (string)` - Varianttitel van het component

#### **Bedrijfsregels**

* `quantity_rule (object | undefined)` - Aantalbeperkingen (alleen in GET cart-reacties): * `min (number)` - Minimaal toegestaan aantal * `max (number | null)` - Maximaal toegestaan aantal (null = geen limiet) * `increment (number)` - Stapgrootte voor het aantal

#### **Abonnementsinformatie**

* `selling_plan_allocation (object | undefined)` - Details van abonnement/verkoopplan: * `price (number)` - Abonnementsprijs in centen * `compare_at_price (number | null)` - Vergelijkingsprijs van het abonnement * `per_delivery_price (number)` - Prijs per levering * `selling_plan (object)` - Details van het verkoopplan: * `id (number)` - ID van het verkoopplan * `name (string)` - Plannaam * `description (string)` - Planbeschrijving * `options (Array)` - Planopties: * `name (string)` - Optienaam * `position (number)` - Optiepositie * `value (string)` - Optiewaarde * `recurring_deliveries (boolean)` - Of het plan terugkerende leveringen heeft

#### **Integratiemetadata**

* `__appIntegrated (object | undefined)` - Integratiegegevens van externe apps: * `app ('stay.ai')` - Identifier van de geïntegreerde app * `bundleRole ('parent' | 'child')` - Rol in de bundelstructuur

## Upsells

Met de Upsells-module kun je de weergave van upsell-producten aanpassen met je eigen ontwerp, terwijl essentiële e-commercefunctionaliteit behouden blijft, zoals variantselectie, toevoegen-aan-winkelwagen-acties en de weergave van productinformatie.

### **Beschikbare props - Sjabloon voor upsell-tegel**

Upsell-tegel met een product met aanbiedingsprijs, variantdropdown en Add-knop

`itemUrl` * **Type**: `string` * **Beschrijving**: De URL van de productpagina * **Gebruik**: Maak links naar de productdetailpagina voor verbeterde gebruikersnavigatie ```

``` `imageUrl` * **Type**: `string | undefined` * **Beschrijving**: De URL van de productafbeelding * **Gebruik**: Toon productafbeeldingen in aangepaste upsell-implementaties * **Fallback**: Ga netjes om met undefined-waarden via placeholder-afbeeldingen `description` * **Type**: `string` * **Beschrijving**: De beschrijving van het product * **Gebruik**: Toon de productbeschrijving in aangepaste upsell-implementaties `altText` * **Type**: `string` * **Beschrijving**: Alt-tekst voor de productafbeelding voor toegankelijkheid * **Gebruik**: Bied ondersteuning voor schermlezers en verbeter de naleving van toegankelijkheidsrichtlijnen ``` {props.altText}

``` `productId` * **Type**: `string` * **Beschrijving**: De unieke identifier voor het product * **Gebruik**: Volg producten, implementeer analytics of gebruik in de functionaliteit voor toevoegen aan winkelwagen `productTitle` * **Type**: `string` * **Beschrijving**: De titel/naam van het product * **Gebruik**: Toon de productnaam in aangepaste upsell-implementaties ```

{props.productTitle}

``` `oldPrice` & `newPrice` * **Type**: `string | null` (oldPrice), `string` (newPrice) * **Beschrijving**: Opgemaakte vergelijkingsprijs en huidige prijs * **Gebruik**: Toon prijsinformatie met aanbiedingsindicatoren `isSingleVariant` * **Type**: `boolean` * **Beschrijving**: Geeft aan of het product slechts één variant heeft * **Gebruik**: Render UI-elementen voor variantselectie voorwaardelijk `productOptions` * **Type**: `{ name: string; position: 1 | 2 | 3; values: string[]; }[]` * **Beschrijving**: Volledige configuratie van productopties, inclusief alle beschikbare keuzes * **Gebruik**: Toegang tot gedetailleerde productoptie-informatie voor geavanceerde UI voor variantselectie `variantOptions` * **Type**: `{ label: string; value: string }[]` * **Beschrijving**: Beschikbare variantopties voor het product * **Gebruik**: Maak dropdowns of knoppen voor variantselectie * **Structuur**: Elke optie bevat een weergavelabel en een unieke waarde-identifier `selectedVariantId` & `selectedVariantLabel` * **Type**: string (selectedVariantId), string | undefined (selectedVariantLabel) * **Beschrijving**: Het momenteel geselecteerde variant-ID en het bijbehorende weergavelabel * **Gebruik**: Volg en toon de informatie van de geselecteerde variant `onVariantChange` * **Type**: `(variantId: string) => void` * **Beschrijving**: Functie om wijzigingen in de variantselectie te verwerken * **Gebruik**: Werk de geselecteerde variant bij wanneer de gebruiker een selectie maakt `onAddClick` * **Type**: `(productId: string, variantId?: string) => void` * **Beschrijving**: Functie om het toevoegen van het product aan de winkelwagen te verwerken * **Gebruik**: Implementeer de functionaliteit voor toevoegen aan winkelwagen met de juiste product- en variantidentificatie ``` ``` `rating` & `reviewCount` * **Type**: `number | undefined` (rating), `string | undefined` (reviewCount) * **Beschrijving**: Productbeoordeling en opgemaakte tekst met het aantal reviews * **Gebruik**: Toon social proof en indicatoren van productkwaliteit `addLoading` & `addButtonText` * **Type**: `boolean` (addLoading), `string` (addButtonText) * **Beschrijving**: Laadstatus voor de actie toevoegen aan winkelwagen en de knoptekst * **Gebruik**: Geef gebruikersfeedback tijdens winkelwagenbewerkingen en pas de knoptekst aan `cartItemsCount` * **Type**: `number` * **Beschrijving**: Het huidige aantal artikelen in de winkelwagen * **Gebruik**: Toon de winkelwagenstatus of implementeer op de winkelwagen gebaseerde logica

## Extra notities

Met de Notes-module kun je de functionaliteit voor winkelwagennotities aanpassen met je eigen ontwerp, terwijl essentiële notitiemogelijkheden behouden blijven, zoals uitklapbare secties, tekstinvoerverwerking en laadstatussen.

### **Beschikbare props - Volledig sjabloon**

Notitiesectie in de winkelwagen met een uitklapbaar tekstveld voor speciale instructies

`cartNote` * **Type**: `string` * **Beschrijving**: De huidige inhoud van de winkelwagennotitie die door de klant is ingevoerd * **Gebruik**: Toon en beheer de notitietekst in aangepaste implementaties ```

```

`notesPlaceholder`

* **Type**: `string`

* **Beschrijving**: Placeholdertekst voor het notitie-invoerveld

* **Gebruik**: Geef klanten richtlijnen over wat ze in hun notities kunnen zetten

```
<textarea  
  placeholder={props.notesPlaceholder}  
  ...  
/>
```

`notesTitle`

* **Type**: `string`

* **Beschrijving**: De titel/koptekst van de notitiesectie

* **Gebruik**: Toon de sectietitel in aangepaste notitie-implementaties

```
<h3 className="notes-title" dangerouslySetInnerHTML={{ __html: props.notesTitle }} />
```

`chevronDownIconComponent`

* **Type**: `React.ReactElement`

* **Beschrijving**: Vooraf gerenderd chevron-pictogramcomponent voor uitklap-/inklapfunctionaliteit

* **Gebruik**: Toon consistente uitklap-/inklapindicatoren in aangepaste implementaties

`loadingIndicatorComponent`

* **Type**: `React.ReactElement | null`

* **Beschrijving**: Vooraf gerenderd laadindicatorcomponent voor asynchrone bewerkingen

* **Gebruik**: Toon laadstatussen tijdens het opslaan van notities

`handleCartNoteChange`

* **Type**: `(newCartNote: string) => void`

* **Beschrijving**: Functie om wijzigingen in de inhoud van de winkelwagennotitie te verwerken

* **Gebruik**: Werk de winkelwagennotitie bij wanneer de gebruiker de tekst wijzigt

`isExpanded`

* **Type**: `boolean`

* **Beschrijving**: Geeft aan of de notitiesectie momenteel is uitgeklapt

* **Gebruik**: Bepaal de zichtbaarheid van het notitie-invoergebied

`toggleCollapsible`

* **Type**: `() => void`

* **Beschrijving**: Functie om de uitgeklapte/ingeklapte status van de notitiesectie om te schakelen

* **Gebruik**: Koppel aan knoppen of interactieve elementen om de zichtbaarheid van de sectie te regelen

***

<div id="footer-section">
  ## Sectie Footer
</div>

Met de Addons-module kun je de weergave van add-on-producten aanpassen met je eigen ontwerp, terwijl essentiële e-commercefunctionaliteit behouden blijft, zoals de weergave van productinformatie, prijzen, schakelbediening en valutaopmaak.

<div id="available-props-full-template-6">
  ### **Beschikbare props - Volledig sjabloon**
</div>

`addonProduct`

* **Type**:

```
  {  
    product: {  
      id: number;  
      title: string;  
      description: string;  
    };  
    variant: {  
      id: number;  
      price: number;  
      compare_at_price: number | null;  
    };  
    image: {  
      src: string;  
      alt: string;  
    };  
  }
  ```

* **Beschrijving**: Volledige informatie over het add-on-product, inclusief productdetails, variantprijzen en afbeeldingsgegevens

* **Gebruik**: Toegang tot alle productinformatie die nodig is om add-on-producten weer te geven

* **Structuur**: Bevat geneste product-, variant- en afbeeldingsobjecten met uitgebreide productgegevens

* **Eigenschappen van het productobject** `addonProduct.product`

* **id**: Unieke numerieke identifier voor het product
    * **title**: Weergavenaam van het add-on-product
    * **description**: HTML-beschrijvingsinhoud van het product
  * **Eigenschappen van het variantobject**

* **id**: Unieke numerieke identifier voor de variant
    * **price**: Huidige prijs in centen
    * **compare\_at\_price**: Originele prijs in centen (null als er geen vergelijkingsprijs is)
  * **Eigenschappen van het afbeeldingsobject**

* **src**: URL van de productafbeelding
    * **alt**: Alt-tekst voor de afbeelding (voor toegankelijkheid)

`toggle`

* **Type**:

```
  {  
    state: 'enabled' | 'disabled' | 'loading';  
    handleEnable: () => void;  
    handleDisable: () => void;  
  } | null
  ```

* **Beschrijving**: Status en handlers van de schakelbediening voor het in-/uitschakelen van de add-on

* **Gebruik**: Implementeer interactieve schakelfunctionaliteit voor de selectie van add-ons

* **Statussen**: Drie mogelijke statussen — enabled, disabled en loading

* **Handlers**: Aparte functies voor in- en uitschakelacties

`moneyFormat`

* **Type**: `string`

* **Beschrijving**: De valutaopmaakstring die wordt gebruikt voor prijsopmaak

* **Gebruik**: Geef door aan de functie formatMoney voor een consistente valutaweergave

`formatMoney`

* **Type**:

```
  (options: {  
    cents: string | number;  
    format?: string;  
    shouldRemoveHTML?: boolean;  
  }) => string
  ```

* **Beschrijving**: Hulpfunctie voor het opmaken van valutawaarden

* **Gebruik**: Maak prijzen consistent op volgens de valuta-instellingen van de winkel

* **Parameters**: Neemt een waarde in centen, een optionele opmaakstring en een optie voor HTML-verwijdering

<div id="discount-codes">
  ## Kortingscodes
</div>

Met de Discount Code-module kun je de invoerfunctionaliteit voor kortingscodes aanpassen met je eigen ontwerp, terwijl essentiële e-commercemogelijkheden behouden blijven, zoals codevalidatie, formulierverzending en gebruikersfeedback.

<div id="available-props-full-template-7">
  ### **Beschikbare props - Volledig sjabloon**
</div>

`indicator`

* **Type**: `'validating' | 'invalid' | 'none'`

* **Beschrijving**: Huidige validatiestatus van de kortingscode-invoer

* **Gebruik**: Toon passende UI-feedback op basis van de validatiestatus

* **Statussen**:

* `validating`: De code wordt verwerkt/gevalideerd
  * `invalid`: De codevalidatie is mislukt
  * `none`: Geen validatiestatus (standaard/inactief)

`discountCodeInput`

* **Type**: `string`

* **Beschrijving**: Huidige waarde van het invoerveld voor de kortingscode

* **Gebruik**: Toon en beheer de kortingscodetekst die de gebruiker heeft ingevoerd

```
<input  
  type="text"  
  value={props.discountCodeInput}  
  onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
  ...  
/>
```

`discountCodePlaceholder`

* **Type**: `string`

* **Beschrijving**: Placeholdertekst voor het invoerveld van de kortingscode

* **Gebruik**: Geef gebruikers richtlijnen over wat ze in het invoerveld moeten invullen

`discountCodeButtonText`

* **Type**: `string`

* **Beschrijving**: Tekst die op de knop toepassen/verzenden wordt weergegeven

* **Gebruik**: Pas de knoptekst voor het verzenden van kortingscodes aan

`setDiscountCodeInput`

* **Type**: `(value: string | ((prev: string) => string)) => void`

* **Beschrijving**: Functie om de invoerwaarde van de kortingscode bij te werken

* **Gebruik**: Verwerk invoerwijzigingen van de gebruiker in het kortingscodeveld

`handleSubmit`

* **Type**: `(e: React.FormEvent<HTMLFormElement>) => void`

* **Beschrijving**: Functie om de formulierverzending voor het toepassen van kortingscodes te verwerken

* **Gebruik**: Verwerk de validatie en toepassing van kortingscodes

* **Event**: Verwerkt formulierverzendingsevents

```
<form onSubmit={props.handleSubmit} >  
  <div className="input-group">  
    <input  
      type="text"  
      value={props.discountCodeInput}  
      onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
      placeholder={props.discountCodePlaceholder}  
    />   
    <button   
      type="submit"  
      disabled={props.indicator === 'validating' || !props.discountCodeInput.trim()}  
    >  
      {props.discountCodeButtonText}  
    </button>  
  </div>  
</form>
```

<div id="cart-summary">
  ## Winkelwagenoverzicht
</div>

Met de Cart Summary-module kun je de weergave van het winkelwagenoverzicht en de kortingen aanpassen met je eigen ontwerp, terwijl essentiële e-commercefunctionaliteit behouden blijft, zoals kortingsbeheer, besparingsberekening en prijstransparantie.

<div id="available-props-full-template-8">
  ### **Beschikbare props - Volledig sjabloon**
</div>

`totalSavingsText`

* **Type**: `string`

* **Beschrijving**: Tekstlabel voor de sectie met totale besparingen

* **Gebruik**: Toon het besparingslabel in aangepaste implementaties van het winkelwagenoverzicht

`discountApplications`

* **Type**:

```
  {  
    key: string;  
    title: string;  
    type: 'discount_code' | '';  
  }[]
  ```

* **Beschrijving**: Array van toegepaste kortingscodes en automatische kortingen

* **Gebruik**: Toon alle actieve kortingen met hun titels en typen

* **Structuur**: Elke korting bevat een unieke sleutel, een weergavetitel en een type-identifier

`cartTotalDiscount`

* **Type**: `number`

* **Beschrijving**: Het totale kortingsbedrag in centen

* **Gebruik**: Toegang tot de ruwe kortingswaarde voor berekeningen of aangepaste opmaak

`showCartTotalDiscount`

* **Type**: `boolean`

* **Beschrijving**: Geeft aan of de totale korting moet worden weergegeven. Gemarkeerd als verouderd ten gunste van `showTotalSavings`, maar zie de opmerking hieronder — binnen een aangepast sjabloon is dit nog steeds de prop die je hebt.

* **Gebruik**: Render kortingsinformatie voorwaardelijk op basis van instellingen

`formattedCartTotalDiscount`

* **Type**: `string`

* **Beschrijving**: Vooraf opgemaakte HTML-string van het totale kortingsbedrag. Gemarkeerd als verouderd ten gunste van `formattedTotalSavings`, maar zie de opmerking hieronder.

* **Gebruik**: Toon een correct opgemaakt kortingsbedrag met valutasymbolen

<Warning>
  **`showTotalSavings` en `formattedTotalSavings` zijn niet beschikbaar binnen een aangepast sjabloon.** Ze bestaan in de interne context van de module, maar het Cart summary-sjabloon krijgt alleen `showCartTotalDiscount` en `formattedCartTotalDiscount` — het lezen van het nieuwere paar geeft `undefined` terug. Gebruik de twee hierboven, en houd er rekening mee dat ze alleen het kortingstotaal tonen; ze volgen de instelling **Show compare-at price savings in footer total** niet.
</Warning>

`isRemovingDiscount`

* **Type**: `boolean`

* **Beschrijving**: Geeft aan of het verwijderen van een korting bezig is

* **Gebruik**: Toon laadstatussen tijdens het verwijderen van kortingen

`handleRemoveDiscount`

* **Type**: `() => Promise<void>`

* **Beschrijving**: Functie om het verwijderen van kortingscodes te verwerken

* **Gebruik**: Verwijder toegepaste kortingscodes uit de winkelwagen

`totalCompareAtPrice`

* **Type**: `number`

* **Beschrijving**: Het opgetelde totaal van de vergelijkingsprijzen (alle artikelen in de winkelwagen)

* **Gebruik**: Bereken en toon besparingen of oorspronkelijke prijsinformatie

`totalAfterAllDiscounts`

* **Type**: `number`

* **Beschrijving**: Eindtotaal van de winkelwagen in centen nadat alle kortingen zijn toegepast

* **Gebruik**: Toon de uiteindelijke prijs die klanten betalen

`originalTotalPrice`

* **Type**: `number`

* **Beschrijving**: Oorspronkelijk winkelwagentotaal in centen vóór eventuele kortingen

* **Gebruik**: Toon de oorspronkelijke prijzen voor transparantie en besparingsberekening

`cartItemCount`

* **Type**: `number`

* **Beschrijving**: Totaal aantal artikelen in de winkelwagen

* **Gebruik**: Toon informatie over het aantal artikelen in winkelwagenoverzichten

<div id="trust-badges">
  ## Vertrouwensbadges
</div>

Met de Trust Badges-module kun je de weergave van vertrouwensbadges aanpassen met je eigen ontwerp, terwijl essentiële vertrouwenwekkende functionaliteit behouden blijft, zoals voorwaardelijke badgezichtbaarheid en correcte afbeeldingsverwerking.

<div id="available-props-full-template-9">
  ### **Beschikbare props - Volledig sjabloon**
</div>

`showBadge`

* **Type**: `boolean`

* **Beschrijving**: Geeft aan of de vertrouwensbadge moet worden weergegeven

* **Gebruik**: Bepaal de zichtbaarheid van vertrouwensbadges op basis van de module-instellingen

`badgeUrl`

* **Type**: `string`

* **Beschrijving**: De URL van de weer te geven afbeelding van de vertrouwensbadge

* **Gebruik**: Bron-URL voor de afbeelding van de vertrouwensbadge in aangepaste implementaties

Shopping Cart ({props.cartQuantity})

{rule.title}

Available Rewards...

{props.productTitle}