Konto und Treue

Kundenkonto, Wunschlisten, Gutscheine und Prämien.

4 Components · 19 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Kundenkonto5
Treueprogramm5
Wunschliste5
Gutscheine4

customer-account

Kundenkonto

Das Kundenkonto eines Shops. Eine Startseite mit der letzten Bestellung unterwegs, das Adressbuch, gespeicherte Zahlungsarten mit Live-Kartenvorschau, der Kontorahmen mit Menü und Sendungsverfolgung ohne Konto.

Kontoübersicht
Adressbuch
Zahlungsarten
Kontorahmen
Bestellung finden

Props und Details

Kontoübersicht

Begrüßung mit Namen, die letzte Bestellung mit einer Spur, die sich bis zu ihrem Stand füllt, Punkte, die hochzählen, mit Balken bis zur nächsten Prämie, und Kurzwege mit Zahlen, die nacheinander aufsteigen und beim Hover ihr Icon einfärben.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/customer-account

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="overview" customer={{ name, since, points, nextReward }} order={order} shortcuts={[{ icon, label, count, href }]} />

Source

Adressbuch

Adresskarten mit Standard-Markierungen, die wandern, sobald eine andere Adresse Standard wird. Entfernen fragt direkt in der Karte noch einmal nach, eine neue Adresse wird in einer Karte erfasst, die hereinzoomt und beim Speichern in die Liste springt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/customer-account

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="addresses" addresses={[{ id, label, name, lines, phone, defaultShipping, defaultBilling }]} />

Source

Zahlungsarten

Gespeicherte Zahlungsarten als gezeichnete Karten, die sich beim Hover heben und neigen, ohne Logos von Kartenanbietern. Eine bald ablaufende Karte sagt es, „Karte hinzufügen“ öffnet ein Formular mit Live-Vorschau, die sich beim Tippen füllt und für die Prüfnummer ihre Rückseite zeigt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/customer-account

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="payment-methods" methods={[{ id, kind: "card", label, last4, holder, expires, tone, isDefault }]} />

Source

Kontorahmen

Der Rahmen um jede Kontoseite. Auf dem Desktop ein Seitenmenü mit Zahlen und einer Markierung, die zur offenen Seite gleitet, auf Telefon und Tablet eine Tab-Reihe mit gleitender Pille, die den offenen Tab in die Mitte scrollt. Die Seite läuft bei jedem Wechsel neu ein.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/customer-account

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="layout" customer={{ name, since }} nav={[{ id, label, icon, count, content: <Orders /> }]} />

Source

Bestellung finden

Sendungsverfolgung ohne Konto. Bestellnummer und E-Mail rein, eine kurze Suche, dann zoomt die Bestellung mit Stand, Spur und Artikeln herein. Ein falsches Paar schüttelt das Formular und sagt, wo beides steht.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/customer-account

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<CustomerAccount variant="order-lookup" order={order} />

Source

loyalty

Treueprogramm

Ein Treueprogramm in Sections. Die Stufen und ihre Vorteile, Wege zum Punktesammeln, Prämien zum Einlösen, die Mitgliedskarte mit Fortschritt und Aktivität und eine Empfehlung mit Link zum Teilen.

Stufen
Punkte sammeln
Prämien
Mitgliedskarte
Freunde einladen

Props und Details

Stufen

Vier Stufen nebeneinander mit Punkterate und Vorteilen. Eine Linie darüber füllt sich beim Scrollen bis dorthin, wo das Mitglied steht, die aktuelle Stufe leuchtet im Akzent und erreichte Stufen haken ihre Vorteile ab.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/loyalty

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="tiers" tiers={[{ id, name, from, rate, perks }]} member={{ name, points }} />

Source

Punkte sammeln

Wege zum Punktesammeln als Kacheln mit ihren Punkten. Das Icon kippt beim Hover, ein Tippen schreibt die Punkte gut, färbt die Kachel grün mit Haken und lässt die Summe in der Ecke hochrollen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/loyalty

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="earn" ways={[{ id, icon, title, text, points, action, done }]} />

Source

Prämien

Prämien mit ihrem Punktepreis. Unerreichbare zeigen einen Balken, wie weit es noch ist, Einlösen rollt das Guthaben herunter, ein „-500“ steigt daraus auf und die Karte wechselt zu „Eingelöst“.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/loyalty

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="rewards" member={{ points }} rewards={[{ id, title, text, cost, icon, image }]} onRedeem={…} />

Source

Mitgliedskarte

Die Mitgliedskarte auf dunkler Fläche mit einem Ring, der sich bis zur nächsten Stufe zeichnet, während die Punkte hochzählen, daneben die letzte Aktivität mit gesammelten und eingelösten Punkten.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/loyalty

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="status" program="Nordhaus Circle" tiers={tiers} member={{ name, points, number, since }} activity={[{ date, text, points }]} />

Source

Freunde einladen

Was beide bekommen als zwei Karten, ein Link, der sich selbst markiert und mit Haken kopiert, Teilen per E-Mail, drei Schritte mit gestrichelter Linie und die Eingeladenen, jeweils mit ihrem Stand.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/loyalty

Bringt mit utils, kit, button, icon, reveal, motion, section, number-ticker, product-image

Usage

<Loyalty variant="referral" referral={{ link, youGet, theyGet, friends: [{ name, status, points }] }} />

Source

wishlist

Wunschliste

Gemerkte Produkte als Raster oder Liste, mehrere benannte Listen, eine Liste, aus der Freunde Geschenke reservieren, und Preisalarme mit Preisverlauf.

Props und Details

Raster

Gemerkte Produkte als Karten mit Preissenkung seit dem Merken, Bestand und „In den Warenkorb“ mit aufsteigendem +1. Das Herz entfernt eine Karte und hinterlässt ein Rückgängig, das abläuft, „Alle“ füllt den Warenkorb auf einmal.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wishlist

Bringt mit utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="grid" title="Wishlist" items={[{ id, name, price, savedPrice, stock, image }]} onMoveToCart={…} />

Source

Liste mit Übersicht

Zeilen mit Optionen, Bestand, Merkdatum und einem Hinweis, sobald Ausverkauftes wieder da ist. Die Sortierung lässt die Zeilen neu einlaufen, die Übersicht daneben zählt Summe und Preissenkungen und legt alles auf einmal in den Warenkorb.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wishlist

Bringt mit utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="list" items={items} onMoveToCart={…} onRemove={…} />

Source

Listen

Mehrere benannte Listen als Collagen, privat oder geteilt. Die Collage zoomt beim Hover, Karten steigen nacheinander auf, eine neue Liste wird direkt benannt und erscheint vorn.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wishlist

Bringt mit utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="boards" boards={[{ id, name, count, shared, images }]} onCreateBoard={(name) => …} />

Source

Geteilte Geschenkliste

Die Liste, die Freunde über einen Link öffnen. Ein Countdown bis zum Tag, ein Balken, der sich mit jeder Reservierung füllt, Notizen der Person und ein Reservieren-Knopf, der zum Sticker wird. Niemand sieht, wer was reserviert hat.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wishlist

Bringt mit utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="shared" owner={{ name, occasion, date, days, message }} items={[{ …, reserved, note }]} onReserve={…} />

Source

Preisalarm

Ein Wunschpreis je Produkt mit einer Preislinie über zwölf Wochen, die sich zeichnet, und dem Wunschpreis als gestrichelter Linie. Plus und Minus verschieben die Linie, ein erreichter Preis lässt die Karte leuchten und macht aus der Aktion „Jetzt kaufen“.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/wishlist

Bringt mit utils, kit, button, icon, reveal, motion, section, select, product-image

Usage

<Wishlist variant="price-watch" items={[{ id, name, price, target, history: [249, 239, …] }]} onAlert={(item, target) => …} />

Source

gift-cards

Gutscheine

Gutscheine zum Gestalten und Verschicken, fertige Karten nach Anlass, eine Guthabenabfrage und das Codefeld im Warenkorb. Die Kartenmotive sind gezeichnet, eigene Motive lassen sich einsetzen.

Gutschein gestalten
Fertige Gutscheine
Guthaben prüfen
Im Warenkorb einlösen

Props und Details

Gutschein gestalten

Motiv, Betrag, Nachricht und Datum. Die Karte zoomt bei jedem neuen Motiv herein, neigt sich zum Zeiger mit vorbeiziehendem Glanz, schreibt Name und Nachricht mit und rollt zum neuen Betrag, die Summe zählt mit.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/gift-cards

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

Usage

<GiftCards variant="designer" brand="Nordhaus" designs={[{ id, name, motif, from, to }]} amounts={[25, 50, 100]} range={[10, 500]} onBuy={…} />

Source

Fertige Gutscheine

Fertige Karten nach Anlass und Betrag in einer Reihe. Die Karten steigen nacheinander auf, neigen sich zum Zeiger mit einem Glanz, der darüber läuft, und der Knopf wechselt mit Haken zu „Im Warenkorb“.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/gift-cards

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

Usage

<GiftCards variant="amounts" brand="Nordhaus" designs={designs} offers={[{ id, amount, occasion, designId, note }]} />

Source

Guthaben prüfen

Der Code ordnet sich beim Tippen in Vierergruppen. Eine kurze Prüfung, dann zeichnet sich ein Ring bis zum Restbetrag und der Verlauf der Karte läuft ein. Ein unbekannter Code schüttelt das Feld und sagt, wo der Code steht.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/gift-cards

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

Usage

<GiftCards variant="balance" balance={{ code, amount, initial, expires, history }} />

Source

Im Warenkorb einlösen

Das Gutscheinfeld der Warenkorb-Summe öffnet mit weicher Höhe. Ein gültiger Code springt als Zeile hinein, die Summe zählt herunter und der Rest, der auf dem Gutschein bleibt, blendet ein. Ein falscher Code wackelt und sagt, was zu prüfen ist.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/gift-cards

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

Usage

<GiftCards variant="redeem" cart={{ subtotal, shipping, validCode, codeValue }} />

Source

Ähnliche Components

Mehr aus E-Commerce, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Konto und Treue stehen.

In die Zwischenablage kopiert