Skip to main content
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.

​
Verhalten

  • 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 aus, das du abonnieren kannst.

​
Einstellungen

​
Platzierung und Grenzen

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

​
Benutzerdefiniertes Template

Unterstützt ein benutzerdefiniertes Template über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Dies sind die Props, die es erhält.
Eine benutzerdefinierte Checkout-Schaltfläche verliert das Checkout-Tracking. Die integrierte Schaltfläche hängt einen Klick-Handler an, der das SDK-checkout-Event auslöst und die Conversion für die 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 oder Custom CSS, es sei denn, du brauchst wirklich anderes Markup.
Rendere href unverändert, statt einen Standardwert zu setzen. Ein <a> ohne href ist inaktiv, was im Editor das korrekte Verhalten ist.

​
Design

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.