``` `timer` * **Type**: `string` * **Beskrivelse**: Den aktuelle timerværdi formateret som en streng * **Anvendelse**: Vis nedtællingstimer i brugerdefinerede meddelelsesimplementeringer ```

Time remaining: {props.timer}

``` `shouldUseTimer` * **Type**: `boolean` * **Beskrivelse**: Angiver, om timerfunktionaliteten er aktiveret for denne meddelelse * **Anvendelse**: Rendér betinget timerrelateret indhold og kontroller ```

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

``` `isTimerExpiredAndShouldHide` * **Type**: `boolean` * **Beskrivelse**: Angiver, om timeren er udløbet, og meddelelsen skal skjules * **Anvendelse**: Styr synligheden af hele meddelelsen baseret på timertilstanden ```

{!props.isTimerExpiredAndShouldHide && (

{props.timer}

)}

```

## Trinvise belønninger

Rewards-modulet giver dig mulighed for at tilpasse visningen af belønningsfremskridt med dit eget design, samtidig med at essentiel belønningsfunktionalitet som milepælssporing, visualisering af fremskridt og belønningsbeskeder bevares.

### Tilgængelige props - **Fuld skabelon**

Fremskridtsbjælke for trinvise belønninger med milepælsikoner for gratis fragt og produkt

`rewardsMessageHtml` * **Type**: `string` * **Beskrivelse**: HTML-indholdet til belønningsbeskeden * **Anvendelse**: Vis belønningsbeskeden med rig formatering i brugerdefinerede implementeringer ```

``` `milestonesCompleted` * **Type**: `number` * **Beskrivelse**: Antallet af milepæle, der er fuldført * **Anvendelse**: Vis antal fuldførte eller beregn fuldførelsesprocent ```

{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; }; } ``` * **Beskrivelse**: Komplet milepælskonfiguration og fremskridtsdata for belønningssystemet * **Anvendelse**: Få adgang til milepælsinformation, fremskridtsprocent og visningsindstillinger * **Egenskaber**: * `milestonesToRender`: Array af milepælsobjekter med fuldførelsesstatus og placering * `progressPercent`: Aktuelt fremskridt som en procentdel (0-100) * `showMilestones`: Om milepælsmarkører skal vises * `settings`: Visuel konfiguration af milepælsvisningen

## Rabatter

Discounts-modulet understøtter brugerdefinerede skabeloner, så du kan designe din egen visning, samtidig med at essentiel funktionalitet som regelstyring, sektionssynlighed og belønningspræsentation bevares. Modulets interne typeidentifikator for brugerdefinerede skabeloner er `TRIGGERED_REWARDS` af hensyn til bagudkompatibilitet med eksisterende brugerdefineret skabelonkode.

### **Tilgængelige props - Fuld skabelon**

`rules` * **Type**: ``` { id: string; title: string; description: string; conditionsMet: boolean; }[] ``` * **Beskrivelse**: Array af Discount-regler, der i øjeblikket er aktiveret * **Anvendelse**: Vis tilgængelige belønninger, deres titler, beskrivelser, og om hver regels betingelser er opfyldt * **Egenskaber**: * `id`: Unik identifikator for belønningsreglen * `title`: Titel på Discount-reglen * `description`: Beskrivelse af belønningsreglen * `conditionsMet`: Om reglens betingelser i øjeblikket er opfyldt af kurven. Brug dette til at bygge UX-mønstre som "du har låst X op" vs. "brug \$Y mere for at låse X op" ```

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

{rule.title}

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

))}

``` `showSection` * **Type**: `boolean` * **Beskrivelse**: Angiver, om Discounts-sektionen skal vises * **Anvendelse**: Styr synligheden af hele Discounts-modulet ```

{props.showSection && (

Available Rewards...

)}

``` `onToggleSection` * **Type**: `() => void` * **Beskrivelse**: En callback-funktion, der skifter synlighedstilstanden for Discounts-sektionen * **Anvendelse**: Knyt til knapper eller interaktive elementer for at lade brugere vise/skjule belønningssektionen ``` ```

## Anbefalinger

Recommendation-modulet giver dig mulighed for at tilpasse visningen af upsell-produkter med dit eget design, samtidig med at essentiel e-handelsfunktionalitet som variantvalg, læg-i-kurv-handlinger og visning af produktinformation bevares.

### **Tilgængelige props - Anbefalingsflise-skabelon**

Anbefalingsflise, der viser et snowboard-produkt med pris og Add-knap

*Anbefalingsflise-skabelonen deler [samme prop-interface som upsell-flise-skabelonen](#available-props-upsell-tile-template) i Upsells-modulet. Alle tilgængelige props, typer og anvendelseseksempler er dokumenteret i Upsells-modulsektionen nedenfor.*

## Kurvvarer

Cart Items-modulet giver dig mulighed for at tilpasse visningen af kurvvarer med dit eget design, samtidig med at essentiel e-handelsfunktionalitet bevares. Dette modul tilbyder flere skabelontyper, hver med deres egne specifikke props til forskellige aspekter af visningen af kurvvarer. **Visning af en indlæsningsindikator under læg-i-kurv eller kurvopdateringer:** Standard Cart Items-modulet eksponerer ikke en indbygget "tilføjer til kurv"-spinner. Hvis du vil vise en indlæsningstilstand, mens en vare tilføjes, eller en kurvoperation er i gang, skal du bruge produktflise-skabelonen og læse props'ene `isLoading` og `loadingOperation` (dokumenteret nedenfor) for betinget at rendere en spinner eller et overlay. Brugerdefinerede skabeloner kræver udviklererfaring — se meddelelsen øverst på denne side.

### **Tilgængelige props - Produktflise-skabelon**

**Bemærk:** Aktivering af *Product Tile*-skabelonen tilsidesætter alle andre skabeloner i dette modul, herunder **Variant template**, **Properties template**, **Bundle template** og **Price template**.\ Hvis du vil bruge brugerdefineret kode i nogen af disse skabeloner, ***skal*** *du slå Product Tile-skabelonen fra.* Produktflise i kurven med billede, variant, tilbudspris, antalsvælger og abonnér-knap

Produktflise i kurven med billede, variant, tilbudspris, antalsvælger og abonnér-knap

`title` * **Type**: `string` * **Beskrivelse**: Produktets titel/navn * **Anvendelse**: Vis det primære produktnavn i kurvvarer `variant` * **Type**: `React.ReactNode` * **Beskrivelse**: Forudrenderet variantinformationskomponent * **Anvendelse**: Vis variantdetaljer som en React-komponent `properties` * **Type**: `React.ReactNode` * **Beskrivelse**: Forudrenderet produktegenskabskomponent * **Anvendelse**: Vis produktegenskaber og abonnementsinfo som en React-komponent `bundle` * **Type**: `React.ReactNode` * **Beskrivelse**: Forudrenderet komponent med bundle-detaljer * **Anvendelse**: Vis bundle-information som en React-komponent `compareAtPrice` * **Type**: `string | undefined` * **Beskrivelse**: Formateret sammenligningspris (oprindelig pris) * **Anvendelse**: Vis oprindelig pris for tilbudsvarer `price` * **Type**: `string` * **Beskrivelse**: Formateret aktuel pris * **Anvendelse**: Vis varens aktuelle pris `savings` * **Type**: `string | undefined` * **Beskrivelse**: Formateret besparelsesbeløb * **Anvendelse**: Vis, hvor meget kunden sparer `imageUrl` * **Type**: `string | undefined` * **Beskrivelse**: URL til produktbillede * **Anvendelse**: Vis produktbillede `productUrl` * **Type**: `string | undefined` * **Beskrivelse**: URL til produktside * **Anvendelse**: Link til produktdetaljesiden `quantity` * **Type**: `number` * **Beskrivelse**: Varens aktuelle antal i kurven * **Anvendelse**: Vis og administrér vareantal `showQuantitySelector` * **Type**: `boolean` * **Beskrivelse**: Om antalskontroller skal vises * **Anvendelse**: Vis antalsvælgeren betinget `discountCodes` * **Type**: `string[] | undefined` * **Beskrivelse**: Array af anvendte rabatkoder for denne vare * **Anvendelse**: Vis varespecifikke rabatter `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; } ``` * **Beskrivelse**: Komplet objekt til abonnementsstyring med opgraderingsdata, salgsplaner og handlerfunktioner * **Anvendelse**: Administrér abonnementsfunktionalitet * Subscription-objektet indeholder: * **subscriptionUpgradeData**: Opgraderingsinformation (null, hvis ingen opgradering er tilgængelig) * `buttonText`: Tekst til opgraderingsknappen * `defaultSellingPlanId`: ID for standardsalgsplanen til opgraderinger * **sellingPlansData**: Tilgængelige salgsplansmuligheder (null, hvis ingen planer) * `sellingPlanGroups`: Array af plangrupper med deres salgsplaner * `activeSellingPlanId`: ID for den aktuelt valgte salgsplan * `oneTimePurchaseText`: Tekst til engangskøbsmuligheden (null, hvis ikke tilgængelig) * **upgradeSellingPlan**: Funktion til at opgradere til en specifik salgsplan * **changeSellingPlan**: Funktion til at ændre den aktuelle salgsplan * **getSellingPlanGroupText**: Hjælpefunktion til at formatere visningsteksten for salgsplaner `onIncrease` * **Type**: `() => void` * **Beskrivelse**: Funktion til at øge vareantallet * **Anvendelse**: Håndtér handlinger til forøgelse af antal `onDecrease` * **Type**: `() => void` * **Beskrivelse**: Funktion til at mindske vareantallet * **Anvendelse**: Håndtér handlinger til formindskelse af antal `onDeleteProduct` * **Type**: `() => void` * **Beskrivelse**: Funktion til at fjerne varen fra kurven * **Anvendelse**: Håndtér fjernelse af varer `onQuantityChange` * **Type**: `(quantity: string) => void` * **Beskrivelse**: Funktion til at håndtere direkte antalsinput * **Anvendelse**: Håndtér manuelle antalsændringer `handleInputChange` * **Type**: `(e: React.ChangeEvent) => void` * **Beskrivelse**: Inputændringshandler til antalsfeltet * **Anvendelse**: Håndtér ændringer i antalsinputfeltet `replaceItemWithVariant` * **Type**: `(variantId: string) => Promise<{ success: boolean }>` * **Beskrivelse**: Funktion til at erstatte varen med en anden variant * **Anvendelse**: Håndtér variantskift `isLoading` * **Type**: `boolean` * **Beskrivelse**: Indlæsningstilstand for kurvoperationer * **Anvendelse**: Vis indlæsningsindikatorer `loadingOperation` * **Type**: `'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined` * **Beskrivelse**: Den specifikke operation, der indlæses i øjeblikket * **Anvendelse**: Vis operationsspecifikke indlæsningstilstande `setLoadingOperation` * **Type**: `(op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void` * **Beskrivelse**: Funktion til at sætte tilstanden for indlæsningsoperationen * **Anvendelse**: Administrér indlæsningstilstande for forskellige operationer `rawItem` * **Type**: `CartItem` (Se `CartItem`-[typen nedenfor](#cartitem-object-properties)) * **Beskrivelse**: Rå kurvvaredata, der indeholder al information

### **Tilgængelige props - Variantskabelon**

Kurvvarens variantlinje, der viser den valgte størrelse Medium

`item` * **Type**: `CartItem` (Se `CartItem`-[typen nedenfor](#cartitem-object-properties)) * **Beskrivelse**: Rå kurvvaredata, der indeholder variantinformation * **Anvendelse**: Få adgang til variantdetaljer fra kurvvaren

### **Tilgængelige props - Egenskabsskabelon**

Kurvvarens egenskabslinje, der viser en gavebeskedsnote

`productProperties` * **Type**: `{ key: string; value: string; isUrl?: boolean; }[]` * **Beskrivelse**: Array af produktegenskaber (brugerdefinerede felter, linjevareegenskaber) `subscriptionLabel` * **Type**: `string | undefined` * **Beskrivelse**: Etiket til abonnementsinformation

### **Tilgængelige props - Bundle-skabelon**

Udvidet bundle, der viser tre inkluderede komponentprodukter med varianter

`getSizedImageUrl` * **Type**: `getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string` * **Beskrivelse**: Hjælpefunktion til at hente korrekt dimensionerede billed-URL'er `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; } ``` * **Beskrivelse**: Bundle-vareinformation inklusive komponenter. `itemComponents` er et array af komponentobjekter — map over det for at rendere hver bundlet komponent. `showDetailsText` * **Type**: `string | undefined` * **Beskrivelse**: Tekst til "vis detaljer"-handlingen * **Anvendelse**: Vis udvidknappens tekst `hideDetailsText` * **Type**: `string | undefined` * **Beskrivelse**: Tekst til "skjul detaljer"-handlingen `isExpanded` * **Type**: `boolean` * **Beskrivelse**: Om bundle-detaljerne er udvidet `toggleCollapsible` * **Type**: `() => void` * **Beskrivelse**: Funktion til at skifte synligheden af bundle-detaljer * **Anvendelse**: Håndtér udvid/sammenfold-handlinger `chevronDownIconComponent` * **Type**: `React.ReactElement` * **Beskrivelse**: Forudrenderet chevron-ikon til udvid/sammenfold * **Anvendelse**: Vis en ensartet udvid/sammenfold-indikator

### **Tilgængelige props - Prisskabelon**

Kurvpris, der viser den oprindelige pris gennemstreget med tilbudspris og besparelser

`compareAtPrice` * **Type**: `string | undefined` * **Beskrivelse**: Formateret sammenligningspris (oprindelig pris) * **Anvendelse**: Vis oprindelig pris for tilbudsvarer `price` * **Type**: `string` * **Beskrivelse**: Formateret aktuel pris * **Anvendelse**: Vis varens aktuelle pris `savings` * **Type**: `string | undefined` * **Beskrivelse**: Formateret besparelsesbeløb * **Anvendelse**: Vis, hvor meget kunden sparer

### **CartItem-objektets egenskaber**

`CartItem`-objektet indeholder al detaljeret information om en kurvlinjevare. Dette objekt er tilgængeligt som props.rawItem i produktflise-skabelonen og props.item i variantskabelonen.

#### **Kerneidentifikation**

* `key (string)` - Unik identifikator for denne kurvvare. * `id (number)` - Variant-ID (ældre felt, brug variant\_id i stedet) * `variant_id (number)` - Shopify-variant-ID'et for denne vare * `product_id (number)` - Shopify-produkt-ID'et * `lineIdxFrom1 (number)` - 1-baseret indeks for denne vare i den oprindelige kurv før ændringer

#### **Produktinformation**

* `title (string)` - Linjevarens titel (normalt varianttitlen) * `product_title (string)` - Produktets hovedtitel * `handle (string)` - Produktets URL-handle (f.eks. "camp-stool") * `vendor (string)` - Produktets leverandør-/brandnavn * `product_type (string)` - Produktkategori/-type til skatteformål * `sku (string)` - SKU-identifikator (Stock Keeping Unit) * `product_description (string)` - Fuld produktbeskrivelse * `product_has_only_default_variant (boolean)` - Om produktet kun har én variant

#### **Priser (alle priser i cents)**

* `quantity (number)` - Antal af denne vare i kurven * `price (number)` - Enhedspris før rabatter * `original_price (number)` - Samme som price * `discounted_price (number)` - Enhedspris efter rabatter på produktniveau * `compare_at_price (number | null)` - Sammenligningspris (MSRP). Bemærk: Dette felt tilføjes af Upcart og leveres ikke af Shopifys kurv-API * `final_line_price (number)` - Samlet pris efter rabatter på produktniveau (quantity × discounted\_price) * `original_line_price (number)` - Samlet pris før rabatter (quantity × price) * `line_price (number)` - Samlet pris efter alle rabatter * `final_price (number)` - **Forældet** - Enhedspris efter produktrabatter (tager ikke højde for antal) * `total_discount (number)` - Samme som line\_level\_total\_discount * `line_level_total_discount (number)` - Samlet rabatbeløb anvendt på denne linjevare

#### **Medier & URL'er**

* `image (string)` - URL til det primære produktbillede * `url (string)` - Relativ URL-sti til produktsiden (f.eks. "/products/camp-stool?variant=42789611372803") * `featured_image (object | null)` - Detaljer om det fremhævede billede: * `alt (string)` - Billedets alt-tekst * `aspect_ratio (number)` - Billedets billedformat * `height (number)` - Billedhøjde i pixels * `url (string)` - Billed-URL * `width (number)` - Billedbredde i pixels

#### **Varianter & muligheder**

* `variant_title (string | null)` - Varianttitel (f.eks. "Large / Red") * `variant_options (string[])` - Array af variantmulighedernes værdier * `options_with_values (Array)` - Detaljeret information om muligheder: * `name (string)` - Mulighedens navn (f.eks. "Size") * `value (string)` - Mulighedens værdi (f.eks. "Large") * `untranslated_product_title (string | undefined)` - Oprindelig produkttitel før oversættelse (kun i kurvmutationssvar) * `untranslated_variant_title (string | undefined)` - Oprindelig varianttitel før oversættelse (kun i kurvmutationssvar)

#### **Brugerdefinerede egenskaber & metadata**

* `properties (Record | null)` - Brugerdefinerede linjevareegenskaber, eller `null` når linjen ikke har nogen — tjek, før du læser en nøgle. Egenskaber, hvis nøgler starter med `__`, er altid skjult for kunder; nøgler, der starter med en enkelt `_`, skjules også, når kurvindstillingen **Hide properties starting with single underscore "\_"** er slået til. * `gift_card (boolean)` - Om denne vare er et gavekort * `taxable (boolean)` - Om denne vare er momspligtig * `requires_shipping (boolean)` - Om denne vare kræver forsendelse * `grams (number)` - Varens vægt i gram

#### **Rabatter & kampagner**

* `discounts (Array)` - Forenklet rabatinformation: * `amount (number)` - Rabatbeløb i cents * `title (string)` - Rabattens titel/navn * `line_level_discount_allocations (Array)` - Detaljeret information om rabatallokering: * `amount (number)` - Rabatbeløb i cents * `discount_application (object)` - Fulde detaljer om rabatanvendelsen: * `allocation_method (string)` - Hvordan rabatten allokeres * `created_at (string)` - Hvornår rabatten blev oprettet * `description (string | null)` - Rabatbeskrivelse * `key (string)` - Rabatnøgle-identifikator * `target_selection (string)` - Hvad rabatten målretter * `target_type (string)` - Måltype * `title (string)` - Rabattitel * `total_allocated_amount (number)` - Samlet allokeret beløb * `type ('discount_code' | '')` - Rabattype (tom streng for automatiske rabatter) * `value (string)` - Rabatværdi * `value_type (string)` - Hvordan værdien anvendes

#### **Bundle-produkter**

* `has_components (boolean | undefined)` - Om denne vare er en bundle, der indeholder andre produkter (kun GET-kurvsvar) * `item_components (Array | null | undefined)` - Detaljer om bundle-komponenter: * `quantity (number)` - Antal af denne komponent * `image (object)` - Komponentbillede: * `url (string)` - Billed-URL * `height (number | null)` - Billedhøjde * `width (number | null)` - Billedbredde * `alt (string)` - Alt-tekst * `product (object)` - Komponentens produktinfo: * `title (string)` - Produkttitel * `has_only_default_variant (boolean)` - Om produktet kun har standardvarianten * `variantTitle (string)` - Komponentens varianttitel

#### **Forretningsregler**

* `quantity_rule (object | undefined)` - Antalsbegrænsninger (kun GET-kurvsvar): * `min (number)` - Mindste tilladte antal * `max (number | null)` - Største tilladte antal (null = ingen grænse) * `increment (number)` - Trinstørrelse for antal

#### **Abonnementsinformation**

* `selling_plan_allocation (object | undefined)` - Detaljer om abonnement/salgsplan: * `price (number)` - Abonnementspris i cents * `compare_at_price (number | null)` - Abonnementets sammenligningspris * `per_delivery_price (number)` - Pris pr. levering * `selling_plan (object)` - Salgsplansdetaljer: * `id (number)` - Salgsplan-ID * `name (string)` - Planens navn * `description (string)` - Planens beskrivelse * `options (Array)` - Planens muligheder: * `name (string)` - Mulighedens navn * `position (number)` - Mulighedens position * `value (string)` - Mulighedens værdi * `recurring_deliveries (boolean)` - Om planen har tilbagevendende leveringer

#### **Integrationsmetadata**

* `__appIntegrated (object | undefined)` - Integrationsdata fra tredjepartsapps: * `app ('stay.ai')` - Identifikator for den integrerede app * `bundleRole ('parent' | 'child')` - Rolle i bundle-strukturen

## Upsells

Upsells-modulet giver dig mulighed for at tilpasse visningen af upsell-produkter med dit eget design, samtidig med at essentiel e-handelsfunktionalitet som variantvalg, læg-i-kurv-handlinger og visning af produktinformation bevares.

### **Tilgængelige props - Upsell-flise-skabelon**

Upsell-flise, der viser et produkt med tilbudspris, variant-dropdown og Add-knap

`itemUrl` * **Type**: `string` * **Beskrivelse**: URL'en til produktsiden * **Anvendelse**: Opret links til produktdetaljesiden for forbedret brugernavigation ```

``` `imageUrl` * **Type**: `string | undefined` * **Beskrivelse**: URL'en til produktbilledet * **Anvendelse**: Vis produktbilleder i brugerdefinerede upsell-implementeringer * **Fallback**: Håndtér undefined-værdier elegant med pladsholderbilleder `description` * **Type**: `string` * **Beskrivelse**: Produktets beskrivelse * **Anvendelse**: Vis produktbeskrivelsen i brugerdefinerede upsell-implementeringer `altText` * **Type**: `string` * **Beskrivelse**: Alt-tekst til produktbilledet af hensyn til tilgængelighed * **Anvendelse**: Giv understøttelse af skærmlæsere og forbedr overholdelse af tilgængelighedskrav ``` {props.altText}

``` `productId` * **Type**: `string` * **Beskrivelse**: Den unikke identifikator for produktet * **Anvendelse**: Spor produkter, implementér analytics, eller brug i læg-i-kurv-funktionalitet `productTitle` * **Type**: `string` * **Beskrivelse**: Produktets titel/navn * **Anvendelse**: Vis produktnavnet i brugerdefinerede upsell-implementeringer ```

{props.productTitle}

``` `oldPrice` & `newPrice` * **Type**: `string | null` (oldPrice), `string` (newPrice) * **Beskrivelse**: Formateret sammenligningspris og aktuel pris * **Anvendelse**: Vis prisinformation med tilbudsindikatorer `isSingleVariant` * **Type**: `boolean` * **Beskrivelse**: Angiver, om produktet kun har én variant * **Anvendelse**: Rendér betinget UI-elementer til variantvalg `productOptions` * **Type**: `{ name: string; position: 1 | 2 | 3; values: string[]; }[]` * **Beskrivelse**: Komplet konfiguration af produktmuligheder inklusive alle tilgængelige valg * **Anvendelse**: Få adgang til detaljeret information om produktmuligheder til avanceret UI for variantvalg `variantOptions` * **Type**: `{ label: string; value: string }[]` * **Beskrivelse**: Tilgængelige variantmuligheder for produktet * **Anvendelse**: Opret dropdowns eller knapper til variantvalg * **Struktur**: Hver mulighed indeholder en visningsetiket og en unik værdi-identifikator `selectedVariantId` & `selectedVariantLabel` * **Type**: string (selectedVariantId), string | undefined (selectedVariantLabel) * **Beskrivelse**: Det aktuelt valgte variant-ID og dets visningsetiket * **Anvendelse**: Spor og vis information om den valgte variant `onVariantChange` * **Type**: `(variantId: string) => void` * **Beskrivelse**: Funktion til at håndtere ændringer i variantvalg * **Anvendelse**: Opdatér den valgte variant, når brugeren foretager et valg `onAddClick` * **Type**: `(productId: string, variantId?: string) => void` * **Beskrivelse**: Funktion til at håndtere tilføjelse af produktet til kurven * **Anvendelse**: Implementér læg-i-kurv-funktionalitet med korrekt produkt- og variantidentifikation ``` ``` `rating` & `reviewCount` * **Type**: `number | undefined` (rating), `string | undefined` (reviewCount) * **Beskrivelse**: Produktbedømmelse og formateret tekst med antal anmeldelser * **Anvendelse**: Vis social proof og indikatorer for produktkvalitet `addLoading` & `addButtonText` * **Type**: `boolean` (addLoading), `string` (addButtonText) * **Beskrivelse**: Indlæsningstilstand for læg-i-kurv-handlingen og knaptekst * **Anvendelse**: Giv brugerfeedback under kurvoperationer og tilpas knapteksten `cartItemsCount` * **Type**: `number` * **Beskrivelse**: Det aktuelle antal varer i kurven * **Anvendelse**: Vis kurvstatus eller implementér kurvbaseret logik

## Yderligere noter

Notes-modulet giver dig mulighed for at tilpasse kurvnotefunktionaliteten med dit eget design, samtidig med at essentielle notefunktioner som udvidelige sektioner, håndtering af tekstinput og indlæsningstilstande bevares.

### **Tilgængelige props - Fuld skabelon**

Kurvens notesektion med et udvideligt tekstfelt til særlige instruktioner

`cartNote` * **Type**: `string` * **Beskrivelse**: Det aktuelle kurvnoteindhold indtastet af kunden * **Anvendelse**: Vis og administrér kurvnoteteksten i brugerdefinerede implementeringer ```

```

`notesPlaceholder`

* **Type**: `string`

* **Beskrivelse**: Pladsholdertekst til noteinputfeltet

* **Anvendelse**: Giv kunder vejledning om, hvad de skal inkludere i deres noter

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

`notesTitle`

* **Type**: `string`

* **Beskrivelse**: Titlen/overskriften til notesektionen

* **Anvendelse**: Vis sektionens titel i brugerdefinerede noteimplementeringer

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

`chevronDownIconComponent`

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

* **Beskrivelse**: Forudrenderet chevron-ikonkomponent til udvid/sammenfold-funktionalitet

* **Anvendelse**: Vis ensartede udvid/sammenfold-indikatorer i brugerdefinerede implementeringer

`loadingIndicatorComponent`

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

* **Beskrivelse**: Forudrenderet indlæsningsindikatorkomponent til asynkrone operationer

* **Anvendelse**: Vis indlæsningstilstande under gemning af noter

`handleCartNoteChange`

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

* **Beskrivelse**: Funktion til at håndtere ændringer i kurvnotens indhold

* **Anvendelse**: Opdatér kurvnoten, når brugeren ændrer teksten

`isExpanded`

* **Type**: `boolean`

* **Beskrivelse**: Angiver, om notesektionen i øjeblikket er udvidet

* **Anvendelse**: Styr synligheden af noteinputområdet

`toggleCollapsible`

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

* **Beskrivelse**: Funktion til at skifte mellem udvidet/sammenfoldet tilstand for notesektionen

* **Anvendelse**: Knyt til knapper eller interaktive elementer for at styre sektionens synlighed

***

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

<div id="add-ons">
  ## Tilkøb
</div>

Addons-modulet giver dig mulighed for at tilpasse visningen af tilkøbsprodukter med dit eget design, samtidig med at essentiel e-handelsfunktionalitet som visning af produktinformation, priser, toggle-kontroller og valutaformatering bevares.

<div id="available-props-full-template-6">
  ### **Tilgængelige props - Fuld skabelon**
</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;  
    };  
  }
  ```

* **Beskrivelse**: Komplet information om tilkøbsproduktet inklusive produktdetaljer, variantpriser og billeddata

* **Anvendelse**: Få adgang til al produktinformation, der er nødvendig for at vise tilkøbsprodukter

* **Struktur**: Indeholder indlejrede product-, variant- og image-objekter med omfattende produktdata

* **Product-objektets egenskaber** `addonProduct.product`

* **id**: Unik numerisk identifikator for produktet
    * **title**: Visningsnavn for tilkøbsproduktet
    * **description**: Produktets HTML-beskrivelsesindhold
  * **Variant-objektets egenskaber**

* **id**: Unik numerisk identifikator for varianten
    * **price**: Aktuel pris i cents
    * **compare\_at\_price**: Oprindelig pris i cents (null, hvis der ikke er nogen sammenligningspris)
  * **Image-objektets egenskaber**

* **src**: URL til produktbilledet
    * **alt**: Alt-tekst til billedet (af hensyn til tilgængelighed)

`toggle`

* **Type**:

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

* **Beskrivelse**: Toggle-kontrollens tilstand og handlers til aktivering/deaktivering af tilkøbet

* **Anvendelse**: Implementér interaktiv toggle-funktionalitet til valg af tilkøb

* **Tilstande**: Tre mulige tilstande - enabled, disabled og loading

* **Handlers**: Separate funktioner til aktiverings- og deaktiveringshandlinger

`moneyFormat`

* **Type**: `string`

* **Beskrivelse**: Valutaformatstrengen, der bruges til prisformatering

* **Anvendelse**: Send til formatMoney-funktionen for ensartet valutavisning

`formatMoney`

* **Type**:

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

* **Beskrivelse**: Hjælpefunktion til formatering af valutaværdier

* **Anvendelse**: Formatér priser konsistent med butikkens valutaindstillinger

* **Parametre**: Tager cents-værdi, valgfri formatstreng og en mulighed for HTML-fjernelse

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

Discount Code-modulet giver dig mulighed for at tilpasse funktionaliteten til rabatkodeinput med dit eget design, samtidig med at essentielle e-handelsfunktioner som kodevalidering, formularindsendelse og brugerfeedback bevares.

<div id="available-props-full-template-7">
  ### **Tilgængelige props - Fuld skabelon**
</div>

`indicator`

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

* **Beskrivelse**: Den aktuelle valideringstilstand for rabatkodeinputtet

* **Anvendelse**: Vis passende UI-feedback baseret på valideringsstatus

* **Tilstande**:

* `validating`: Koden behandles/valideres
  * `invalid`: Kodevalideringen mislykkedes
  * `none`: Ingen valideringstilstand (standard/inaktiv)

`discountCodeInput`

* **Type**: `string`

* **Beskrivelse**: Den aktuelle værdi i rabatkodeinputfeltet

* **Anvendelse**: Vis og administrér rabatkodeteksten indtastet af brugeren

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

`discountCodePlaceholder`

* **Type**: `string`

* **Beskrivelse**: Pladsholdertekst til rabatkodeinputfeltet

* **Anvendelse**: Giv brugere vejledning om, hvad de skal indtaste i feltet

`discountCodeButtonText`

* **Type**: `string`

* **Beskrivelse**: Tekst, der skal vises på anvend/indsend-knappen

* **Anvendelse**: Tilpas knapteksten til indsendelse af rabatkoder

`setDiscountCodeInput`

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

* **Beskrivelse**: Funktion til at opdatere rabatkodeinputtets værdi

* **Anvendelse**: Håndtér brugerens inputændringer i rabatkodefeltet

`handleSubmit`

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

* **Beskrivelse**: Funktion til at håndtere formularindsendelse for anvendelse af rabatkoder

* **Anvendelse**: Behandl validering og anvendelse af rabatkoder

* **Event**: Håndterer formularindsendelses-events

```
<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">
  ## Kurvoversigt
</div>

Cart Summary-modulet giver dig mulighed for at tilpasse visningen af kurvoversigt og rabatter med dit eget design, samtidig med at essentiel e-handelsfunktionalitet som rabatstyring, besparelsesberegning og prisgennemsigtighed bevares.

<div id="available-props-full-template-8">
  ### **Tilgængelige props - Fuld skabelon**
</div>

`totalSavingsText`

* **Type**: `string`

* **Beskrivelse**: Tekstetiket til sektionen med samlede besparelser

* **Anvendelse**: Vis besparelsesetiketten i brugerdefinerede kurvoversigtsimplementeringer

`discountApplications`

* **Type**:

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

* **Beskrivelse**: Array af anvendte rabatkoder og automatiske rabatter

* **Anvendelse**: Vis alle aktive rabatter med deres titler og typer

* **Struktur**: Hver rabat indeholder en unik nøgle, visningstitel og typeidentifikator

`cartTotalDiscount`

* **Type**: `number`

* **Beskrivelse**: Det samlede rabatbeløb i cents

* **Anvendelse**: Få adgang til den rå rabatværdi til beregninger eller brugerdefineret formatering

`showCartTotalDiscount`

* **Type**: `boolean`

* **Beskrivelse**: Angiver, om den samlede rabat skal vises. Markeret som forældet til fordel for `showTotalSavings`, men se noten nedenfor — inde i en brugerdefineret skabelon er dette stadig den prop, du har.

* **Anvendelse**: Rendér betinget rabatinformation baseret på indstillinger

`formattedCartTotalDiscount`

* **Type**: `string`

* **Beskrivelse**: Forudformateret HTML-streng med det samlede rabatbeløb. Markeret som forældet til fordel for `formattedTotalSavings`, men se noten nedenfor.

* **Anvendelse**: Vis et korrekt formateret rabatbeløb med valutasymboler

<Warning>
  **`showTotalSavings` og `formattedTotalSavings` er ikke tilgængelige inde i en brugerdefineret skabelon.** De findes i modulets interne kontekst, men Cart summary-skabelonen får kun `showCartTotalDiscount` og `formattedCartTotalDiscount` — læsning af det nyere par returnerer `undefined`. Brug de to ovenfor, og bemærk, at de kun viser rabattotalen; de følger ikke indstillingen **Show compare-at price savings in footer total**.
</Warning>

`isRemovingDiscount`

* **Type**: `boolean`

* **Beskrivelse**: Angiver, om en rabatfjernelsesoperation er i gang

* **Anvendelse**: Vis indlæsningstilstande under rabatfjernelse

`handleRemoveDiscount`

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

* **Beskrivelse**: Funktion til at håndtere fjernelse af rabatkoder

* **Anvendelse**: Fjern anvendte rabatkoder fra kurven

`totalCompareAtPrice`

* **Type**: `number`

* **Beskrivelse**: Den samlede sammenligningspris lagt sammen (alle varer i kurven)

* **Anvendelse**: Beregn og vis besparelser eller information om oprindelige priser

`totalAfterAllDiscounts`

* **Type**: `number`

* **Beskrivelse**: Endelig kurvtotal i cents, efter alle rabatter er anvendt

* **Anvendelse**: Vis den endelige pris, kunderne skal betale

`originalTotalPrice`

* **Type**: `number`

* **Beskrivelse**: Oprindelig kurvtotal i cents før eventuelle rabatter

* **Anvendelse**: Vis oprindelige priser af hensyn til gennemsigtighed og besparelsesberegning

`cartItemCount`

* **Type**: `number`

* **Beskrivelse**: Samlet antal varer i kurven

* **Anvendelse**: Vis information om vareantal i kurvoversigter

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

Trust Badges-modulet giver dig mulighed for at tilpasse visningen af tillidsbadges med dit eget design, samtidig med at essentiel tillidsopbyggende funktionalitet som betinget badge-synlighed og korrekt billedhåndtering bevares.

<div id="available-props-full-template-9">
  ### **Tilgængelige props - Fuld skabelon**
</div>

`showBadge`

* **Type**: `boolean`

* **Beskrivelse**: Angiver, om tillidsbadget skal vises

* **Anvendelse**: Styr synligheden af tillidsbadges baseret på modulindstillinger

`badgeUrl`

* **Type**: `string`

* **Beskrivelse**: URL'en til det tillidsbadge-billede, der skal vises

* **Anvendelse**: Kilde-URL til tillidsbadge-billedet i brugerdefinerede implementeringer

Shopping Cart ({props.cartQuantity})

{rule.title}

Available Rewards...

{props.productTitle}