Cart & Smart Cart

Der Warenkorb lebt serverseitig; das SDK liefert einen Handler, formularbasierte Mutationen und optimistische UI, damit sich die Storefront sofort anfühlt.

Der Cart-Handler

Der Worker-Entry des Scaffolds erzeugt via createCartHandler einen Cart pro Besucher — identifiziert über ein Cookie (CART_ID_COOKIE), in jedem Loader über den Kontext lesbar. Die Cart-GraphQL-Dokumente kommen als @kotao/storefront/cart-documents.

Mutationen: `CartForm`

Cart-Schreiboperationen sind Progressive-Enhancement-Formulare:

import { CartForm } from "@kotao/storefront/react";

<CartForm
  action={CartForm.ACTIONS.LinesAdd}
  inputs={{ lines: [{ merchandiseId: variantId, quantity: 1 }] }}
>
  <button type="submit">In den Warenkorb</button>
</CartForm>;

Die verfügbaren Actions (CART_FORM_ACTIONS) decken Add/Update/Remove von Lines, Rabattcodes und Attribute ab. Die action deiner Cart-Route leitet sie an den Handler weiter.

Line-Item-Properties — Personalisierungs-Eingaben wie eine Gravur — reisen als Attribute auf der Line. Sie folgen ihr durch den Drawer, die Checkout-Zusammenfassung und bis auf die Bestellung.

Optimistische UI

useOptimisticCart(cart) — mergt laufende CartForm-Submissions in den gerenderten Cart, Mengen und Summen aktualisieren, bevor der Server antwortet.
useOptimisticVariant / OptimisticInput — dieselbe Idee für Variantenauswahl und eigene Inputs.

Smart Cart: der Plattform-Drawer

Kotao liefert einen konfigurierbaren Cart-Drawer (Upsells, Free-Shipping-Bar, BOGO-Darstellung), den Händler im Workspace verwalten — ohne Theme-Code. Öffne ihn nach dem Add-to-Cart mit:

import { openSmartCart } from "@kotao/storefront/react";

openSmartCart();

Hat der Händler Smart Cart nicht aktiviert, bleibt eine /cart-Route der Fallback — die Struktur des Scaffolds sieht das bereits vor.