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

# Shipping-Protection-Block

> Der Shipping-Protection-Block des Aftersell Cart: ein Opt-in-Schutz-Add-on, das die Auswahl auf der Bestellung festhält.

> Der **Shipping protection**-Block bietet ein Opt-in-Versandschutz-Add-on, das Käufer im Warenkorb aktivieren können. So können sie Schutz gegen Beschädigung, Verlust oder Diebstahl während des Versands hinzufügen, und die Auswahl wird auf der Bestellung festgehalten — für dein Fulfillment- oder Schadensfall-Tooling.

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

* Das Hinzufügen des Schutzes bewirkt zwei Dinge: Es fügt eine **echte Shopify-Produktzeile** für das Schutzprodukt hinzu und setzt das Warenkorb-Attribut `_shipping_protected` auf `true`.
* **Dieses Attribut überlebt den Checkout und landet auf der Bestellung** als Bestellnotiz-Attribut (`_shipping_protected`), sodass deine Fulfillment- oder Schadensfall-Tools erkennen können, welche Bestellungen geschützt sind.
* Käufer können den Schutz über das Steuerelement sowohl hinzufügen als auch entfernen, egal welchen Anzeigetyp du wählst.
* **Wenn keine nutzbare Schutzvariante existiert, rendert der Block nichts**, statt ein Steuerelement anzuzeigen, das beim Klick einen Fehler auslösen würde.

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

| Einstellung      | Was sie steuert                                                                                                                                         | Standard                                                          |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Title**        | Rich-Text-Überschrift. Unterstützt `{{product_title}}` und `{{price}}`.                                                                                 | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | Die Preiszeile, unter dem Titel angezeigt. Unterstützt `{{product_title}}` und `{{price}}`. Leere dieses Feld, um die Preiszeile komplett auszublenden. | `{{price}}`                                                       |
| **Description**  | Ergänzender Text.                                                                                                                                       | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | Der Schutzpreis (numerisch, legt den berechneten Betrag fest).                                                                                          | `2.5`                                                             |
| **Product**      | Das Schutzprodukt (von der App bereitgestellt).                                                                                                         | —                                                                 |
| **Display type** | Wie das Steuerelement erscheint: **Toggle** oder **Checkbox**.                                                                                          | Toggle                                                            |

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

* **Bereich:** Body oder unten.
* **Maximum:** 1 pro Warenkorbzustand.
* **Zustand:** nur gefüllter Warenkorb.
* Nicht standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn entfernen oder ausblenden.

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

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

| Prop              | Typ                                  | Wofür sie ist                                                                                      |
| ----------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------- |
| `isEnabled`       | `boolean`                            | Ob Shipping Protection aktuell im Warenkorb ist.                                                   |
| `isPending`       | `boolean`                            | `true`, während das Hinzufügen oder Entfernen läuft. Deaktiviere dein Steuerelement darauf.        |
| `title`           | `string`                             | Titel als reiner Text. Der Fallback, wenn es keinen Rich-Text-Titel gibt.                          |
| `titleHtml`       | `string`                             | Bereinigtes Rich-Text-Titel-HTML. Leer, wenn keiner vorhanden.                                     |
| `descriptionHtml` | `string`                             | Bereinigtes Rich-Text-Beschreibungs-HTML. Leer, wenn keine vorhanden.                              |
| `priceHtml`       | `string \| null`                     | Bereinigtes Rich-Text-Preis-HTML aus dem dedizierten Preisfeld. `null`, wenn dieses Feld leer ist. |
| `priceLabel`      | `string`                             | Formatiertes Preislabel. Leer, wenn der Preis nicht angezeigt wird.                                |
| `imageUrl`        | `string`                             | Schutz-Bild. Leer, wenn keines vorhanden.                                                          |
| `ctaText`         | `string`                             | Button-Beschriftung, für das `button`-Format.                                                      |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | Wie der Käufer zustimmt. Verzweige dein Markup danach.                                             |
| `handleAdd`       | `() => void`                         | Fügt den Schutz zum Warenkorb hinzu. Für das `button`-Format.                                      |
| `handleToggle`    | `() => void`                         | Schaltet den Schutz im Warenkorb ein und aus. Für `checkbox` und `toggle`.                         |
| `isLoading`       | `boolean`                            | `true`, während der Warenkorb noch seinen ersten Abruf durchführt.                                 |

<Warning>
  `format` entscheidet, welcher Handler gilt: `handleAdd` für `button`, `handleToggle` für `checkbox` und `toggle`. Verdrahtest du den falschen, bleibt das Steuerelement für Händler, die das andere Format gewählt haben, wirkungslos.
</Warning>

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

Gestalte diesen Block über seinen **Design**-Abschnitt im Einstellungs-Panel. Das sind Überschreibungen pro Block, die auf deinem globalen Design aufsetzen und auf dieses 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** — die Schutz-Überschrift. 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 settings? Erfahre hier mehr: [Design settings](/de/aftersell/cart/design-settings).