Carrello & Carrello intelligente

Il carrello vive lato server; l’SDK ti fornisce un handler, mutazioni basate su form e UI ottimistica così il storefront sembra istantaneo.

Il gestore del carrello

L’entry Worker dello scaffold crea un carrello per visitatore tramite createCartHandler — identificato da un cookie (CART_ID_COOKIE), leggibile in qualsiasi loader tramite il contesto. I documenti GraphQL del carrello vengono forniti come @kotao/storefront/cart-documents.

Mutare: `CartForm`

Le scritture del carrello sono form di progressive-enhancement:

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

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

Le azioni disponibili (CART_FORM_ACTIONS) coprono aggiunta/aggiornamento/rimozione linee, codici sconto e attributi. L’action della tua rotta carrello le invia al handler del carrello.

Proprietà degli articoli — input di personalizzazione come un incisione — viaggiano come attributi sulla linea. Seguono la linea attraverso il drawer, il riepilogo checkout e sull’ordine.

UI ottimistica

useOptimisticCart(cart) — fonde le sottomissioni CartForm in transito nel carrello che renderizzi, così quantità e totali si aggiornano prima della risposta del server.
useOptimisticVariant / OptimisticInput — la stessa idea per la selezione variante e input personalizzati.

Smart Cart: il drawer della piattaforma

Kotao fornisce un drawer del carrello configurabile (upsell, barra spedizione gratuita, presentazione BOGO) che i commercianti gestiscono nello Workspace — nessun codice tema. Attivalo dopo un aggiunta al carrello con:

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

openSmartCart();

Se il commerciante non ha abilitato Smart Cart, mantieni una rotta /cart come fallback — la struttura dello scaffold già lo fa.