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

> Der Summary-Block des Aftersell Cart: Summen, Ersparnisse und angewendete Rabattcodes.

> Der **Summary**-Block zeigt Käufern, was sie zahlen werden: eine Summenzeile mit optionalen Ersparnissen plus angewendeten Rabatt-Tags. Er fasst die Summen und Ersparnisse des Warenkorbs direkt über dem Checkout-Button zusammen, sodass Käufer das Endergebnis sehen, bevor sie sich entscheiden.

<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 mit Zwischensumme, Ersparnissen und angewendeten Rabatten vor dem Checkout" width="1368" height="250" data-path="images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png" />
</Frame>

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

* **Ersparnis-Tokens brechen sauber zusammen.** Wenn eine Zelle `{{savings}}` oder `{{pre_savings_price}}` referenziert, der Warenkorb aber keine Ersparnis hat, fällt diese Zelle auf nur `{{total_price}}` zurück — Käufer sehen also nie „\$0.00 Rabatt“ oder einen durchgestrichenen Preis, der der Summe entspricht. Kombinierst du `{{cart_item_count}}` und `{{savings}}` in derselben Zelle, wird im Fallback ohne Ersparnis auch die Artikelanzahl entfernt — platziere sie in separaten Zellen, um das zu vermeiden.
* Rabatt-Tags erscheinen nur, wenn **Show discount codes** aktiviert ist *und* der Warenkorb Rabatte zum Auflisten hat. Das umfasst sowohl code-basierte als auch automatische Rabatte.

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

| Einstellung             | Was sie steuert                                                                                                    | Standard                                     |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- |
| **Left text**           | Die linke Zelle der Summenzeile. Rich Text mit Tokens. Beispiel: `Subtotal ({{cart_item_count}} items)`.           | `Subtotal`                                   |
| **Right text**          | Die rechte Zelle. Rich Text mit Tokens (Summe, durchgestrichener Preis vor Ersparnis, Ersparnisse, Artikelanzahl). | Summe mit durchgestrichenem Ersparnis-Markup |
| **Savings format**      | Ersparnisse als ganzer `percent`-Wert oder als `absolute`-Betrag anzeigen.                                         | `percent`                                    |
| **Show discount codes** | Ob Tags für angewendete Rabatte erscheinen. Das umfasst sowohl code-basierte als auch automatische Rabatte.        | An                                           |

Die Textzellen unterstützen die Tokens `{{cart_item_count}}`, `{{total_price}}`, `{{pre_savings_price}}` und `{{savings}}`.

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

* **Bereich:** unten.
* **Maximum:** 2 pro Warenkorbzustand — der gefüllte und der leere Warenkorb erhalten jeweils ihr eigenes Kontingent.
* **Zustand:** sowohl gefüllter als auch leerer Warenkorb.
* Wird neuen Warenkörben standardmäßig hinzugefügt. Nicht gesperrt, du kannst ihn also 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                                                                                                                                       |
| ------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `leftHtml`          | `string`   | Die linke Zelle als bereinigtes HTML, mit aufgelösten Tokens.                                                                                       |
| `rightHtml`         | `string`   | Die rechte Zelle als bereinigtes HTML, mit aufgelösten Tokens.                                                                                      |
| `discountCodes`     | `string[]` | Auf den Warenkorb angewendete Rabatt-Titel (code-basiert und automatisch). `[]`, wenn keine vorhanden.                                              |
| `showDiscountCodes` | `boolean`  | Ob der Händler Rabatt-Tags aufgelistet haben möchte **und** der Warenkorb Rabatte zum Auflisten hat.                                                |
| `hasSavings`        | `boolean`  | `true`, wenn der Warenkorb eine Ersparnis hat. Nutze es, um deine eigene Ersparniszeile auszublenden.                                               |
| `totalPrice`        | `string`   | Warenkorbsumme, bereits formatiert.                                                                                                                 |
| `preSavingsPrice`   | `string`   | Summe vor Ersparnissen, bereits formatiert.                                                                                                         |
| `savings`           | `string`   | Gesparter Betrag. Bereits formatiert **oder ein Prozentsatz** wie `15%`, abhängig von der Savings-Format-Einstellung des Händlers.                  |
| `itemCount`         | `number`   | Gesamtzahl der Einheiten im Warenkorb — Summe der sichtbaren Zeilenmengen, ohne die Shipping-Protection-Zeile.                                      |
| `isLoading`         | `boolean`  | Hier immer `false`: Der Block rendert während des Ladens sein integriertes Skeleton und ruft dein Template erst auf, wenn der Warenkorb bereit ist. |

<Warning>
  Da `savings` entweder ein Geldbetrag oder ein Prozentsatz sein kann, baue keinen eigenen Satz darum herum, der eines von beidem voraussetzt. `{props.savings}` allein ist sicher; `You saved ${props.savings}` nicht.
</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.

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