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

# Summary-block

> Het Summary-block van de Aftersell Cart: totalen, besparingen en toegepaste kortingscodes.

> Het **Summary**-block toont de shopper wat hij gaat betalen: een totaalregel met optionele besparingen, plus toegepaste kortings-tags. Het vat de totalen en besparingen van de winkelwagen samen vlak boven de checkout-knop, zodat shoppers het eindbedrag zien voordat ze zich vastleggen.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=455f22040697c41fd1e02a870e9cccf8" alt="Summary-block dat subtotaal, besparingen en toegepaste kortingen toont vóór de checkout" width="1368" height="250" data-path="images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png" />
</Frame>

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

* **Besparings-tokens klappen elegant in.** Als een cel `{{savings}}` of `{{pre_savings_price}}` refereert maar de winkelwagen geen besparing heeft, valt die cel terug op alleen `{{total_price}}`, zodat shoppers nooit "\$0.00 korting" of een doorgestreepte prijs gelijk aan het totaal zien. Combineer je `{{cart_item_count}}` en `{{savings}}` in dezelfde cel, dan wordt het aantal items in de fallback zonder besparingen ook verwijderd — zet ze in aparte cellen om dit te vermijden.
* Kortings-tags verschijnen alleen wanneer **Show discount codes** aan staat *en* de winkelwagen kortingen heeft om weer te geven. Dit omvat zowel code-gebaseerde als automatische kortingen.

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

| Instelling              | Wat het bepaalt                                                                                                 | Standaard                                  |
| ----------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| **Left text**           | De linkercel van de totaalregel. Rich text met tokens. Voorbeeld: `Subtotal ({{cart_item_count}} items)`.       | `Subtotal`                                 |
| **Right text**          | De rechtercel. Rich text met tokens (totaal, doorgestreepte prijs vóór besparingen, besparingen, aantal items). | Totaal met doorgestreepte besparingsmarkup |
| **Savings format**      | Toon besparingen als een geheel `percent` of een `absolute` bedrag.                                             | `percent`                                  |
| **Show discount codes** | Of toegepaste kortings-tags verschijnen. Dit omvat zowel code-gebaseerde als automatische kortingen.            | Aan                                        |

De tekstcellen ondersteunen de tokens `{{cart_item_count}}`, `{{total_price}}`, `{{pre_savings_price}}` en `{{savings}}`.

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

* **Regio:** bottom.
* **Maximum:** 2 per winkelwagenstatus — de gevulde winkelwagen en de lege winkelwagen krijgen elk hun eigen ruimte.
* **Status:** zowel gevulde als lege winkelwagen.
* Standaard toegevoegd aan nieuwe winkelwagens. Niet vergrendeld, dus 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                                                                                                                              |
| ------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `leftHtml`          | `string`   | De linkercel als gesanitizede HTML, met tokens opgelost.                                                                                      |
| `rightHtml`         | `string`   | De rechtercel als gesanitizede HTML, met tokens opgelost.                                                                                     |
| `discountCodes`     | `string[]` | Kortingstitels die op de winkelwagen zijn toegepast (code-gebaseerd en automatisch). `[]` wanneer er geen zijn.                               |
| `showDiscountCodes` | `boolean`  | Of de merchant kortings-tags vermeld wil hebben **en** de winkelwagen kortingen heeft om weer te geven.                                       |
| `hasSavings`        | `boolean`  | `true` wanneer de winkelwagen een besparing heeft. Gebruik het om je eigen besparingsregel te verbergen.                                      |
| `totalPrice`        | `string`   | Winkelwagentotaal, al geformatteerd.                                                                                                          |
| `preSavingsPrice`   | `string`   | Totaal vóór besparingen, al geformatteerd.                                                                                                    |
| `savings`           | `string`   | Bespaard bedrag. Al geformatteerd, **of een percentage** zoals `15%`, afhankelijk van de savings-format-instelling van de merchant.           |
| `itemCount`         | `number`   | Totaal aantal eenheden in de winkelwagen — zichtbare regelaantallen opgeteld, exclusief de verzendbeschermingsregel.                          |
| `isLoading`         | `boolean`  | Hier altijd `false`: het block rendert zijn ingebouwde skeleton tijdens het laden en roept je template pas aan zodra de winkelwagen klaar is. |

<Warning>
  Omdat `savings` zowel geld als een percentage kan zijn, bouw er geen eigen zin omheen die van één uitgaat. `{props.savings}` op zichzelf is veilig; `You saved ${props.savings}` niet.
</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.

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