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

> Het Shipping protection-block van de Aftersell Cart: een opt-in beschermings-add-on die de keuze op de bestelling vastlegt.

> Het **Shipping protection**-block biedt een opt-in verzendbeschermings-add-on die shoppers in de winkelwagen kunnen aanzetten, waarmee ze bescherming kunnen toevoegen tegen schade, verlies of diefstal tijdens de verzending en die keuze op de bestelling wordt vastgelegd voor je fulfilment- of claimstools.

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

* Bescherming toevoegen doet twee dingen: het voegt een **echte Shopify-productregel** toe voor het beschermingsproduct, en het zet een `_shipping_protected`-winkelwagenattribuut op `true`.
* **Dat attribuut overleeft de checkout en belandt op de bestelling** als order note attribute (`_shipping_protected`), zodat je fulfilment- of claimstools kunnen zien welke bestellingen beschermd zijn.
* Shoppers kunnen bescherming zowel toevoegen als verwijderen met de control, welk weergavetype je ook kiest.
* **Als er geen bruikbare beschermingsvariant bestaat, rendert het block niets** in plaats van een control te tonen die bij een klik een fout zou geven.

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

| Instelling       | Wat het bepaalt                                                                                                                                       | Standaard                                                         |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Title**        | Rich-text kop. Ondersteunt `{{product_title}}` en `{{price}}`.                                                                                        | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | De prijsregel, weergegeven onder de titel. Ondersteunt `{{product_title}}` en `{{price}}`. Maak dit veld leeg om de prijsregel volledig te verbergen. | `{{price}}`                                                       |
| **Description**  | Ondersteunende tekst.                                                                                                                                 | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | De beschermingsprijs (numeriek, bepaalt het in rekening gebrachte bedrag).                                                                            | `2.5`                                                             |
| **Product**      | Het beschermingsproduct (door de app aangemaakt).                                                                                                     | —                                                                 |
| **Display type** | Hoe de control verschijnt: **Toggle** of **Checkbox**.                                                                                                | Toggle                                                            |

<div id="placement-and-limits">
  ## Plaatsing en limieten
</div>

* **Regio:** body of bottom.
* **Maximum:** 1 per winkelwagenstatus.
* **Status:** alleen gevulde winkelwagen.
* Niet standaard toegevoegd. Niet vergrendeld — je kunt het verwijderen of verbergen.

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

Ondersteunt een [custom template](/nl/aftersell/cart/custom-templates) vanaf zijn Code-tabblad, dat de ingebouwde markup van dit block vervangt door jouw JSX. Dit zijn de props die het ontvangt.

| Prop              | Type                                 | Waar het voor is                                                                               |
| ----------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------- |
| `isEnabled`       | `boolean`                            | Of verzendbescherming momenteel in de winkelwagen zit.                                         |
| `isPending`       | `boolean`                            | `true` terwijl het toevoegen of verwijderen bezig is. Schakel hierop je control uit.           |
| `title`           | `string`                             | Platte-teksttitel. De fallback wanneer er geen rich-text titel is.                             |
| `titleHtml`       | `string`                             | Gesanitizede rich-text titel-HTML. Leeg wanneer er geen is.                                    |
| `descriptionHtml` | `string`                             | Gesanitizede rich-text beschrijvings-HTML. Leeg wanneer er geen is.                            |
| `priceHtml`       | `string \| null`                     | Gesanitizede rich-text prijs-HTML uit het speciale prijsveld. `null` wanneer dat veld leeg is. |
| `priceLabel`      | `string`                             | Geformatteerd prijslabel. Leeg wanneer de prijs niet wordt getoond.                            |
| `imageUrl`        | `string`                             | Beschermingsafbeelding. Leeg wanneer er geen is.                                               |
| `ctaText`         | `string`                             | Knoplabel, voor het `button`-formaat.                                                          |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | Hoe de koper zich aanmeldt. Vertak je markup hierop.                                           |
| `handleAdd`       | `() => void`                         | Voegt bescherming toe aan de winkelwagen. Voor het `button`-formaat.                           |
| `handleToggle`    | `() => void`                         | Schakelt bescherming in en uit de winkelwagen. Voor `checkbox` en `toggle`.                    |
| `isLoading`       | `boolean`                            | `true` terwijl de winkelwagen nog met zijn eerste fetch bezig is.                              |

<Warning>
  `format` bepaalt welke handler van toepassing is: `handleAdd` voor `button`, `handleToggle` voor `checkbox` en `toggle`. De verkeerde aansluiten laat de control inert voor merchants die het andere formaat kozen.
</Warning>

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

Style dit block met zijn **Design**-sectie in het instellingenpaneel. Dit zijn overrides per block die bovenop je globale design komen en erop terugvallen wanneer ze leeg zijn.

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

De sectie **Text** in Design regelt de typografie van drie elementen. Gebruik de kiezer **Text element** om ertussen te wisselen.

**Title** — de kop van de bescherming. Ondersteunt ook een aangepaste font family. Vet en tekstkleur stel je in de Rich Text Editor hierboven in (op het tabblad Settings), niet hier.

| Instelling         | Wat het regelt               | Standaard            |
| ------------------ | ---------------------------- | -------------------- |
| **Font**           | Font family voor de titel.   | Neemt over van thema |
| **Size**           | Lettergrootte.               | `15px`               |
| **Line height**    | Regelhoogtevermenigvuldiger. | `1.33`               |
| **Letter spacing** | Tracking tussen letters.     | Normal               |

**Price** — de prijsregel. Vet en tekstkleur stel je in de Rich Text Editor hierboven in.

| Instelling         | Wat het regelt               | Standaard |
| ------------------ | ---------------------------- | --------- |
| **Size**           | Lettergrootte.               | `15px`    |
| **Line height**    | Regelhoogtevermenigvuldiger. | `1.33`    |
| **Letter spacing** | Tracking tussen letters.     | Normal    |

**Description** — de ondersteunende tekst. Vet en tekstkleur stel je in de Rich Text Editor hierboven in.

| Instelling         | Wat het regelt               | Standaard |
| ------------------ | ---------------------------- | --------- |
| **Size**           | Lettergrootte.               | `14px`    |
| **Line height**    | Regelhoogtevermenigvuldiger. | `1.29`    |
| **Letter spacing** | Tracking tussen letters.     | Normal    |

<Tip>
  Als je in de winkelwagenvoorvertoning direct op een tekstelement klikt, wordt dat element gemarkeerd en worden de bedieningsopties automatisch in het paneel geopend.
</Tip>

Wat zijn design settings? Lees er hier meer over: [Design settings](/nl/aftersell/cart/design-settings).