> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ein benutzerdefiniertes Template in Upcart einrichten

> Dieser Artikel beschreibt die wichtigsten Props, die zum Anpassen von Upcart-Templates verfügbar sind, und hilft dir, dein Warenkorb-Erlebnis zu personalisieren und dabei die Kernfunktionalität zu erhalten.

<div id="important-notice">
  ## ⚠️ **Wichtiger Hinweis**
</div>

Benutzerdefinierte Templates erfordern fortgeschrittene technische Kenntnisse in HTML, CSS, JavaScript und React. Stelle sicher, dass du über ausreichende Entwicklungserfahrung oder Zugang zu einem qualifizierten Shopify-Entwickler verfügst, bevor du fortfährst. **Unser Support-Team bietet keine Unterstützung bei der Entwicklung, dem Debugging oder der Fehlerbehebung von benutzerdefinierten Templates.** Technische Fragen sollten an einen Shopify-Experten oder qualifizierten Entwickler gerichtet werden.

***

<div id="code-editor-features">
  ## Funktionen des Code-Editors
</div>

Der Code-Editor für benutzerdefinierte Templates enthält integrierte Tools, die dir helfen, gültige Templates einfacher zu schreiben.

<div id="typescript-intellisense">
  ### TypeScript IntelliSense
</div>

Der Editor versteht TypeScript, sodass du beim Tippen Autovervollständigungsvorschläge, Typprüfung und Inline-Dokumentation für alle verfügbaren `props` erhältst. Die Prop-Typ-Hinweise sind reine Editor-IntelliSense, die dir beim Schreiben von Templates helfen — sie werden nicht in das Template geschrieben und laufen nie auf deinem Storefront.

<div id="editable-template-body">
  ### Bearbeitbarer Template-Body
</div>

Der Editor zeigt nur den bearbeitbaren JSX-Body deines Templates — es gibt keine gesperrten Zeilen. Der umgebende Funktions-Wrapper wird beim Build automatisch hinzugefügt und wird im Editor nie angezeigt.

Verwende jederzeit **Reset to default**, um das Original-Template wiederherzustellen, falls deine Bearbeitungen die Template-Struktur beschädigen.

***

<div id="general-section">
  ## Allgemeiner Bereich
</div>

<div id="header">
  ## Header
</div>

Mit dem Header-Modul kannst du den Warenkorb-Header mit deinem eigenen Design anpassen und dabei wesentliche Warenkorb-Funktionen wie die Anzeige der Artikelanzahl und eine Schließen-Schaltfläche beibehalten.

<div id="available-props-full-template">
  ### **Verfügbare Props – Full-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-drawer-header-title.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=7c679bee70bf5ff8a61657d83158e986" alt="Cart-Drawer-Header mit dem Warenkorb-Titel, der Artikelanzahl und der Schließen-Schaltfläche" width="400" data-path="images/upcart/custom-template-cart-drawer-header-title.png" />

`cartQuantity`

* **Typ**: `string`

* **Beschreibung**: Die aktuelle Anzahl der Artikel im Warenkorb, formatiert als String

* **Verwendung**: Zeige die Anzahl der Warenkorb-Artikel in deinem benutzerdefinierten Header-Design an

```
<h2>Shopping Cart ({props.cartQuantity})</h2>
```

`closeHandler`

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

* **Beschreibung**: Eine Callback-Funktion, die den Warenkorb schließt, wenn sie ausgelöst wird

* **Verwendung**: Hänge sie an Schaltflächen, Symbole oder andere interaktive Elemente, um den Warenkorb zu schließen

```
<button  
  onClick={props.closeHandler}  
  aria-label="Close cart"  
>×</button>
```

`titleComponent`

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

* **Beschreibung**: Eine vorgerenderte Titel-Komponente für den Warenkorb-Header mit korrektem Styling und Übersetzungen

* **Verwendung**: Zeige den Warenkorb-Titel basierend auf deiner Warenkorb-Einstellungskonfiguration an

```
<div>{props.titleComponent}</div>
```

***

<div id="body-section">
  ## Body-Bereich
</div>

<div id="announcements">
  ## Ankündigungen
</div>

Mit dem Announcements-Modul kannst du Ankündigungsanzeigen mit deinem eigenen Design anpassen und dabei wesentliche Ankündigungsfunktionen wie Timer-Steuerung und bedingte Sichtbarkeit beibehalten.

<div id="available-props-full-template-2">
  ### Verfügbare Props – **Full-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-announcement-bar-countdown.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=2c7d03e71ebf5bec3b5d3bddff3447b3" alt="Warenkorb-Ankündigungsleiste mit einem Countdown-Timer, der die Produkte des Kunden reserviert" width="400" data-path="images/upcart/custom-template-cart-announcement-bar-countdown.png" />

`announcementTemplate`

* **Typ**: `string`

* **Beschreibung**: Der HTML-Inhalt für die Ankündigungsnachricht

* **Verwendung**: Zeige die Ankündigungsnachricht in deinen benutzerdefinierten Implementierungen an

```
<div dangerouslySetInnerHTML={{ __html: props.announcementTemplate }} />
```

`timer`

* **Typ**: `string`

* **Beschreibung**: Der aktuelle Timer-Wert, formatiert als String

* **Verwendung**: Zeige den Countdown-Timer in benutzerdefinierten Ankündigungsimplementierungen an

```
<div>Time remaining: {props.timer}</div>
```

`shouldUseTimer`

* **Typ**: `boolean`

* **Beschreibung**: Gibt an, ob die Timer-Funktionalität für diese Ankündigung aktiviert ist

* **Verwendung**: Rendere timer-bezogene Inhalte und Steuerelemente bedingt

```
<div>  
  {props.shouldUseTimer && (  
    <span>{props.timer}</span>   
  )}  
</div>
```

`isTimerExpiredAndShouldHide`

* **Typ**: `boolean`

* **Beschreibung**: Gibt an, ob der Timer abgelaufen ist und die Ankündigung ausgeblendet werden soll

* **Verwendung**: Steuere die Sichtbarkeit der gesamten Ankündigung basierend auf dem Timer-Status

```
<div>  
  {!props.isTimerExpiredAndShouldHide && (  
    <div>{props.timer}</div>  
  )}  
</div>
```

<div id="tiered-rewards">
  ## Gestaffelte Prämien
</div>

Mit dem Rewards-Modul kannst du die Anzeige des Prämienfortschritts mit deinem eigenen Design anpassen und dabei wesentliche Prämienfunktionen wie Meilenstein-Tracking, Fortschrittsvisualisierung und Prämiennachrichten beibehalten.

<div id="available-props-full-template-3">
  ### Verfügbare Props – **Full-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-tiered-rewards-progress-bar.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=78f30082b982815d333f8de09225d884" alt="Fortschrittsleiste der gestaffelten Prämien mit Meilenstein-Symbolen für kostenlosen Versand und Produkt" width="400" data-path="images/upcart/custom-template-tiered-rewards-progress-bar.png" />

`rewardsMessageHtml`

* **Typ**: `string`

* **Beschreibung**: Der HTML-Inhalt für die Prämiennachricht

* **Verwendung**: Zeige die Prämiennachricht mit Rich-Formatierung in benutzerdefinierten Implementierungen an

```
<div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />
```

`milestonesCompleted`

* **Typ**: `number`

* **Beschreibung**: Die Anzahl der abgeschlossenen Meilensteine

* **Verwendung**: Zeige die Abschlussanzahl an oder berechne den Abschlussprozentsatz

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

`milestonesData`

* Typ:

  ```
  {  
    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;  
    };  
  }
  ```

* **Beschreibung**: Vollständige Meilenstein-Konfiguration und Fortschrittsdaten für das Prämiensystem

* **Verwendung**: Greife auf Meilenstein-Informationen, den Fortschrittsprozentsatz und Anzeigeeinstellungen zu

* **Eigenschaften**:

  * `milestonesToRender`: Array von Meilenstein-Objekten mit Abschlussstatus und Positionierung
  * `progressPercent`: Aktueller Fortschritt als Prozentsatz (0–100)
  * `showMilestones`: Ob Meilenstein-Markierungen angezeigt werden sollen
  * `settings`: Visuelle Konfiguration für die Meilenstein-Anzeige

<div id="discounts">
  ## Rabatte
</div>

Das Discounts-Modul unterstützt benutzerdefinierte Templates, sodass du deine eigene Anzeige gestalten und dabei wesentliche Funktionen wie Regelverwaltung, Abschnittssichtbarkeit und Prämienpräsentation beibehalten kannst. Der interne Modultyp-Bezeichner für benutzerdefinierte Templates ist `TRIGGERED_REWARDS`, um Abwärtskompatibilität mit bestehendem Custom-Template-Code zu gewährleisten.

<div id="available-props-full-template-4">
  ### **Verfügbare Props – Full-Template**
</div>

`rules`

* **Typ**:

  ```
  {  
    id: string;  
    title: string;  
    description: string;  
    conditionsMet: boolean;  
  }[]
  ```

* **Beschreibung**: Array der aktuell aktivierten Rabattregeln

* **Verwendung**: Zeige verfügbare Prämien, ihre Titel und Beschreibungen an sowie ob die Bedingungen jeder Regel erfüllt sind

* **Eigenschaften**:

  * `id`: Eindeutiger Bezeichner für die Prämienregel
  * `title`: Titel der Rabattregel
  * `description`: Beschreibung der Prämienregel
  * `conditionsMet`: Ob die Bedingungen der Regel aktuell vom Warenkorb erfüllt werden. Verwende dies, um UX-Muster wie „Du hast X freigeschaltet“ vs. „Gib noch \$Y aus, um X freizuschalten“ zu bauen

```
<div>
  {props.rules.map((rule) => (
    <div key={rule.id}>
      <h3>{rule.title}</h3>
      <p>{rule.conditionsMet ? "Reward unlocked!" : rule.description}</p>
    </div>
  ))}
</div>
```

`showSection`

* **Typ**: `boolean`

* **Beschreibung**: Gibt an, ob der Discounts-Abschnitt angezeigt werden soll

* **Verwendung**: Steuere die Sichtbarkeit des gesamten Discounts-Moduls

```
<div>  
  {props.showSection && (  
    <div>  
      <h2>Available Rewards...</h2>  
    </div>  
  )}  
</div>
```

`onToggleSection`

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

* **Beschreibung**: Eine Callback-Funktion, die den Sichtbarkeitsstatus des Discounts-Abschnitts umschaltet

* **Verwendung**: Hänge sie an Schaltflächen oder interaktive Elemente, damit Nutzer den Prämienbereich ein-/ausblenden können

```
<button type="button" onClick={props.onToggleSection}>  
  {props.showSection ? "Hide Rewards" : "Show Available Rewards"}  
</button>
```

<div id="recommendations">
  ## Empfehlungen
</div>

Mit dem Recommendation-Modul kannst du Upsell-Produktanzeigen mit deinem eigenen Design anpassen und dabei wesentliche E-Commerce-Funktionen wie Variantenauswahl, Add-to-Cart-Aktionen und die Anzeige von Produktinformationen beibehalten.

<div id="available-props-recommendation-tile-template">
  ### **Verfügbare Props – Recommendation-Tile-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-recommendation-tile-snowboard-product.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=7db82e0496937fa8ee8eea180edb3530" alt="Empfehlungskachel mit einem Snowboard-Produkt, Preis und Add-Schaltfläche" width="400" data-path="images/upcart/custom-template-recommendation-tile-snowboard-product.png" />

*Das Recommendation-Tile-Template teilt sich das [gleiche Prop-Interface wie das Upsell-Tile-Template](#available-props-upsell-tile-template) im Upsells-Modul. Alle verfügbaren Props, Typen und Verwendungsbeispiele sind unten im Abschnitt zum Upsells-Modul dokumentiert.*

<div id="cart-items">
  ## Warenkorb-Artikel
</div>

Mit dem Cart-Items-Modul kannst du die Anzeige der Warenkorb-Artikel mit deinem eigenen Design anpassen und dabei wesentliche E-Commerce-Funktionen beibehalten. Dieses Modul bietet mehrere Template-Typen, jeweils mit eigenen spezifischen Props für verschiedene Aspekte der Warenkorb-Artikel-Anzeige.

<Note>
  **Anzeigen eines Ladeindikators während Add-to-Cart oder Warenkorb-Aktualisierungen:** Das Standard-Cart-Items-Modul stellt keinen eingebauten „Wird zum Warenkorb hinzugefügt“-Spinner bereit. Wenn du einen Ladezustand anzeigen möchtest, während ein Artikel hinzugefügt wird oder eine Warenkorb-Operation läuft, verwende das Product-Tile-Template und lies die Props `isLoading` und `loadingOperation` (unten dokumentiert), um bedingt einen Spinner oder ein Overlay zu rendern. Benutzerdefinierte Templates erfordern Entwicklererfahrung — siehe den Hinweis oben auf dieser Seite.
</Note>

<div id="available-props-product-tile-template">
  ### **Verfügbare Props – Product-Tile-Template**
</div>

**Hinweis:** Das Aktivieren des *Product-Tile*-Templates überschreibt alle anderen Templates in diesem Modul, einschließlich **Variant-Template**, **Properties-Template**, **Bundle-Template** und **Price-Template**.\
Wenn du benutzerdefinierten Code in einem dieser Templates verwenden möchtest, ***musst*** *du das Product-Tile-Template deaktivieren.*

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-product-tile-variant.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=3d2efc06b542f7c59cc86ad3fe611a0e" alt="Warenkorb-Produktkachel mit Bild, Variante, Angebotspreis, Mengenauswahl und Abonnieren-Schaltfläche" width="400" data-path="images/upcart/custom-template-cart-product-tile-variant.png" />

`title`

* **Typ**: `string`

* **Beschreibung**: Der Produkttitel/-name

* **Verwendung**: Zeige den Hauptproduktnamen in Warenkorb-Artikeln an

`variant`

* **Typ**: `React.ReactNode`

* **Beschreibung**: Vorgerenderte Varianteninformations-Komponente

* **Verwendung**: Zeige Variantendetails als React-Komponente an

`properties`

* **Typ**: `React.ReactNode`

* **Beschreibung**: Vorgerenderte Produkteigenschaften-Komponente

* **Verwendung**: Zeige Produkteigenschaften und Abo-Informationen als React-Komponente an

`bundle`

* **Typ**: `React.ReactNode`

* **Beschreibung**: Vorgerenderte Bundle-Details-Komponente

* **Verwendung**: Zeige Bundle-Informationen als React-Komponente an

`compareAtPrice`

* **Typ**: `string | undefined`

* **Beschreibung**: Formatierter Vergleichspreis (Originalpreis)

* **Verwendung**: Zeige den Originalpreis für reduzierte Artikel an

`price`

* **Typ**: `string`

* **Beschreibung**: Formatierter aktueller Preis

* **Verwendung**: Zeige den aktuellen Artikelpreis an

`savings`

* **Typ**: `string | undefined`

* **Beschreibung**: Formatierter Ersparnisbetrag

* **Verwendung**: Zeige an, wie viel der Kunde spart

`imageUrl`

* **Typ**: `string | undefined`

* **Beschreibung**: URL des Produktbilds

* **Verwendung**: Zeige das Produktbild an

`productUrl`

* **Typ**: `string | undefined`

* **Beschreibung**: URL der Produktseite

* **Verwendung**: Verlinke zur Produktdetailseite

`quantity`

* **Typ**: `number`

* **Beschreibung**: Aktuelle Artikelmenge im Warenkorb

* **Verwendung**: Zeige die Artikelmenge an und verwalte sie

`showQuantitySelector`

* **Typ**: `boolean`

* **Beschreibung**: Ob die Mengensteuerung angezeigt werden soll

* **Verwendung**: Zeige die Mengenauswahl bedingt an

`discountCodes`

* **Typ**: `string[] | undefined`

* **Beschreibung**: Array der angewendeten Rabattcodes für diesen Artikel

* **Verwendung**: Zeige artikelspezifische Rabatte an

`subscription`

* **Typ**:

  ```
  {  
    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;  
  }
  ```

* **Beschreibung**: Vollständiges Abo-Verwaltungsobjekt mit Upgrade-Daten, Selling Plans und Handler-Funktionen

* **Verwendung**: Verwalte die Abo-Funktionalität

* Das Subscription-Objekt enthält:

  * **subscriptionUpgradeData**: Upgrade-Informationen (null, wenn kein Upgrade verfügbar ist)

    * `buttonText`: Text für die Upgrade-Schaltfläche
    * `defaultSellingPlanId`: ID des Standard-Selling-Plans für Upgrades
  * **sellingPlansData**: Verfügbare Selling-Plan-Optionen (null, wenn keine Pläne vorhanden sind)

    * `sellingPlanGroups`: Array von Plan-Gruppen mit ihren Selling Plans
    * `activeSellingPlanId`: ID des aktuell ausgewählten Selling Plans
    * `oneTimePurchaseText`: Text für die Einmalkauf-Option (null, wenn nicht verfügbar)
  * **upgradeSellingPlan**: Funktion zum Upgrade auf einen bestimmten Selling Plan
  * **changeSellingPlan**: Funktion zum Ändern des aktuellen Selling Plans
  * **getSellingPlanGroupText**: Hilfsfunktion zum Formatieren des Selling-Plan-Anzeigetexts

`onIncrease`

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

* **Beschreibung**: Funktion zum Erhöhen der Artikelmenge

* **Verwendung**: Verarbeite Aktionen zur Mengenerhöhung

`onDecrease`

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

* **Beschreibung**: Funktion zum Verringern der Artikelmenge

* **Verwendung**: Verarbeite Aktionen zur Mengenverringerung

`onDeleteProduct`

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

* **Beschreibung**: Funktion zum Entfernen eines Artikels aus dem Warenkorb

* **Verwendung**: Verarbeite das Entfernen von Artikeln

`onQuantityChange`

* **Typ**: `(quantity: string) => void`

* **Beschreibung**: Funktion zur Verarbeitung direkter Mengeneingaben

* **Verwendung**: Verarbeite manuelle Mengenänderungen

`handleInputChange`

* **Typ**: `(e: React.ChangeEvent<HTMLInputElement>) => void`

* **Beschreibung**: Handler für Eingabeänderungen im Mengenfeld

* **Verwendung**: Verarbeite Änderungen im Mengeneingabefeld

`replaceItemWithVariant`

* **Typ**: `(variantId: string) => Promise<{ success: boolean }>`

* **Beschreibung**: Funktion zum Ersetzen eines Artikels durch eine andere Variante

* **Verwendung**: Verarbeite den Variantenwechsel

`isLoading`

* **Typ**: `boolean`

* **Beschreibung**: Ladezustand für Warenkorb-Operationen

* **Verwendung**: Zeige Ladeindikatoren an

`loadingOperation`

* **Typ**: `'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined`

* **Beschreibung**: Die spezifische Operation, die gerade lädt

* **Verwendung**: Zeige operationsspezifische Ladezustände an

`setLoadingOperation`

* **Typ**: `(op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void`

* **Beschreibung**: Funktion zum Setzen des Ladeoperations-Status

* **Verwendung**: Verwalte Ladezustände für verschiedene Operationen

`rawItem`

* **Typ**: `CartItem` (siehe den `CartItem`-[Typ unten](#cartitem-object-properties))

* **Beschreibung**: Rohe Warenkorb-Artikeldaten mit allen Informationen

<div id="available-props-variant-template">
  ### **Verfügbare Props – Variant-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-item-variant-line.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c1220e3bf77d9b091c82d0f0b7709034" alt="Variantenzeile eines Warenkorb-Artikels mit der ausgewählten Größe Medium" width="150" data-path="images/upcart/custom-template-cart-item-variant-line.png" />

`item`

* **Typ**: `CartItem` (siehe den `CartItem`-[Typ unten](#cartitem-object-properties))

* **Beschreibung**: Rohe Warenkorb-Artikeldaten mit Varianteninformationen

* **Verwendung**: Greife auf Variantendetails des Warenkorb-Artikels zu

<div id="available-props-properties-template">
  ### **Verfügbare Props – Properties-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-item-property-line.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=2ce7abe36cf542d62e9fc7e2092e7009" alt="Eigenschaftszeile eines Warenkorb-Artikels mit einer Geschenknachricht" width="220" data-path="images/upcart/custom-template-cart-item-property-line.png" />

`productProperties`

* **Typ**: `{ key: string; value: string; isUrl?: boolean; }[]`

* **Beschreibung**: Array von Produkteigenschaften (benutzerdefinierte Felder, Line-Item-Properties)

`subscriptionLabel`

* **Typ**: `string | undefined`

* **Beschreibung**: Beschriftung für Abo-Informationen

<div id="available-props-bundle-template">
  ### **Verfügbare Props – Bundle-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-expanded-bundle-components.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=9a04c17667ea4af9cef303b96c079f37" alt="Aufgeklapptes Bundle mit drei enthaltenen Komponentenprodukten und Varianten" width="200" data-path="images/upcart/custom-template-expanded-bundle-components.png" />

`getSizedImageUrl`

* **Typ**: `getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string`

* **Beschreibung**: Hilfsfunktion zum Abrufen korrekt dimensionierter Bild-URLs

`item`

* **Typ**:

  ```
  {  
    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;  
  }
  ```

* **Beschreibung**: Bundle-Artikelinformationen einschließlich Komponenten. `itemComponents` ist ein Array von Komponenten-Objekten — mappe darüber, um jede gebündelte Komponente zu rendern.

`showDetailsText`

* **Typ**: `string | undefined`

* **Beschreibung**: Text für die Aktion „Details anzeigen“

* **Verwendung**: Zeige den Text der Aufklapp-Schaltfläche an

`hideDetailsText`

* **Typ**: `string | undefined`

* **Beschreibung**: Text für die Aktion „Details ausblenden“

`isExpanded`

* **Typ**: `boolean`

* **Beschreibung**: Ob die Bundle-Details aufgeklappt sind

`toggleCollapsible`

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

* **Beschreibung**: Funktion zum Umschalten der Sichtbarkeit der Bundle-Details

* **Verwendung**: Verarbeite Auf-/Zuklapp-Aktionen

`chevronDownIconComponent`

* **Typ**: `React.ReactElement`

* **Beschreibung**: Vorgerendertes Chevron-Symbol zum Auf-/Zuklappen

* **Verwendung**: Zeige einen konsistenten Auf-/Zuklapp-Indikator an

<div id="available-props-price-template">
  ### **Verfügbare Props – Price-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-price-strikethrough.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=34deca3e39b1aabbafae6ed19d209450" alt="Warenkorb-Preis mit durchgestrichenem Originalpreis, Angebotspreis und Ersparnis" width="250" data-path="images/upcart/custom-template-cart-price-strikethrough.png" />

`compareAtPrice`

* **Typ**: `string | undefined`

* **Beschreibung**: Formatierter Vergleichspreis (Originalpreis)

* **Verwendung**: Zeige den Originalpreis für reduzierte Artikel an

`price`

* **Typ**: `string`

* **Beschreibung**: Formatierter aktueller Preis

* **Verwendung**: Zeige den aktuellen Artikelpreis an

`savings`

* **Typ**: `string | undefined`

* **Beschreibung**: Formatierter Ersparnisbetrag

* **Verwendung**: Zeige an, wie viel der Kunde spart

<div id="cartitem-object-properties">
  ### **Eigenschaften des CartItem-Objekts**
</div>

Das `CartItem`-Objekt enthält alle detaillierten Informationen über einen Warenkorb-Line-Item. Dieses Objekt ist als props.rawItem im Product-Tile-Template und als props.item im Variant-Template verfügbar.

<div id="core-identification">
  #### **Kern-Identifikation**
</div>

* `key (string)` – Eindeutiger Bezeichner für diesen Warenkorb-Artikel.

* `id (number)` – Varianten-ID (Legacy-Feld, verwende stattdessen variant\_id)

* `variant_id (number)` – Die Shopify-Varianten-ID für diesen Artikel

* `product_id (number)` – Die Shopify-Produkt-ID

* `lineIdxFrom1 (number)` – 1-basierter Index dieses Artikels im ursprünglichen Warenkorb vor Änderungen

<div id="product-information">
  #### **Produktinformationen**
</div>

* `title (string)` – Der Titel des Line-Items (normalerweise der Variantentitel)

* `product_title (string)` – Der Hauptprodukttitel

* `handle (string)` – Produkt-URL-Handle (z. B. „camp-stool“)

* `vendor (string)` – Name des Produktanbieters/der Marke

* `product_type (string)` – Produktkategorie/-typ für Steuerzwecke

* `sku (string)` – Stock-Keeping-Unit-Bezeichner

* `product_description (string)` – Vollständige Produktbeschreibung

* `product_has_only_default_variant (boolean)` – Ob das Produkt nur eine Variante hat

<div id="pricing-all-prices-in-cents">
  #### **Preise (alle Preise in Cent)**
</div>

* `quantity (number)` – Anzahl dieses Artikels im Warenkorb

* `price (number)` – Stückpreis vor Rabatten

* `original_price (number)` – Gleich wie price

* `discounted_price (number)` – Stückpreis nach Rabatten auf Produktebene

* `compare_at_price (number | null)` – Vergleichspreis (UVP). Hinweis: Dieses Feld wird von Upcart hinzugefügt und nicht von Shopifys Cart-API bereitgestellt

* `final_line_price (number)` – Gesamtpreis nach Rabatten auf Produktebene (Menge × discounted\_price)

* `original_line_price (number)` – Gesamtpreis vor Rabatten (Menge × price)

* `line_price (number)` – Gesamtpreis nach allen Rabatten

* `final_price (number)` – **Veraltet** – Stückpreis nach Produktrabatten (berücksichtigt die Menge nicht)

* `total_discount (number)` – Gleich wie line\_level\_total\_discount

* `line_level_total_discount (number)` – Gesamter Rabattbetrag, der auf dieses Line-Item angewendet wurde

<div id="media-urls">
  #### **Medien & URLs**
</div>

* `image (string)` – URL des primären Produktbilds

* `url (string)` – Relativer URL-Pfad zur Produktseite (z. B. „/products/camp-stool?variant=42789611372803“)

* `featured_image (object | null)` – Details zum vorgestellten Bild:

  * `alt (string)` – Alt-Text des Bildes
  * `aspect_ratio (number)` – Seitenverhältnis des Bildes
  * `height (number)` – Bildhöhe in Pixeln
  * `url (string)` – Bild-URL
  * `width (number)` – Bildbreite in Pixeln

<div id="variants-options">
  #### **Varianten & Optionen**
</div>

* `variant_title (string | null)` – Variantentitel (z. B. „Large / Red“)

* `variant_options (string[])` – Array der Variantenoptionswerte

* `options_with_values (Array)` – Detaillierte Optionsinformationen:

  * `name (string)` – Optionsname (z. B. „Size“)
  * `value (string)` – Optionswert (z. B. „Large“)

* `untranslated_product_title (string | undefined)` – Ursprünglicher Produkttitel vor der Übersetzung (nur in Cart-Mutations-Antworten)

* `untranslated_variant_title (string | undefined)` – Ursprünglicher Variantentitel vor der Übersetzung (nur in Cart-Mutations-Antworten)

<div id="custom-properties-metadata">
  #### **Benutzerdefinierte Eigenschaften & Metadaten**
</div>

* `properties (Record<string, any> | null)` – Benutzerdefinierte Line-Item-Properties oder `null`, wenn die Zeile keine hat — prüfe das, bevor du einen Key liest. Properties, deren Keys mit `__` beginnen, sind für Kunden immer verborgen; Keys, die mit einem einzelnen `_` beginnen, sind ebenfalls verborgen, wenn die Warenkorb-Einstellung **Hide properties starting with single underscore "\_"** aktiviert ist.

* `gift_card (boolean)` – Ob dieser Artikel eine Geschenkkarte ist

* `taxable (boolean)` – Ob dieser Artikel steuerpflichtig ist

* `requires_shipping (boolean)` – Ob dieser Artikel Versand erfordert

* `grams (number)` – Artikelgewicht in Gramm

<div id="discounts-promotions">
  #### **Rabatte & Aktionen**
</div>

* `discounts (Array)` – Vereinfachte Rabattinformationen:

  * `amount (number)` – Rabattbetrag in Cent
  * `title (string)` – Rabatt-Titel/-Name

* `line_level_discount_allocations (Array)` – Detaillierte Informationen zur Rabattzuweisung:

  * `amount (number)` – Rabattbetrag in Cent
  * `discount_application (object)` – Vollständige Details zur Rabattanwendung:

    * `allocation_method (string)` – Wie der Rabatt zugewiesen wird
    * `created_at (string)` – Wann der Rabatt erstellt wurde
    * `description (string | null)` – Rabattbeschreibung
    * `key (string)` – Rabatt-Key-Bezeichner
    * `target_selection (string)` – Worauf der Rabatt abzielt
    * `target_type (string)` – Typ des Ziels
    * `title (string)` – Rabatt-Titel
    * `total_allocated_amount (number)` – Insgesamt zugewiesener Betrag
    * `type ('discount_code' | '')` – Rabatttyp (leerer String für automatische Rabatte)
    * `value (string)` – Rabattwert
    * `value_type (string)` – Wie der Wert angewendet wird

<div id="bundle-products">
  #### **Bundle-Produkte**
</div>

* `has_components (boolean | undefined)` – Ob dieser Artikel ein Bundle ist, das andere Produkte enthält (nur in GET-Cart-Antworten)

* `item_components (Array | null | undefined)` – Details zu den Bundle-Komponenten:

  * `quantity (number)` – Menge dieser Komponente
  * `image (object)` – Bild der Komponente:

    * `url (string)` – Bild-URL
    * `height (number | null)` – Bildhöhe
    * `width (number | null)` – Bildbreite
    * `alt (string)` – Alt-Text

* `product (object)` – Produktinformationen der Komponente:

  * `title (string)` – Produkttitel
  * `has_only_default_variant (boolean)` – Ob das Produkt nur die Standardvariante hat

* `variantTitle (string)` – Variantentitel der Komponente

<div id="business-rules">
  #### **Geschäftsregeln**
</div>

* `quantity_rule (object | undefined)` – Mengenbeschränkungen (nur in GET-Cart-Antworten):

  * `min (number)` – Minimal erlaubte Menge
  * `max (number | null)` – Maximal erlaubte Menge (null = keine Grenze)
  * `increment (number)` – Schrittweite der Mengenerhöhung

<div id="subscription-information">
  #### **Abo-Informationen**
</div>

* `selling_plan_allocation (object | undefined)` – Details zu Abo-/Selling-Plänen:

  * `price (number)` – Abo-Preis in Cent
  * `compare_at_price (number | null)` – Abo-Vergleichspreis
  * `per_delivery_price (number)` – Preis pro Lieferung
  * `selling_plan (object)` – Selling-Plan-Details:

    * `id (number)` – Selling-Plan-ID
    * `name (string)` – Plan-Name
    * `description (string)` – Plan-Beschreibung
    * `options (Array)` – Plan-Optionen:

      * `name (string)` – Optionsname
      * `position (number)` – Optionsposition
      * `value (string)` – Optionswert
    * `recurring_deliveries (boolean)` – Ob der Plan wiederkehrende Lieferungen hat

<div id="integration-metadata">
  #### **Integrations-Metadaten**
</div>

* `__appIntegrated (object | undefined)` – Integrationsdaten von Drittanbieter-Apps:

  * `app ('stay.ai')` – Bezeichner der integrierten App
  * `bundleRole ('parent' | 'child')` – Rolle in der Bundle-Struktur

<div id="upsells">
  ## Upsells
</div>

Mit dem Upsells-Modul kannst du Upsell-Produktanzeigen mit deinem eigenen Design anpassen und dabei wesentliche E-Commerce-Funktionen wie Variantenauswahl, Add-to-Cart-Aktionen und die Anzeige von Produktinformationen beibehalten.

<div id="available-props-upsell-tile-template">
  ### **Verfügbare Props – Upsell-Tile-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-upsell-tile-product-sale.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=276d261e795de83ca0882f4cd713ec61" alt="Upsell-Kachel mit einem Produkt mit Angebotspreis, Varianten-Dropdown und Add-Schaltfläche" width="400" data-path="images/upcart/custom-template-upsell-tile-product-sale.png" />

`itemUrl`

* **Typ**: `string`

* **Beschreibung**: Die URL der Produktseite

* **Verwendung**: Erstelle Links zur Produktdetailseite für eine verbesserte Benutzernavigation

```
<a href={props.itemUrl} className="product-link">  
  <img src={props.imageUrl} alt={props.altText} />  
</a>
```

`imageUrl`

* **Typ**: `string | undefined`

* **Beschreibung**: Die URL des Produktbilds

* **Verwendung**: Zeige Produktbilder in benutzerdefinierten Upsell-Implementierungen an

* **Fallback**: Behandle undefinierte Werte elegant mit Platzhalterbildern

`description`

* **Typ**: `string`

* **Beschreibung**: Die Beschreibung des Produkts

* **Verwendung**: Zeige die Produktbeschreibung in benutzerdefinierten Upsell-Implementierungen an

`altText`

* **Typ**: `string`

* **Beschreibung**: Alt-Text für das Produktbild für Barrierefreiheit

* **Verwendung**: Biete Screenreader-Unterstützung und verbessere die Barrierefreiheit

```
<img   
  src={props.imageUrl}   
  alt={props.altText}  
  className="product-image"  
/>
```

`productId`

* **Typ**: `string`

* **Beschreibung**: Der eindeutige Bezeichner für das Produkt

* **Verwendung**: Verfolge Produkte, implementiere Analytics oder verwende ihn in der Add-to-Cart-Funktionalität

`productTitle`

* **Typ**: `string`

* **Beschreibung**: Der Titel/Name des Produkts

* **Verwendung**: Zeige den Produktnamen in benutzerdefinierten Upsell-Implementierungen an

```
<div>  
  <h3>{props.productTitle}</h3>  
</div>
```

`oldPrice` & `newPrice`

* **Typ**: `string | null` (oldPrice), `string` (newPrice)

* **Beschreibung**: Formatierter Vergleichspreis und aktueller Preis

* **Verwendung**: Zeige Preisinformationen mit Angebots-Kennzeichnungen an

`isSingleVariant`

* **Typ**: `boolean`

* **Beschreibung**: Gibt an, ob das Produkt nur eine Variante hat

* **Verwendung**: Rendere UI-Elemente zur Variantenauswahl bedingt

`productOptions`

* **Typ**: `{ name: string; position: 1 | 2 | 3; values: string[]; }[]`

* **Beschreibung**: Vollständige Produktoptions-Konfiguration einschließlich aller verfügbaren Auswahlmöglichkeiten

* **Verwendung**: Greife auf detaillierte Produktoptions-Informationen für erweiterte Variantenauswahl-UIs zu

`variantOptions`

* **Typ**: `{ label: string; value: string }[]`

* **Beschreibung**: Verfügbare Variantenoptionen für das Produkt

* **Verwendung**: Erstelle Dropdowns oder Schaltflächen zur Variantenauswahl

* **Struktur**: Jede Option enthält ein Anzeige-Label und einen eindeutigen Wert-Bezeichner

`selectedVariantId` & `selectedVariantLabel`

* **Typ**: string (selectedVariantId), string | undefined (selectedVariantLabel)

* **Beschreibung**: Aktuell ausgewählte Varianten-ID und ihr Anzeige-Label

* **Verwendung**: Verfolge und zeige die Informationen zur ausgewählten Variante an

`onVariantChange`

* **Typ**: `(variantId: string) => void`

* **Beschreibung**: Funktion zur Verarbeitung von Änderungen der Variantenauswahl

* **Verwendung**: Aktualisiere die ausgewählte Variante, wenn der Nutzer eine Auswahl trifft

`onAddClick`

* **Typ**: `(productId: string, variantId?: string) => void`

* **Beschreibung**: Funktion zum Hinzufügen des Produkts zum Warenkorb

* **Verwendung**: Implementiere die Add-to-Cart-Funktionalität mit korrekter Produkt- und Variantenidentifikation

```
<button   
  onClick={() => props.onAddClick(props.productId, props.selectedVariantId)}  
  disabled={props.addLoading}  
>  
  {props.addLoading ? 'Adding...' : props.addButtonText}  
</button>
```

`rating` & `reviewCount`

* **Typ**: `number | undefined` (rating), `string | undefined` (reviewCount)

* **Beschreibung**: Produktbewertung und formatierter Text zur Bewertungsanzahl

* **Verwendung**: Zeige Social Proof und Indikatoren für Produktqualität an

`addLoading` & `addButtonText`

* **Typ**: `boolean` (addLoading), `string` (addButtonText)

* **Beschreibung**: Ladezustand für die Add-to-Cart-Aktion und Schaltflächentext

* **Verwendung**: Gib Nutzerfeedback während Warenkorb-Operationen und passe den Schaltflächentext an

`cartItemsCount`

* **Typ**: `number`

* **Beschreibung**: Die aktuelle Anzahl der Artikel im Warenkorb

* **Verwendung**: Zeige den Warenkorb-Status an oder implementiere warenkorbbasierte Logik

<div id="additional-notes">
  ## Zusätzliche Notizen
</div>

Mit dem Notes-Modul kannst du die Warenkorb-Notizfunktion mit deinem eigenen Design anpassen und dabei wesentliche Notizfunktionen wie aufklappbare Bereiche, Texteingabeverarbeitung und Ladezustände beibehalten.

<div id="available-props-full-template-5">
  ### **Verfügbare Props – Full-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-notes-section-expandable.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=ce3f2a79f875029e6358c2227cd024d9" alt="Warenkorb-Notizbereich mit einem aufklappbaren Textfeld für besondere Anweisungen" width="400" data-path="images/upcart/custom-template-cart-notes-section-expandable.png" />

`cartNote`

* **Typ**: `string`

* **Beschreibung**: Der aktuelle Inhalt der vom Kunden eingegebenen Warenkorb-Notiz

* **Verwendung**: Zeige den Notiztext des Warenkorbs an und verwalte ihn in benutzerdefinierten Implementierungen

```
<textarea  
  value={props.cartNote}  
  ...  
/>
```

`notesPlaceholder`

* **Typ**: `string`

* **Beschreibung**: Platzhaltertext für das Notiz-Eingabefeld

* **Verwendung**: Gib Kunden Hinweise, was sie in ihre Notizen aufnehmen sollen

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

`notesTitle`

* **Typ**: `string`

* **Beschreibung**: Der Titel-/Überschriftentext für den Notizbereich

* **Verwendung**: Zeige den Abschnittstitel in benutzerdefinierten Notiz-Implementierungen an

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

`chevronDownIconComponent`

* **Typ**: `React.ReactElement`

* **Beschreibung**: Vorgerenderte Chevron-Symbol-Komponente für die Auf-/Zuklapp-Funktionalität

* **Verwendung**: Zeige konsistente Auf-/Zuklapp-Indikatoren in benutzerdefinierten Implementierungen an

`loadingIndicatorComponent`

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

* **Beschreibung**: Vorgerenderte Ladeindikator-Komponente für asynchrone Operationen

* **Verwendung**: Zeige Ladezustände während des Speicherns von Notizen an

`handleCartNoteChange`

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

* **Beschreibung**: Funktion zur Verarbeitung von Änderungen am Inhalt der Warenkorb-Notiz

* **Verwendung**: Aktualisiere die Warenkorb-Notiz, wenn der Nutzer den Text ändert

`isExpanded`

* **Typ**: `boolean`

* **Beschreibung**: Gibt an, ob der Notizbereich aktuell aufgeklappt ist

* **Verwendung**: Steuere die Sichtbarkeit des Notiz-Eingabebereichs

`toggleCollapsible`

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

* **Beschreibung**: Funktion zum Umschalten des auf-/zugeklappten Zustands des Notizbereichs

* **Verwendung**: Hänge sie an Schaltflächen oder interaktive Elemente, um die Sichtbarkeit des Bereichs zu steuern

***

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

<div id="add-ons">
  ## Add-ons
</div>

Mit dem Addons-Modul kannst du die Anzeige von Add-on-Produkten mit deinem eigenen Design anpassen und dabei wesentliche E-Commerce-Funktionen wie die Anzeige von Produktinformationen, Preisen, Umschaltsteuerungen und Währungsformatierung beibehalten.

<div id="available-props-full-template-6">
  ### **Verfügbare Props – Full-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-add-on-product-row-gift-card.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=8a705eec52fbe1e24420467f92978829" alt="Add-on-Produktzeile mit einer Geschenkkarte, Preis und Aktivierungs-Umschalter" width="400" data-path="images/upcart/custom-template-add-on-product-row-gift-card.png" />

`addonProduct`

* **Typ**:

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

* **Beschreibung**: Vollständige Add-on-Produktinformationen einschließlich Produktdetails, Variantenpreisen und Bilddaten

* **Verwendung**: Greife auf alle Produktinformationen zu, die zur Anzeige von Add-on-Produkten benötigt werden

* **Struktur**: Enthält verschachtelte Produkt-, Varianten- und Bild-Objekte mit umfassenden Produktdaten

  * **Eigenschaften des Product-Objekts** `addonProduct.product`

    * **id**: Eindeutiger numerischer Bezeichner für das Produkt
    * **title**: Anzeigename des Add-on-Produkts
    * **description**: HTML-Beschreibungsinhalt des Produkts
  * **Eigenschaften des Variant-Objekts**

    * **id**: Eindeutiger numerischer Bezeichner für die Variante
    * **price**: Aktueller Preis in Cent
    * **compare\_at\_price**: Originalpreis in Cent (null, wenn kein Vergleichspreis vorhanden ist)
  * **Eigenschaften des Image-Objekts**

    * **src**: URL des Produktbilds
    * **alt**: Alt-Text für das Bild (für Barrierefreiheit)

`toggle`

* **Typ**:

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

* **Beschreibung**: Zustand der Umschaltsteuerung und Handler zum Aktivieren/Deaktivieren des Add-ons

* **Verwendung**: Implementiere eine interaktive Umschaltfunktion für die Add-on-Auswahl

* **Zustände**: Drei mögliche Zustände – enabled, disabled und loading

* **Handler**: Separate Funktionen für Aktivierungs- und Deaktivierungsaktionen

`moneyFormat`

* **Typ**: `string`

* **Beschreibung**: Der Währungsformat-String für die Preisformatierung

* **Verwendung**: Übergib ihn an die formatMoney-Funktion für eine konsistente Währungsanzeige

`formatMoney`

* **Typ**:

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

* **Beschreibung**: Hilfsfunktion zum Formatieren von Währungswerten

* **Verwendung**: Formatiere Preise konsistent mit den Währungseinstellungen des Stores

* **Parameter**: Nimmt einen Cent-Wert, einen optionalen Format-String und eine Option zum Entfernen von HTML entgegen

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

Mit dem Discount-Code-Modul kannst du die Eingabefunktion für Rabattcodes mit deinem eigenen Design anpassen und dabei wesentliche E-Commerce-Funktionen wie Code-Validierung, Formularübermittlung und Nutzerfeedback beibehalten.

<div id="available-props-full-template-7">
  ### **Verfügbare Props – Full-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-discount-code-input-field.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=9e8eb5e08805c18b26a3338707a9909a" alt="Rabattcode-Eingabefeld mit einer Apply-Schaltfläche" width="400" data-path="images/upcart/custom-template-discount-code-input-field.png" />

`indicator`

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

* **Beschreibung**: Aktueller Validierungsstatus der Rabattcode-Eingabe

* **Verwendung**: Zeige passendes UI-Feedback basierend auf dem Validierungsstatus an

* **Zustände**:

  * `validating`: Der Code wird gerade verarbeitet/validiert
  * `invalid`: Die Code-Validierung ist fehlgeschlagen
  * `none`: Kein Validierungsstatus (Standard/inaktiv)

`discountCodeInput`

* **Typ**: `string`

* **Beschreibung**: Aktueller Wert des Rabattcode-Eingabefelds

* **Verwendung**: Zeige den vom Nutzer eingegebenen Rabattcode-Text an und verwalte ihn

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

`discountCodePlaceholder`

* **Typ**: `string`

* **Beschreibung**: Platzhaltertext für das Rabattcode-Eingabefeld

* **Verwendung**: Gib Nutzern Hinweise, was sie in das Feld eingeben sollen

`discountCodeButtonText`

* **Typ**: `string`

* **Beschreibung**: Text, der auf der Anwenden-/Absenden-Schaltfläche angezeigt wird

* **Verwendung**: Passe den Schaltflächentext für die Rabattcode-Übermittlung an

`setDiscountCodeInput`

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

* **Beschreibung**: Funktion zum Aktualisieren des Rabattcode-Eingabewerts

* **Verwendung**: Verarbeite Eingabeänderungen des Nutzers im Rabattcode-Feld

`handleSubmit`

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

* **Beschreibung**: Funktion zur Verarbeitung der Formularübermittlung für die Rabattcode-Anwendung

* **Verwendung**: Verarbeite die Validierung und Anwendung des Rabattcodes

* **Event**: Verarbeitet Formularübermittlungs-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">
  ## Warenkorb-Zusammenfassung
</div>

Mit dem Cart-Summary-Modul kannst du die Anzeige der Warenkorb-Zusammenfassung und der Rabatte mit deinem eigenen Design anpassen und dabei wesentliche E-Commerce-Funktionen wie Rabattverwaltung, Ersparnisberechnung und Preistransparenz beibehalten.

<div id="available-props-full-template-8">
  ### **Verfügbare Props – Full-Template**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-summary-discount-row.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=492e00824117bf0b93bf0c3a1402050f" alt="Rabattzeile der Warenkorb-Zusammenfassung mit einem angewendeten Rabattcode und Betrag" width="400" data-path="images/upcart/custom-template-cart-summary-discount-row.png" />

`totalSavingsText`

* **Typ**: `string`

* **Beschreibung**: Textbeschriftung für den Bereich der Gesamtersparnis

* **Verwendung**: Zeige die Ersparnis-Beschriftung in benutzerdefinierten Warenkorb-Zusammenfassungen an

`discountApplications`

* **Typ**:

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

* **Beschreibung**: Array der angewendeten Rabattcodes und automatischen Rabatte

* **Verwendung**: Zeige alle aktiven Rabatte mit ihren Titeln und Typen an

* **Struktur**: Jeder Rabatt enthält einen eindeutigen Key, einen Anzeigetitel und einen Typ-Bezeichner

`cartTotalDiscount`

* **Typ**: `number`

* **Beschreibung**: Der Gesamtrabattbetrag in Cent

* **Verwendung**: Greife auf den rohen Rabattwert für Berechnungen oder benutzerdefinierte Formatierungen zu

`showCartTotalDiscount`

* **Typ**: `boolean`

* **Beschreibung**: Gibt an, ob der Gesamtrabatt angezeigt werden soll. Als veraltet zugunsten von `showTotalSavings` markiert, aber siehe den Hinweis unten — innerhalb eines benutzerdefinierten Templates ist dies weiterhin das Prop, das du hast.

* **Verwendung**: Rendere Rabattinformationen bedingt basierend auf den Einstellungen

`formattedCartTotalDiscount`

* **Typ**: `string`

* **Beschreibung**: Vorformatierter HTML-String des Gesamtrabattbetrags. Als veraltet zugunsten von `formattedTotalSavings` markiert, aber siehe den Hinweis unten.

* **Verwendung**: Zeige den korrekt formatierten Rabattbetrag mit Währungssymbolen an

<Warning>
  **`showTotalSavings` und `formattedTotalSavings` sind innerhalb eines benutzerdefinierten Templates nicht verfügbar.** Sie existieren im internen Kontext des Moduls, aber dem Cart-Summary-Template werden nur `showCartTotalDiscount` und `formattedCartTotalDiscount` übergeben — das Lesen des neueren Paars gibt `undefined` zurück. Verwende die beiden oben genannten und beachte, dass sie nur die Rabattsumme anzeigen; sie folgen nicht der Einstellung **Show compare-at price savings in footer total**.
</Warning>

`isRemovingDiscount`

* **Typ**: `boolean`

* **Beschreibung**: Gibt an, ob gerade ein Rabatt entfernt wird

* **Verwendung**: Zeige Ladezustände während der Rabattentfernung an

`handleRemoveDiscount`

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

* **Beschreibung**: Funktion zum Entfernen von Rabattcodes

* **Verwendung**: Entferne angewendete Rabattcodes aus dem Warenkorb

`totalCompareAtPrice`

* **Typ**: `number`

* **Beschreibung**: Summe der Vergleichspreise (alle Artikel im Warenkorb)

* **Verwendung**: Berechne und zeige Ersparnisse oder Originalpreisinformationen an

`totalAfterAllDiscounts`

* **Typ**: `number`

* **Beschreibung**: Endgültige Warenkorbsumme in Cent nach Anwendung aller Rabatte

* **Verwendung**: Zeige den endgültigen Preis an, den Kunden zahlen

`originalTotalPrice`

* **Typ**: `number`

* **Beschreibung**: Ursprüngliche Warenkorbsumme in Cent vor allen Rabatten

* **Verwendung**: Zeige die Originalpreise für Transparenz und Ersparnisberechnung an

`cartItemCount`

* **Typ**: `number`

* **Beschreibung**: Gesamtanzahl der Artikel im Warenkorb

* **Verwendung**: Zeige Informationen zur Artikelanzahl in Warenkorb-Zusammenfassungen an

<div id="trust-badges">
  ## Trust Badges
</div>

Mit dem Trust-Badges-Modul kannst du die Anzeige von Trust Badges mit deinem eigenen Design anpassen und dabei wesentliche vertrauensbildende Funktionen wie bedingte Badge-Sichtbarkeit und korrekte Bildverarbeitung beibehalten.

<div id="available-props-full-template-9">
  ### **Verfügbare Props – Full-Template**
</div>

`showBadge`

* **Typ**: `boolean`

* **Beschreibung**: Gibt an, ob das Trust Badge angezeigt werden soll

* **Verwendung**: Steuere die Sichtbarkeit von Trust Badges basierend auf den Moduleinstellungen

`badgeUrl`

* **Typ**: `string`

* **Beschreibung**: Die URL des anzuzeigenden Trust-Badge-Bildes

* **Verwendung**: Quell-URL für das Trust-Badge-Bild in benutzerdefinierten Implementierungen