Versand und Filialen

Lieferzeiten, Bestand, Abholung und Filialsuche.

4 Components · 17 Variants

Kategorie wechseln

Auf dieser Seite

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

Lagerbestand5
Lieferzeit und Versand4
Shop-Versprechen4
Filialfinder4

stock-status

Lagerbestand

Was da ist, was fast weg ist, was wiederkommt, was sich vorbestellen lässt und wo es heute abholbereit liegt. Jeder Zustand steht in Worten da, die Farbe hilft nur.

Bestandszeile
Bestand je Größe
Wieder-da-Hinweis
Vorbestellung
Im Laden verfügbar

Props und Details

Bestandszeile

Die Bestandszeile in sechs Zuständen auf Produktkarten, von auf Lager und nur noch wenige bis ausverkauft, Vorbestellung und auf Bestellung gefertigt. Lebende Zustände atmen, der Restbalken läuft beim Hereinscrollen herunter, Ausverkauftes wird zu „Benachrichtigen“.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/stock-status

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

Usage

<StockStatus variant="inline" lines={[{ kind: "low", label: "Only 3 left", note, count: 3, product }]} />

Source

Bestand je Größe

Größen mit einem Punkt für ihren Bestand, ausverkaufte durchgestrichen, aber wählbar. Die gewählte Größe sagt in Worten, was übrig ist, wechselt mit kurzem Aufstieg und zeigt einen Balken der letzten Stücke, eine ausverkaufte nennt ihr Datum und „Benachrichtigen“.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/stock-status

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

Usage

<StockStatus variant="low-stock" product={product} sizes={[{ label: "42", stock: 3 }, { label: "44", stock: 0, restock }]} lowFrom={3} />

Source

Wieder-da-Hinweis

Ein ausverkauftes Produkt mit Größenwahl, E-Mail und einem Haken für Preissenkungen. Das erwartete Datum blendet je Größe ein, eine fehlende Größe oder E-Mail wackelt und sagt, was zu tun ist, die Bestätigung zeichnet ihren Haken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/stock-status

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

Usage

<StockStatus variant="back-in-stock" product={product} sizes={[{ label, stock: 0, restock }]} onNotify={(size, email) => …} />

Source

Vorbestellung

Ein Produkt vor dem Erscheinen, mit Tagen bis dahin im Bild, die erste Auflage, die sich beim Scrollen füllt, jetzt bezahlen oder Anzahlung, und der Weg von der Bestellung bis zur Tür. Wer vorbestellt, zählt sich selbst in die Auflage.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/stock-status

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

Usage

<StockStatus variant="preorder" product={product} preorder={{ release, days, reserved, total, deposit, steps }} onPreorder={(pay) => …} />

Source

Im Laden verfügbar

Welcher Laden die gewählte Größe heute hat, mit Entfernung, Öffnungszeit und Stückzahl. Ein Größenwechsel lässt die Liste neu einlaufen und wechselt zu einem Laden, der sie hat, Reservieren legt es 48 Stunden zurück.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/stock-status

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

Usage

<StockStatus variant="store-availability" product={product} sizes={sizes} stores={[{ id, name, address, distance, hours, stock: { "42": 2 } }]} onReserve={…} />

Source

shipping-estimator

Lieferzeit und Versand

Wann es ankommt und was es kostet. Optionen für eine Postleitzahl, der Bestellschluss von heute mit dem Weg zur Tür, Preise je Region und ein Lieferfenster zum Buchen.

Postleitzahl prüfen
Bestellschluss
Preise je Region
Lieferfenster

Props und Details

Postleitzahl prüfen

Land und Postleitzahl rein, Lieferoptionen mit Datum und Preis raus. Eine falsche Postleitzahl wackelt und sagt, was passt, die Prüfung dreht kurz, dann laufen die Optionen ein und ihre Daten werden scharf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/shipping-estimator

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

Usage

<ShippingEstimator variant="postcode" countries={[{ code, label, pattern, example }]} options={[{ id, name, eta, price, icon }]} onCheck={…} />

Source

Bestellschluss

Die Zeit bis zum heutigen Bestellschluss in einem Ring, der sich leert, daneben der Ankunftstag. Standard oder schneller tauscht das Datum mit kurzem Aufstieg, der Weg zur Tür füllt seine Linie beim Scrollen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/shipping-estimator

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

Usage

<ShippingEstimator variant="countdown" minutesLeft={134} arrival={{ standard, fast, fastPrice }} steps={[{ label, date, fastDate, icon }]} />

Source

Preise je Region

Versandpreise je Region in Tabs mit gleitender Markierung. Eine Tabelle mit Lieferzeit, Kosten und Gratis-Schwelle auf breiten Bildschirmen, Karten auf dem Telefon, die Zeilen laufen bei jedem Wechsel ein. Die Zusagen darunter steigen nacheinander auf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/shipping-estimator

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

Usage

<ShippingEstimator variant="rates-table" zones={[{ id, label, rows: [{ method, time, price, freeFrom }] }]} notes={[…]} />

Source

Lieferfenster

Eine Leiste mit Tagen und dem günstigsten Preis je Tag, die Markierung gleitet zum gewählten, auch per Pfeiltaste. Zeitfenster laufen je Tag ein, volle bleiben sichtbar und durchgestrichen, die Übersicht daneben bucht das Fenster.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/shipping-estimator

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

Usage

<ShippingEstimator variant="delivery-slots" days={[{ id, weekday, day, label, slots: [{ id, label, price, full }] }]} onSelect={(day, slot) => …} />

Source

shop-benefits

Shop-Versprechen

Was ein Shop zu Versand, Rückgabe, Bezahlung und Service verspricht. Eine ruhige Leiste unter dem Header, Karten mit Details, der Balken bis zum Gratisversand und eine Geld-zurück-Garantie mit Siegel.

Versprechensleiste
Versprechenskarten
Balken bis Gratisversand
Garantie

Props und Details

Versprechensleiste

Vier Versprechen in einer ruhigen Reihe mit Haarlinien dazwischen, die nacheinander aufsteigen. Auf dem Tablet zwei mal zwei, auf dem Telefon eines nach dem anderen, alle vier Sekunden das nächste, mit Pfeilen und Pause bei Berührung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/shop-benefits

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

Usage

<ShopBenefits variant="strip" items={[{ icon, title, text, href }]} />

Source

Versprechenskarten

Die Versprechen als Karten mit kurzem Text und Link zu den Details. Die Karten steigen nacheinander auf, heben sich beim Hover mit einem weichen Licht in der Ecke, und das Icon kippt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/shop-benefits

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

Usage

<ShopBenefits variant="cards" title="…" items={[{ icon, title, text, href }]} />

Source

Balken bis Gratisversand

Wie weit es noch bis zum kostenlosen Versand ist, für Warenkorb, Mini-Warenkorb oder über dem Produktraster. Der Balken füllt sich beim Hereinscrollen und gleitet bei jeder Änderung, ein Licht läuft darüber, und das Erreichen färbt ihn mit kurzem Aufspringen grün.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/shop-benefits

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

Usage

<ShopBenefits variant="free-shipping" threshold={60} subtotal={42.9} />

Source

Garantie

Ein großes Versprechen mit Siegel. Die Striche um die Zahl erscheinen beim Hereinscrollen nacheinander, daneben steigen die Bedingungen auf, die man lesen will, ein Link führt zu den vollen Regeln.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/shop-benefits

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

Usage

<ShopBenefits variant="guarantee" days={30} title="…" description="…" terms={[…]} action={{ label, href }} />

Source

store-locator

Filialfinder

Den Laden finden. Eine gezeichnete Karte mit Liste, die gemeinsam aufleuchten, die Seite eines Ladens mit Woche und Angebot, Ladenkarten mit Viertel-Chips und ein Finder für den nächsten Laden.

Karte und Liste
Ladenseite
Ladenkarten
Nächster Laden

Props und Details

Karte und Liste

Eine gezeichnete Stadtteilkarte mit Pins, die nacheinander fallen, daneben eine Liste mit Suche. Hover oder Wahl eines Ladens lässt seinen Pin mit Schein und Namen aufleuchten, ein Tipp auf einen Pin scrollt die Liste dorthin. Auf dem Telefon sind Liste und Karte zwei Ansichten hinter einem Schalter.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/store-locator

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

Usage

<StoreLocator variant="map-list" stores={[{ id, name, address, x, y, open, status, distance }]} />

Source

Ladenseite

Ein Laden, jetzt geöffnet mit atmendem Punkt, ein Foto, das beim Scrollen treibt, Angebote, die nacheinander aufsteigen, der Pin auf der Karte, Route und Anruf, und die Woche mit markiertem Heute.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/store-locator

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

Usage

<StoreLocator variant="store-detail" stores={[{ …, hours: [{ day, hours, today }], services: [{ icon, label }], note }]} />

Source

Ladenkarten

Ladenkarten mit Foto, Viertel, Entfernung und Öffnungsstand. Viertel-Chips und ein Schalter „nur geöffnete“ filtern die Karten, die bei jeder Änderung neu einlaufen. Karten heben sich beim Hover, das Foto zoomt innen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/store-locator

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

Usage

<StoreLocator variant="cards" stores={[{ id, name, address, region, open, status, image }]} />

Source

Nächster Laden

Standort nutzen oder Postleitzahl. Während der Suche pulsiert ein Ring über der Karte, dann läuft der nächste Laden mit Entfernung, Wegzeit und Öffnungsstand ein, dazu zwei weitere in der Nähe. „Als meinen Laden wählen“ bestätigt mit Haken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/store-locator

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

Usage

<StoreLocator variant="nearest" stores={[nearest, second, third]} onLocate={() => …} />

Source

Ähnliche Components

Mehr aus E-Commerce, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Versand und Filialen stehen.

In die Zwischenablage kopiert