Zum Inhalt springen
UI Kit
Accent

Bestellungen und Retouren

Alles nach dem Kauf, von Bestellübersicht und Sendungsverlauf bis zu Rechnung, Rücksendung und Abo.

5 Variants
Kategorie wechseln

Bestellungen

Bestellübersicht

Alle Bestellungen mit Status, Filter als Reiter und Aktionen je Bestellung.

Bestelldetail

Lieferstufen, der ganze Sendungsverlauf, Artikel, Adressen und Summen.

Rechnung

Eine vollständige Rechnung mit Netto, MwSt. und Brutto, gesetzt für Papier. Beim Drucken verschwindet alles andere.

Rücksendung

Artikel und Gründe wählen, Erstattung und Rückweg bestimmen, die Summe rechnet mit.

Abo

Nächste Lieferung, Rhythmus, Menge, Aussetzen und Pausieren, mit bisherigen Lieferungen.

Details

Was Bestellungen mitbringt, aus Registry und Quellcode gelesen.

Bereich
E-Commerce
Variants
5
Version
1.0.1 · seit 1.0.0
Datei
components/ui/order.tsx
Bringt mit
utilskitbuttoniconrevealproduct-image
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 104 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle OrderProps aus components/ui/order.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    OrderVariant

    order-historyorder-detailinvoicereturnssubscription

  • ordersoptional
    OrderRecord[]

    order-history

  • orderoptional
    OrderRecord

    order-detail and returns

  • invoiceoptional
    InvoiceData
  • subscriptionoptional
    SubscriptionData
  • returnReasonsoptional
    string[]

    returns

  • returnByoptional
    string
  • currencyoptional
    string

Eingebaute Texte

Diese Texte schreibt Bestellungen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 104 Texte anzeigen
ordersEnglisch OrdersDeutsch Bestellungen
ordersIntroEnglisch Track, return or buy again. Invoices are ready as soon as an order ships.Deutsch Verfolgen, zurückschicken oder nachbestellen. Rechnungen liegen bereit, sobald eine Bestellung verschickt ist.
allEnglisch AllDeutsch Alle
openEnglisch OpenDeutsch Offen
deliveredEnglisch DeliveredDeutsch Zugestellt
returnedEnglisch ReturnedDeutsch Retourniert
orderEnglisch OrderDeutsch Bestellung
placedEnglisch PlacedDeutsch Bestellt am
totalEnglisch TotalDeutsch Summe
statusEnglisch StatusDeutsch Status
processingEnglisch ProcessingDeutsch In Bearbeitung
shippedEnglisch On the wayDeutsch Unterwegs
cancelledEnglisch CancelledDeutsch Storniert
viewOrderEnglisch View orderDeutsch Bestellung ansehen
buyAgainEnglisch Buy againDeutsch Erneut kaufen
invoiceEnglisch InvoiceDeutsch Rechnung
moreEnglisch moreDeutsch weitere
noOrdersEnglisch No orders in this view.Deutsch In dieser Ansicht gibt es keine Bestellungen.
backToOrdersEnglisch All ordersDeutsch Alle Bestellungen
helpEnglisch Get helpDeutsch Hilfe erhalten
shipmentEnglisch ShipmentDeutsch Sendung
etaEnglisch ExpectedDeutsch Voraussichtlich
trackingNoEnglisch Tracking numberDeutsch Sendungsnummer
copyEnglisch Copy tracking numberDeutsch Sendungsnummer kopieren
copiedEnglisch CopiedDeutsch Kopiert
stagesEnglisch Ordered,Packed,On the way,DeliveredDeutsch Bestellt,Verpackt,Unterwegs,Zugestellt
historyEnglisch Tracking historyDeutsch Sendungsverlauf
itemsEnglisch ItemsDeutsch Artikel
deliveryAddressEnglisch Delivery addressDeutsch Lieferadresse
billingAddressEnglisch Billing addressDeutsch Rechnungsadresse
paymentEnglisch PaymentDeutsch Zahlung
summaryEnglisch SummaryDeutsch Übersicht
subtotalEnglisch SubtotalDeutsch Zwischensumme
shippingEnglisch ShippingDeutsch Versand
freeEnglisch FreeDeutsch Kostenlos
vatEnglisch VATDeutsch MwSt.
inclEnglisch incl.Deutsch inkl.
qtyEnglisch QtyDeutsch Menge
printEnglisch Print or save as PDFDeutsch Drucken oder als PDF sichern
printShortEnglisch PrintDeutsch Drucken
downloadEnglisch DownloadDeutsch Herunterladen
invoiceTitleEnglisch InvoiceDeutsch Rechnung
invoiceNoEnglisch Invoice no.Deutsch Rechnungsnr.
invoiceDateEnglisch Invoice dateDeutsch Rechnungsdatum
serviceDateEnglisch Delivery dateDeutsch Lieferdatum
orderNoEnglisch Order no.Deutsch Bestellnr.
customerNoEnglisch Customer no.Deutsch Kundennr.
billToEnglisch Bill toDeutsch Rechnung an
posEnglisch Pos.Deutsch Pos.
descriptionEnglisch DescriptionDeutsch Beschreibung
unitNetEnglisch Unit price netDeutsch Einzelpreis netto
amountNetEnglisch Amount netDeutsch Betrag netto
netTotalEnglisch Total netDeutsch Summe netto
grossTotalEnglisch TotalDeutsch Gesamtbetrag
vatIdEnglisch VAT IDDeutsch USt-IdNr.
bankEnglisch BankDeutsch Bank
contactEnglisch ContactDeutsch Kontakt
shippingLineEnglisch ShippingDeutsch Versand
returnsTitleEnglisch Return itemsDeutsch Artikel zurücksenden
returnsIntroEnglisch Pick what goes back. The label is free, the refund arrives within 5 days after we receive the parcel.Deutsch Wähle aus, was zurückgeht. Das Etikett ist kostenlos, das Geld ist innerhalb von 5 Tagen nach Eingang des Pakets zurück.
returnByEnglisch Return byDeutsch Rücksendung bis
reasonEnglisch ReasonDeutsch Grund
chooseReasonEnglisch Choose a reasonDeutsch Grund auswählen
refundToEnglisch Refund toDeutsch Erstattung auf
originalEnglisch Original paymentDeutsch Ursprüngliche Zahlart
originalNoteEnglisch Back to the card you paid withDeutsch Zurück auf die Karte, mit der du bezahlt hast
creditEnglisch Store creditDeutsch Guthaben
creditNoteEnglisch 10% extra, usable right awayDeutsch 10 % extra, sofort einlösbar
dropOffEnglisch How it goes backDeutsch So geht es zurück
shopEnglisch Parcel shopDeutsch Paketshop
shopNoteEnglisch Show a QR code, no printer neededDeutsch QR-Code vorzeigen, kein Drucker nötig
pickupEnglisch Pickup at your doorDeutsch Abholung an der Tür
pickupNoteEnglisch Tomorrow between 8 and 18Deutsch Morgen zwischen 8 und 18 Uhr
refundEnglisch Your refundDeutsch Deine Erstattung
bonusEnglisch Credit bonusDeutsch Guthaben-Bonus
labelEnglisch Return labelDeutsch Rücksendeetikett
requestEnglisch Request returnDeutsch Rücksendung anmelden
requestedEnglisch Return registered, label is on its wayDeutsch Angemeldet, das Etikett ist unterwegs
selectFirstEnglisch Pick at least one item to return.Deutsch Wähle mindestens einen Artikel für die Rücksendung.
itemsSelectedEnglisch items selectedDeutsch Artikel ausgewählt
itemSelectedEnglisch item selectedDeutsch Artikel ausgewählt
subTitleEnglisch SubscriptionDeutsch Abo
activeEnglisch ActiveDeutsch Aktiv
pausedEnglisch PausedDeutsch Pausiert
sinceEnglisch SinceDeutsch Seit
nextDeliveryEnglisch Next deliveryDeutsch Nächste Lieferung
everyEnglisch EveryDeutsch Alle
weeksEnglisch weeksDeutsch Wochen
perDeliveryEnglisch per deliveryDeutsch pro Lieferung
saveEnglisch You saveDeutsch Du sparst
deliverNowEnglisch Deliver nowDeutsch Jetzt liefern
skipEnglisch SkipDeutsch Aussetzen
skippedEnglisch SkippedDeutsch Ausgesetzt
unskipEnglisch Undo skipDeutsch Doch liefern
pauseEnglisch PauseDeutsch Pausieren
resumeEnglisch ResumeDeutsch Fortsetzen
upcomingEnglisch Upcoming deliveriesDeutsch Nächste Lieferungen
pastDeliveriesEnglisch Past deliveriesDeutsch Bisherige Lieferungen
manageEnglisch ManageDeutsch Verwalten
cancelEnglisch Cancel subscriptionDeutsch Abo kündigen
changeEnglisch ChangeDeutsch Ändern
frequencyEnglisch FrequencyDeutsch Rhythmus
quantityEnglisch Bags per deliveryDeutsch Tüten pro Lieferung
pausedNoteEnglisch No deliveries until you resume. Nothing is charged.Deutsch Bis zum Fortsetzen keine Lieferungen. Es wird nichts abgebucht.

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Bestellungen reagiert selbst auf die Tasten Pfeil links und Pfeil rechts.
  • Setzt aria-disabled, aria-label, aria-live und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen alert, radiogroup, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 8 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Bestellungen?

Mit aiw add @ai-website/order. Der Befehl legt die Datei components/ui/order.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal und product-image. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Bestellungen?

5 Varianten, Bestellübersicht, Bestelldetail, Rechnung, Rücksendung und Abo. Du wählst sie mit der Prop variant, zum Beispiel variant="order-detail".

Kann ich die Texte von Bestellungen übersetzen?

Ja. Bestellungen bringt 104 eigene Texte auf Deutsch und Englisch mit, etwa „Bestellungen“, „Verfolgen, zurückschicken oder nachbestellen. Rechnungen liegen bereit, sobald eine Bestellung verschickt ist.“ und „Alle“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Bestellungen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Bestellungen mit aiw_components und installieren sie mit aiw_add @ai-website/order. Nenn im Prompt die Variante, etwa variant="order-history", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus E-Commerce, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Bestellungen und Retouren stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert