> ## 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.

# Product add-on-Block

> Der Product add-on-Block des Aftersell Cart: Biete ein bestimmtes Produkt als Quick-Add direkt im Drawer an.

> Der **Product add-on**-Block bietet ein einzelnes, bestimmtes Produkt deiner Wahl als Add-on im Warenkorb an und bewirbt damit ein bekanntes Produkt (eine Garantie, eine Probe, einen Bestseller) als Quick-Add direkt im Warenkorb.

<Info>
  Anders als [**Upsells**](/de/aftersell/cart/upsells-block), das Produkte anzeigt, die von einer Strategie ausgewählt werden, zeigt das Product add-on immer genau das Produkt, das du auswählst.
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="Product add-on-Block, der ein zusätzliches Produkt anbietet, das der Käufer seinem Warenkorb hinzufügen kann" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

<div id="behavior">
  ## Verhalten
</div>

* **Wenn keine Live-Variante aufgelöst wird** — das Produkt ist nicht gesetzt, archiviert oder ausverkauft — rendert der Block **nichts** statt eines toten Buttons.
* Das Steuerelement spiegelt wider, ob die Add-on-Zeile *dieses Blocks* im Warenkorb ist — das Ausschalten entfernt also die Zeile, die er hinzugefügt hat (und beeinflusst nicht dasselbe Produkt, das anderswo hinzugefügt wurde).
* Ein Vergleichspreis wird durchgestrichen, wenn es einen echten Preisnachlass gibt; das „% off“-Label wird ausgeblendet, wenn der Rabatt auf unter 1 % rundet.
* Das Add-on-Bild fällt auf das Hauptbild des Produkts zurück, wenn die gewählte Variante keins hat.

<div id="settings">
  ## Einstellungen
</div>

| Einstellung      | Was sie steuert                                                                                                   | Standard                              |
| ---------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Display type** | Wie das Hinzufügen-Element erscheint: **Toggle** oder **Checkbox**.                                               | Toggle                                |
| **Product**      | Die anzubietende Produktvariante — ein Picker deckt beides ab. Bild und Preis stammen von der gewählten Variante. | Keins                                 |
| **Title**        | Rich-Text-Überschrift.                                                                                            | `<strong>{{product_title}}</strong>`  |
| **Price label**  | Die Preiszeile.                                                                                                   | `{{price}}`                           |
| **Description**  | Begleittext.                                                                                                      | `Add {{product_title}} to your order` |

**Title**, **Price label** und **Description** unterstützen alle dieselben vier Tokens: `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` und `{{savings}}`.

<div id="placement-and-limits">
  ## Platzierung und Limits
</div>

* **Region:** Body oder unten.
* **Maximum:** 3 pro Warenkorb-Zustand — der gefüllte und der leere Warenkorb erhalten jeweils ihr eigenes Kontingent.
* **Zustand:** sowohl gefüllter als auch leerer Warenkorb.
* Nicht standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn entfernen oder ausblenden.

<div id="custom-template">
  ## Benutzerdefiniertes Template
</div>

Unterstützt ein [benutzerdefiniertes Template](/de/aftersell/cart/custom-templates) über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Das sind die Props, die er erhält.

<div id="content">
  ### Inhalt
</div>

| Prop                      | Typ              | Wofür sie ist                                                                                                                      |
| ------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `addonTitle`              | `string`         | Titel als reiner Text. Verwende ihn für den Alt-Text und das `aria-label` sowie als Fallback, wenn es keinen Rich-Text-Titel gibt. |
| `addonTitleHtml`          | `string`         | Bereinigtes Rich-Text-Titel-HTML. Leer, wenn keiner vorhanden.                                                                     |
| `descriptionHtml`         | `string`         | Bereinigtes Rich-Text-Beschreibungs-HTML. Leer, wenn keine vorhanden.                                                              |
| `formattedPrice`          | `string`         | Währungsformatiertes Preis-Label. Leer, wenn nicht angezeigt.                                                                      |
| `formattedCompareAtPrice` | `string`         | Formatierter Vergleichspreis der Variante (UVP). Leer, wenn es keine echte Ersparnis gibt.                                         |
| `savings`                 | `string`         | Ersparnis-Label in ganzen Prozent, zum Beispiel `25%`. Leer, wenn es keine Ersparnis gibt.                                         |
| `priceHtml`               | `string \| null` | Bereinigtes Rich-Text-Preis-HTML aus dem eigenen Preisfeld. `null`, wenn leer.                                                     |
| `ctaText`                 | `string`         | Button-Beschriftung, für das `button`-Format.                                                                                      |
| `imageUrl`                | `string`         | Produktbild. Leer, wenn keins vorhanden.                                                                                           |
| `productUrl`              | `string`         | URL der Produktseite. Leer, wenn keine vorhanden — verlinke in dem Fall weder Bild noch Titel.                                     |

<div id="state-and-actions">
  ### Zustand und Actions
</div>

| Prop           | Typ                                  | Wofür sie ist                                                                                                       |
| -------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
| `variantId`    | `number \| null`                     | Aufgelöste Variante. `null`, wenn es keine Live-Variante gibt, weil das Produkt nicht gesetzt oder ausverkauft ist. |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | Wie der Käufer das Add-on hinzufügt. Verzweige dein Markup darauf.                                                  |
| `isEnabled`    | `boolean`                            | Ob das Add-on aktuell im Warenkorb ist.                                                                             |
| `isAdding`     | `boolean`                            | `true`, während das Hinzufügen oder Entfernen läuft. Deaktiviere darauf dein Steuerelement.                         |
| `handleAdd`    | `() => void`                         | Fügt das Add-on hinzu. Für das `button`-Format.                                                                     |
| `handleToggle` | `() => void`                         | Schaltet das Add-on in den Warenkorb hinein und heraus. Für `checkbox` und `toggle`.                                |
| `isLoading`    | `boolean`                            | `true`, während der Warenkorb noch seinen ersten Fetch durchführt.                                                  |

<Warning>
  `format` entscheidet, welcher Handler gilt: `handleAdd` für `button`, `handleToggle` für `checkbox` und `toggle`. Ein `variantId` von `null` bedeutet, dass es nichts hinzuzufügen gibt — sperre dein Steuerelement also darauf, statt einen Handler aufzurufen, der nicht erfolgreich sein kann.
</Warning>

<div id="design">
  ## Design
</div>

Style diesen Block über seinen **Design**-Abschnitt im Einstellungs-Panel. Das sind blockspezifische Overrides, die über deinem globalen Design liegen und darauf zurückfallen, wenn sie leer sind.

<div id="text">
  ### Text
</div>

Der Abschnitt **Text** in Design lässt dich die Typografie dreier Elemente steuern. Verwende den **Text element**-Picker, um zwischen ihnen zu wechseln.

**Title** — der Produktname. Unterstützt zusätzlich eine benutzerdefinierte Schriftfamilie. Fett und Textfarbe werden im Rich-Text-Editor darüber (im Settings-Tab) festgelegt, nicht hier.

| Einstellung        | Was sie steuert                   | Standard       |
| ------------------ | --------------------------------- | -------------- |
| **Font**           | Schriftfamilie für den Titel.     | Erbt vom Theme |
| **Size**           | Schriftgröße.                     | `15px`         |
| **Line height**    | Multiplikator für die Zeilenhöhe. | `1.33`         |
| **Letter spacing** | Zeichenabstand.                   | Normal         |

**Price** — die Preiszeile. Fett und Textfarbe werden im Rich-Text-Editor darüber festgelegt.

| Einstellung        | Was sie steuert                   | Standard |
| ------------------ | --------------------------------- | -------- |
| **Size**           | Schriftgröße.                     | `15px`   |
| **Line height**    | Multiplikator für die Zeilenhöhe. | `1.33`   |
| **Letter spacing** | Zeichenabstand.                   | Normal   |

**Description** — der Begleittext. Fett und Textfarbe werden im Rich-Text-Editor darüber festgelegt.

| Einstellung        | Was sie steuert                   | Standard |
| ------------------ | --------------------------------- | -------- |
| **Size**           | Schriftgröße.                     | `14px`   |
| **Line height**    | Multiplikator für die Zeilenhöhe. | `1.29`   |
| **Letter spacing** | Zeichenabstand.                   | Normal   |

<Tip>
  Ein Klick auf ein Textelement direkt in der Warenkorb-Vorschau hebt es hervor und öffnet dessen Steuerelemente automatisch im Panel.
</Tip>

Was sind Design-Einstellungen? Erfahre mehr hier: [Design-Einstellungen](/de/aftersell/cart/design-settings).