Cart und Checkout

Cart, Checkout in einem oder mehreren Schritten, Expresskauf und die Bestellbestätigung.

2 Components · 10 Variants

Kategorie wechseln

cart

Warenkorb

Der Warenkorb als Panel, Seite, Popover, leerer Zustand und mit Zusatzangeboten.

Props und Details

Seitenpanel

Fährt von rechts herein, mit Fortschritt zum Gratisversand, Rückgängig beim Entfernen und Vorschlägen.

Installv1.0.1

aiw add @ai-website/cart

Bringt mit utils, kit, button, icon, reveal, product-image

Usage

<Cart variant="slide-over" items={items} freeShippingFrom={120} header={{ name }}>{page}</Cart>

Source

Ganze Seite

Positionen links, mitlaufende Übersicht mit Rabattcode und MwSt. rechts.

Installv1.0.1

aiw add @ai-website/cart

Bringt mit utils, kit, button, icon, reveal, product-image

Usage

<Cart variant="full-page" items={items} promo={{ code: "WELCOME10", percent: 10 }} />

Source

Mini-Popover

Eine kleine Vorschau unter dem Warenkorb-Knopf, schließt bei Klick daneben und mit Escape.

Leerer Zustand

Ein freundlicher leerer Warenkorb, der mit beliebten Produkten zurück in den Shop führt.

Installv1.0.1

aiw add @ai-website/cart

Bringt mit utils, kit, button, icon, reveal, product-image

Usage

<Cart variant="empty-state" recommendations={products} />

Source

Mit Zusatzangebot

Ein Set mit Rabatt, Geschenkverpackung, Anmerkung und passenden Produkten.

Installv1.0.1

aiw add @ai-website/cart

Bringt mit utils, kit, button, icon, reveal, product-image

Usage

<Cart variant="with-upsell" items={items} bundle={{ title, products, price: 36.9 }} giftWrap={{ price: 3.5 }} />

Source

checkout

Kasse

Von einer Seite bis Schritt für Schritt, Express-Kasse und die Bestätigung danach.

Eine Seite
Zweispaltig
In Schritten
Express
Bestätigung

Props und Details

Eine Seite

Kontakt, Lieferung, Versand, Zahlung und Übersicht in einer ruhigen Spalte.

Installv1.0.1

aiw add @ai-website/checkout

Bringt mit utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="one-page" items={items} shippingOptions={…} paymentOptions={…} />

Source

Zweispaltig

Formular links, Übersicht rechts. Auf dem Telefon klappt die Übersicht oben auf.

Installv1.0.1

aiw add @ai-website/checkout

Bringt mit utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="two-column" items={items} shippingOptions={…} paymentOptions={…} />

Source

In Schritten

Vier Schritte mit Fortschritt, Prüfung je Schritt und einer Übersicht mit Ändern-Links.

Installv1.0.1

aiw add @ai-website/checkout

Bringt mit utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="multi-step" items={items} values={customer} initialStep={0} />

Source

Express

Neutrale Express-Knöpfe zuerst, E-Mail als ruhige Alternative.

Installv1.0.1

aiw add @ai-website/checkout

Bringt mit utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="express" items={items} expressOptions={[{ label, icon }]} />

Source

Bestätigung

Danke, Bestellstatus, was gekauft wurde und wohin es geht.

Installv1.0.1

aiw add @ai-website/checkout

Bringt mit utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="confirmation" items={items} order={{ number, firstName, email, delivery, steps, done }} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Cart und Checkout stehen.

Seitenpanel

Ganze Seite

Mini-Popover

Leerer Zustand

Mit Zusatzangebot

Eine Seite

Zweispaltig

In Schritten

Express

Bestätigung

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit