Eigenständige Bausteine für HTML und PHP. Jedes Beispiel hat seinen vollständigen Quellcode direkt darunter. Farben, Hell/Dunkel, Dichte und Schrift folgen deiner Docs-Ansicht.
Interaktionen bleiben lokale Demos. Formulare senden keine Nachrichten; es gibt keine Zahlung oder Server-Synchronisation. Beim mehrfachen Einfügen IDs eindeutig vergeben und den jeweiligen Initialisierer einmal nach dem Markup aufrufen.
Bestellungen & Checkout
Bestellübersicht mit Details
Vier fiktive Bestellungen mit kombinierter Produkt-/Nummernsuche, Statusfilter, nativen Positionsdetails und zugänglichem Detaildialog inklusive Cent-genauer Summen.
Vier fiktive Bestellungen mit Positionen, Artikelpreisen und Status. Suchen Sie nach Nummer oder Produkt und kombinieren Sie die Suche mit einem Statusfilter.
Alle Nummern, Daten und Statusangaben sind feste Beispieldaten. Diese Ansicht greift auf kein Bestellsystem zu.
Beispielbestellung RT-1048
2 Positionen
151,90 €
inkl. 4,90 € Demo-Versand
Positionen aufklappen
1 × Tischleuchte Arc89,00 €
2 × Keramikbecher Forma58,00 €
In Bearbeitung
Beispielbestellung RT-1042
2 Positionen
64,90 €
inkl. 4,90 € Demo-Versand
Positionen aufklappen
2 × Notizbuch Studio36,00 €
1 × Canvas-Shopper24,00 €
Unterwegs
Beispielbestellung RT-1036
1 Position
49,90 €
inkl. 4,90 € Demo-Versand
Positionen aufklappen
1 × Eichenholz-Tablett45,00 €
Abgeschlossen
Beispielbestellung RT-1031
1 Position
43,90 €
inkl. 4,90 € Demo-Versand
Positionen aufklappen
1 × Vase Silhouette39,00 €
Storniert
Keine Beispielbestellungen gefunden. Bitte Suche oder Statusfilter anpassen.
Drei fiktive Bestellungen und drei manuell wählbare Statusvarianten. Semantische Timeline mit aktuellem Schritt, festen Beispiel-Zeitstempeln und ausdrücklich ohne Live-Tracking.
Wechseln Sie zwischen drei Beispielbestellungen und simulieren Sie deren Status. Die Timeline zeigt ausschließlich fest hinterlegte, fiktive Ereignisse.
Kein Live-Tracking, keine Paketdienst-Anbindung und keine Lieferprognose. Eine Statusauswahl verändert nur diese lokale Darstellung.
✓
Beispiel erfasst
21.10.2026 · 09:10 · fiktiver Zeitstempel
Im Beispiel abgeschlossen
2
Auswahl vorbereitet
21.10.2026 · 11:30 · fiktiver Zeitstempel
Aktueller Beispielschritt
3
Paket unterwegs
Noch kein Beispielereignis
Im Beispiel offen
4
Als zugestellt markiert
Noch kein Beispielereignis
Im Beispiel offen
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sendungsverfolgung mit Beispielstatus · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-orders.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bco-block" data-bco-tracking aria-labelledby="bco-tracking-title">
<header>
<p class="bco-eyebrow">SENDUNGSVERLAUF / FESTE BEISPIELDATEN</p>
<h2 class="bco-heading" id="bco-tracking-title">Ein Verlauf, der Klarheit schafft.</h2>
<p class="bco-intro">Wechseln Sie zwischen drei Beispielbestellungen und simulieren Sie deren Status. Die Timeline zeigt ausschließlich fest hinterlegte, fiktive Ereignisse.</p>
</header>
<p class="bco-note">Kein Live-Tracking, keine Paketdienst-Anbindung und keine Lieferprognose. Eine Statusauswahl verändert nur diese lokale Darstellung.</p>
<div class="bco-tracking-layout">
<aside class="bco-tracking-card">
<p class="bco-eyebrow">AUSGEWAEHLTES BEISPIEL</p>
<div class="bco-package" aria-hidden="true">
</div>
<h3 class="text-2xl font-semibold" data-bco-track-id>RT-1048</h3>
<div class="mt-4">
<label class="r-label" for="bco-track-order">Beispielbestellung</label>
<select class="r-input w-full" id="bco-track-order" data-bco-track-order>
<option value="RT-1048">RT-1048 · Leuchte & Keramik</option>
<option value="RT-1042">RT-1042 · Papier & Canvas</option>
<option value="RT-1036">RT-1036 · Eichenholz</option>
</select>
</div>
<div class="mt-4">
<label class="r-label" for="bco-track-state">Beispielstatus simulieren</label>
<select class="r-input w-full" id="bco-track-state" data-bco-track-state>
<option value="processing">In Bearbeitung</option>
<option value="shipped">Unterwegs</option>
<option value="delivered">Abgeschlossen</option>
</select>
</div>
<p class="bco-small mt-4">Beim Bestellwechsel wird deren ursprünglicher Beispielstatus wiederhergestellt. Es werden keine Daten gespeichert.</p>
</aside>
<div>
<ol class="bco-timeline" data-bco-timeline aria-label="Fiktiver Sendungsverlauf">
<li class="bco-timeline-step" data-state="done">
<span class="bco-timeline-mark" aria-hidden="true">✓</span>
<div>
<h3>Beispiel erfasst</h3>
<p>21.10.2026 · 09:10 · fiktiver Zeitstempel</p>
<span class="bco-step-state">Im Beispiel abgeschlossen</span>
</div>
</li>
<li class="bco-timeline-step" data-state="current" aria-current="step">
<span class="bco-timeline-mark" aria-hidden="true">2</span>
<div>
<h3>Auswahl vorbereitet</h3>
<p>21.10.2026 · 11:30 · fiktiver Zeitstempel</p>
<span class="bco-step-state">Aktueller Beispielschritt</span>
</div>
</li>
<li class="bco-timeline-step" data-state="pending">
<span class="bco-timeline-mark" aria-hidden="true">3</span>
<div>
<h3>Paket unterwegs</h3>
<p>Noch kein Beispielereignis</p>
<span class="bco-step-state">Im Beispiel offen</span>
</div>
</li>
<li class="bco-timeline-step" data-state="pending">
<span class="bco-timeline-mark" aria-hidden="true">4</span>
<div>
<h3>Als zugestellt markiert</h3>
<p>Noch kein Beispielereignis</p>
<span class="bco-step-state">Im Beispiel offen</span>
</div>
</li>
</ol>
<p class="bco-status" data-bco-status role="status" aria-atomic="true">
</p>
</div>
</div>
</section>
<script type="module">
import {initOrdersBlocks} from 'https://ui.rittek.de/assets/modules/blocks-orders.js';
const orders = initOrdersBlocks(document);
// orders.destroy(); // Listener entfernen, offene Dialoge schließen
</script>
</body>
</html>
Bestellungen & Checkout
Mehrstufiger Demo-Checkout
Fiktive Adresse mit nativer Pflichtfeldprüfung, drei Versandbeispiele mit Cent-Summen, pruefbare Zusammenfassung und Vor/Zurück-Navigation. Abschluss beendet nur die Demo; keine Bestellung oder Zahlung.
Eine dreistufige Oberfläche für Adresse, Versandbeispiel und abschließende Prüfung. Alle Aktionen finden nur in dieser geöffneten Seite statt.
Bitte ausschließlich fiktive Adressdaten verwenden. Keine Bestellung, keine Zahlung, keine Kartendaten und kein Versand. Eingaben werden weder übertragen noch gespeichert.
1. Beispieladresse
2. Versand
3. Prüfen
DEMO BEENDET
Die Beispielstrecke ist abgeschlossen.
Es wurde keine Bestellung angelegt. Es gab keine Zahlung und keinen Versand. Ihre fiktiven Eingaben befinden sich nur im Formular dieser Seite.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mehrstufiger Demo-Checkout · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-orders.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bco-block" data-bco-checkout aria-labelledby="bco-checkout-title">
<header>
<p class="bco-eyebrow">CHECKOUT-VORLAGE / INTERAKTIVE DEMO</p>
<h2 class="bco-heading" id="bco-checkout-title">Ein klarer Weg zur Übersicht.</h2>
<p class="bco-intro">Eine dreistufige Oberfläche für Adresse, Versandbeispiel und abschließende Prüfung. Alle Aktionen finden nur in dieser geöffneten Seite statt.</p>
</header>
<p class="bco-note">
<strong>Bitte ausschließlich fiktive Adressdaten verwenden.</strong> Keine Bestellung, keine Zahlung, keine Kartendaten und kein Versand. Eingaben werden weder übertragen noch gespeichert.</p>
<div class="bco-checkout-layout">
<div class="bco-checkout-panel">
<ol class="bco-progress" aria-label="Demo-Schritte">
<li data-bco-progress-step data-state="current" aria-current="step">1. Beispieladresse</li>
<li data-bco-progress-step data-state="pending">2. Versand</li>
<li data-bco-progress-step data-state="pending">3. Prüfen</li>
</ol>
<form autocomplete="off">
<fieldset data-bco-stage disabled>
<legend>Schritt 1 von 3</legend>
<h3 class="bco-field-heading" tabindex="-1">Fiktive Beispieladresse</h3>
<p class="bco-small mb-4">Alle Felder sind erforderlich. Die vorausgefüllten Daten sind frei erfunden.</p>
<div class="bco-fields">
<div>
<label class="r-label" for="bco-address-first">Fiktiver Vorname</label>
<input class="r-input" id="bco-address-first" name="bco-first" type="text" required maxlength="60" value="Alex" autocomplete="off">
</div>
<div>
<label class="r-label" for="bco-address-last">Fiktiver Nachname</label>
<input class="r-input" id="bco-address-last" name="bco-last" type="text" required maxlength="60" value="Beispiel" autocomplete="off">
</div>
<div class="bco-wide">
<label class="r-label" for="bco-address-street">Fiktive Straße und Hausnummer</label>
<input class="r-input" id="bco-address-street" name="bco-street" type="text" required maxlength="120" value="Musterstraße 1" autocomplete="off">
</div>
<div>
<label class="r-label" for="bco-address-zip">Fiktive Postleitzahl</label>
<input class="r-input" id="bco-address-zip" name="bco-zip" type="text" required inputmode="numeric" pattern="[0-9]{5}" maxlength="5" value="12345" title="Fünf Ziffern, zum Beispiel 12345" autocomplete="off">
</div>
<div>
<label class="r-label" for="bco-address-city">Fiktiver Ort</label>
<input class="r-input" id="bco-address-city" name="bco-city" type="text" required maxlength="80" value="Musterstadt" autocomplete="off">
</div>
<p class="bco-small bco-wide">Land für dieses Beispiel: Deutschland. Keine Adressprüfung und keine Standortabfrage.</p>
</div>
</fieldset>
<fieldset data-bco-stage hidden disabled>
<legend>Schritt 2 von 3</legend>
<h3 class="bco-field-heading" tabindex="-1">Versandbeispiel auswählen</h3>
<p class="bco-small">Diese Auswahl ändert nur die Beispielsumme. Es gibt keine Lieferzeit- oder Verfügbarkeitszusage.</p>
<label class="bco-shipping-choice" for="bco-shipping-standard">
<input type="radio" id="bco-shipping-standard" name="bco-shipping" value="standard" required checked>
<span>
<strong>Standard · Demo</strong>
<small>Feste Beispielpauschale</small>
</span>
<strong>4,90 €</strong>
</label>
<label class="bco-shipping-choice" for="bco-shipping-express">
<input type="radio" id="bco-shipping-express" name="bco-shipping" value="express">
<span>
<strong>Express · Demo</strong>
<small>Alternative Beispielpauschale</small>
</span>
<strong>9,90 €</strong>
</label>
<label class="bco-shipping-choice" for="bco-shipping-pickup">
<input type="radio" id="bco-shipping-pickup" name="bco-shipping" value="pickup">
<span>
<strong>Abholung · Demo</strong>
<small>Kein echter Abholort hinterlegt</small>
</span>
<strong>0,00 €</strong>
</label>
</fieldset>
<fieldset data-bco-stage hidden disabled>
<legend>Schritt 3 von 3</legend>
<h3 class="bco-field-heading" tabindex="-1">Beispielangaben prüfen</h3>
<h4 class="font-semibold mb-2">Fiktive Adresse</h4>
<address class="bco-review-address" data-bco-review-address>Alex Beispiel
Musterstraße 1
12345 Musterstadt
Deutschland</address>
<h4 class="font-semibold mb-2">Versandbeispiel</h4>
<p data-bco-review-shipping>Standard · Demo · 4,90 €</p>
<div class="bco-total">
<span>Demo-Gesamtsumme</span>
<span data-bco-review-total>151,90 €</span>
</div>
<p class="bco-note">Der nächste Button beendet nur die Vorschau. Er erstellt keine Bestellung, löst keine Zahlung aus und verschickt nichts.</p>
</fieldset>
<div class="bco-checkout-actions">
<button class="r-button" type="button" data-bco-back hidden>Zurück</button>
<button class="r-button r-button-primary" type="submit" data-bco-next disabled>Weiter</button>
</div>
</form>
<div class="bco-complete" data-bco-complete hidden>
<span class="r-badge">DEMO BEENDET</span>
<h3 class="mt-4" tabindex="-1">Die Beispielstrecke ist abgeschlossen.</h3>
<p>Es wurde keine Bestellung angelegt. Es gab keine Zahlung und keinen Versand. Ihre fiktiven Eingaben befinden sich nur im Formular dieser Seite.</p>
<button class="r-button" type="button" data-bco-restart>Beispiel neu starten</button>
</div>
<p class="bco-status" data-bco-status role="status" aria-atomic="true">
</p>
</div>
<aside class="bco-summary" aria-labelledby="bco-checkout-summary">
<p class="bco-eyebrow">DIE BEISPIELAUSWAHL</p>
<h3 class="text-xl font-semibold mt-2" id="bco-checkout-summary">Zwei Positionen. Klar gerechnet.</h3>
<ul>
<li class="bco-detail-line">
<span>1 × Tischleuchte Arc</span>
<strong>89,00 €</strong>
</li>
<li class="bco-detail-line">
<span>2 × Keramikbecher Forma</span>
<strong>58,00 €</strong>
</li>
<li class="bco-detail-line">
<span>Artikelsumme</span>
<strong>147,00 €</strong>
</li>
<li class="bco-detail-line">
<span>Demo-Versand</span>
<strong data-bco-summary-shipping>4,90 €</strong>
</li>
</ul>
<div class="bco-total">
<span>Beispielsumme</span>
<span data-bco-summary-total>151,90 €</span>
</div>
<p class="bco-small">Rechnung in ganzen Centbetraegen. Keine Steuerermittlung, keine Rabatte und keine Zahlungsabwicklung. Diese Vorlage hat keine Verbindung zu einem echten Warenkorb.</p>
</aside>
</div>
<noscript>
<p class="bco-note">Die mehrstufige Demo benötigt JavaScript. Bitte keine echten Daten eingeben.</p>
</noscript>
</section>
<script type="module">
import {initOrdersBlocks} from 'https://ui.rittek.de/assets/modules/blocks-orders.js';
const orders = initOrdersBlocks(document);
// orders.destroy(); // Listener entfernen, offene Dialoge schließen
</script>
</body>
</html>