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

# Checkout button-Block

> Der Checkout button-Block des Aftersell Cart: der erforderliche Footer-CTA, der Kunden zum Checkout führt.

> Der **Checkout button**-Block ist der primäre Call-to-Action im Footer des Carts, der Kunden zum Checkout führt und ihnen einen klaren, prominenten Weg vom Cart zum Checkout bietet. Er ist ein Pflichtblock.

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

* Die Schaltfläche ermittelt eine **lokalisierte, marktgerechte Checkout-URL**, sodass Kunden im Checkout des richtigen Markts landen. Kann diese nicht ermittelt werden, fällt sie auf den Standard-Link `/checkout` zurück.
* Mit aktiviertem **Go to cart page instead of checkout** verlinkt die Schaltfläche stattdessen auf `/cart`.
* Ein Klick navigiert per JavaScript, damit die eigene Cart-Verarbeitung eines Themes ihn nicht abfangen kann, respektiert aber weiterhin Neuer-Tab-Absichten (Cmd/Strg-Klick, Mittelklick).
* Der Klick löst das SDK-[`checkout`-Event](/de/aftersell/cart/sdk-events) aus, das du abonnieren kannst.

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

| Einstellung                             | Was sie steuert                                                                      | Standard                     |
| --------------------------------------- | ------------------------------------------------------------------------------------ | ---------------------------- |
| **Button label**                        | Reine Textbeschriftung, eingegeben in einem Textfeld. Unterstützt `{{total_price}}`. | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | Führt Kunden auf deine `/cart`-Seite statt direkt zum Checkout.                      | Aus                          |

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

* **Bereich:** unten.
* **Maximum:** 1 pro Cart-Zustand.
* **Zustand:** nur gefüllter Cart.
* **Gesperrt und standardmäßig hinzugefügt.** Die Checkout-Schaltfläche kann nicht entfernt oder ausgeblendet, nur innerhalb des Footers neu positioniert werden.

<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. Dies sind die Props, die es erhält.

| Prop        | Typ                   | Wofür sie dient                                                                                                                                |
| ----------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | Die Schaltflächenbeschriftung als bereinigtes HTML, mit aufgelöstem `{{total_price}}`.                                                         |
| `href`      | `string \| undefined` | Die Checkout-URL. `undefined` in der Editor-Vorschau, wo es nichts zu navigieren gibt.                                                         |
| `isLoading` | `boolean`             | Hier immer `false`: Der Block rendert während des Ladens sein integriertes Skeleton und ruft dein Template erst auf, wenn der Cart bereit ist. |

<Warning>
  **Eine benutzerdefinierte Checkout-Schaltfläche verliert das Checkout-Tracking.** Die integrierte Schaltfläche hängt einen Klick-Handler an, der das SDK-[`checkout`-Event](/de/aftersell/cart/sdk-events#checkout) auslöst und die Conversion für die [Cart-Analytics](/de/aftersell/cart/analytics) erfasst. Dieser Handler wird nicht an benutzerdefinierte Templates übergeben — eine Navigation allein über `href` überspringt also beides.

  Wenn du das Event benötigst, löse es selbst über ein `onClick` vor der Navigation aus. Das Attributionsreporting lässt sich auf diesem Weg dennoch nicht wiederherstellen — bevorzuge daher das Umgestalten der integrierten Schaltfläche mit [Design-Einstellungen](/de/aftersell/cart/design-settings) oder [Custom CSS](/de/aftersell/cart/custom-css), es sei denn, du brauchst wirklich anderes Markup.
</Warning>

Rendere `href` unverändert, statt einen Standardwert zu setzen. Ein `<a>` ohne `href` ist inaktiv, was im Editor das korrekte Verhalten ist.

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

Gestalte diesen Block über seinen Abschnitt **Design** im Einstellungspanel. Dies sind Überschreibungen pro Block, die auf deinem globalen Design aufsetzen und darauf zurückfallen, wenn sie leer sind.

Was sind Design-Einstellungen? Mehr erfährst du hier: [Design-Einstellungen](/de/aftersell/cart/design-settings).