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.
Commerce
Produktkollektion mit Suche
Sechs gestaltete Produktkarten mit kombinierter Namenssuche und Kategorieauswahl, echtem Leerzustand und nativen Material-Details. Keine externen Bilder.
Die Tischleuchte Arc verbindet eine klare Silhouette mit warmen Materialien. Drei Farbvarianten, eine ruhige Form.
89,00 €
Lokales Produktbeispiel. Kein Verkauf, keine Versandzusage.
Noch keine Demo-Auswahl bestätigt.
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>Produktdetail als Quick View · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-commerce.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bc-block" data-bc-quickview aria-labelledby="bc-quick-title">
<div class="bc-feature">
<div class="bc-visual" aria-hidden="true">
<span class="bc-object bc-lamp">
</span>
</div>
<div class="bc-feature-copy">
<p class="bc-eyebrow">IM FOKUS / ARC COLLECTION</p>
<h2 class="bc-heading" id="bc-quick-title">Ein heller Gedanke.</h2>
<p class="bc-intro">Die Tischleuchte Arc verbindet eine klare Silhouette mit warmen Materialien. Drei Farbvarianten, eine ruhige Form.</p>
<p class="text-2xl font-semibold">89,00 €</p>
<p class="text-sm text-muted">Lokales Produktbeispiel. Kein Verkauf, keine Versandzusage.</p>
<button type="button" class="r-button r-button-primary" data-bc-open aria-haspopup="dialog" aria-controls="bc-product-dialog">Produkt ansehen</button>
</div>
</div>
<dialog class="bc-dialog" id="bc-product-dialog" aria-labelledby="bc-dialog-title" aria-describedby="bc-dialog-description">
<div class="bc-dialog-inner">
<div class="bc-dialog-head">
<div>
<p class="bc-eyebrow">PRODUKTDETAIL</p>
<h3 class="text-2xl font-semibold" id="bc-dialog-title">Tischleuchte Arc</h3>
</div>
<button class="r-button" type="button" data-bc-close aria-label="Produktansicht schließen" autofocus>Schließen</button>
</div>
<div class="bc-dialog-grid">
<div class="bc-visual" aria-hidden="true">
<span class="bc-object bc-lamp">
</span>
</div>
<form>
<p class="text-muted" id="bc-dialog-description">Mattes Metall, Messingdetails und ein weicher Lichtkegel. Abmessungen: 32 × 22 cm. Alle Varianten kosten in dieser Demo 89,00 €.</p>
<label class="r-label" for="bc-product-variant">Farbvariante</label>
<select class="r-input" id="bc-product-variant" data-bc-variant>
<option value="forest">Waldgrün</option>
<option value="sand">Sand</option>
<option value="graphite">Graphit</option>
</select>
<label class="r-label" for="bc-product-quantity">Menge (1 bis 99)</label>
<input class="r-input" type="number" id="bc-product-quantity" min="1" max="99" step="1" value="1" required data-bc-quantity>
<p class="bc-status" data-bc-selection role="status" aria-atomic="true">
</p>
<button class="r-button r-button-primary" type="submit">Demo-Auswahl bestätigen</button>
<p class="text-sm text-muted mt-3">Bestätigt nur die lokale Auswahl. Kein Warenkorbzugriff, keine Bestellung, keine Datenübertragung. Escape schließt die Ansicht ohne Bestaetigung.</p>
</form>
</div>
</div>
</dialog>
<p class="bc-status" data-bc-status role="status" aria-atomic="true">Noch keine Demo-Auswahl bestätigt.</p>
</section>
<script type="module">
import {initCommerceBlocks} from 'https://ui.rittek.de/assets/modules/blocks-commerce.js';
const commerce = initCommerceBlocks(document);
// commerce.destroy(); // Listener entfernen und offene Dialoge schließen
</script>
</body>
</html>
Commerce
Lokaler Warenkorb mit Mengenänderung
Drei Beispielpositionen, direkte Mengenfelder, Plus/Minus, Entfernen und Cent-genaue Artikelsumme. Mit Mengenvalidierung, leerem Zustand und Fokusführung beim Entfernen; bewusst ohne Kasse.
Ändern Sie Mengen oder entfernen Sie Positionen. Die Summen werden in ganzen Centbetraegen berechnet. Beim Neuladen startet dieses Beispiel neu.
Tischleuchte Arc
Waldgrün · 89,00 € je Stück
89,00 €
Keramikbecher Forma
Sand / 320 ml · 29,00 € je Stück
58,00 €
Notizbuch Studio
Terrakotta / A5 · 18,00 € je Stück
18,00 €
Ihre Demo-Auswahl ist leer. Laden Sie die Seite neu, um die Beispielpositionen wiederherzustellen.
Die Mengen können Sie direkt eingeben oder mit Plus und Minus ändern.
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>Lokaler Warenkorb mit Mengenänderung · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-commerce.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bc-block" data-bc-cart aria-labelledby="bc-cart-title">
<header>
<p class="bc-eyebrow">MEINE AUSWAHL / LOKALE DEMO</p>
<h2 class="bc-heading" id="bc-cart-title">Raum für Ihre Favoriten.</h2>
<p class="bc-intro">Ändern Sie Mengen oder entfernen Sie Positionen. Die Summen werden in ganzen Centbetraegen berechnet. Beim Neuladen startet dieses Beispiel neu.</p>
</header>
<div class="bc-cart-layout">
<div>
<ul class="bc-cart-list" data-bc-cart-list>
<li class="bc-cart-row" data-bc-cart-row data-bc-cents="8900">
<div class="bc-visual" aria-hidden="true">
<span class="bc-object bc-lamp">
</span>
</div>
<div>
<h3>Tischleuchte Arc</h3>
<p>Waldgrün · 89,00 € je Stück</p>
<label class="sr-only" for="bc-cart-qty-1">Menge für Tischleuchte Arc</label>
<div class="bc-quantity">
<button class="r-button" type="button" data-bc-delta="-1" aria-label="Menge für Tischleuchte Arc verringern">−</button>
<input class="r-input" id="bc-cart-qty-1" type="number" min="1" max="99" step="1" required value="1">
<button class="r-button" type="button" data-bc-delta="1" aria-label="Menge für Tischleuchte Arc erhöhen">+</button>
</div>
<button class="r-button r-button-sm" type="button" data-bc-remove aria-label="Tischleuchte Arc aus der Demo-Auswahl entfernen">Entfernen</button>
</div>
<strong data-bc-row-total>89,00 €</strong>
</li>
<li class="bc-cart-row" data-bc-cart-row data-bc-cents="2900">
<div class="bc-visual" aria-hidden="true">
<span class="bc-object bc-mug">
</span>
</div>
<div>
<h3>Keramikbecher Forma</h3>
<p>Sand / 320 ml · 29,00 € je Stück</p>
<label class="sr-only" for="bc-cart-qty-2">Menge für Keramikbecher Forma</label>
<div class="bc-quantity">
<button class="r-button" type="button" data-bc-delta="-1" aria-label="Menge für Keramikbecher Forma verringern">−</button>
<input class="r-input" id="bc-cart-qty-2" type="number" min="1" max="99" step="1" required value="2">
<button class="r-button" type="button" data-bc-delta="1" aria-label="Menge für Keramikbecher Forma erhöhen">+</button>
</div>
<button class="r-button r-button-sm" type="button" data-bc-remove aria-label="Keramikbecher Forma aus der Demo-Auswahl entfernen">Entfernen</button>
</div>
<strong data-bc-row-total>58,00 €</strong>
</li>
<li class="bc-cart-row" data-bc-cart-row data-bc-cents="1800">
<div class="bc-visual" aria-hidden="true">
<span class="bc-object bc-book">
</span>
</div>
<div>
<h3>Notizbuch Studio</h3>
<p>Terrakotta / A5 · 18,00 € je Stück</p>
<label class="sr-only" for="bc-cart-qty-3">Menge für Notizbuch Studio</label>
<div class="bc-quantity">
<button class="r-button" type="button" data-bc-delta="-1" aria-label="Menge für Notizbuch Studio verringern">−</button>
<input class="r-input" id="bc-cart-qty-3" type="number" min="1" max="99" step="1" required value="1">
<button class="r-button" type="button" data-bc-delta="1" aria-label="Menge für Notizbuch Studio erhöhen">+</button>
</div>
<button class="r-button r-button-sm" type="button" data-bc-remove aria-label="Notizbuch Studio aus der Demo-Auswahl entfernen">Entfernen</button>
</div>
<strong data-bc-row-total>18,00 €</strong>
</li>
</ul>
<p class="bc-empty" data-bc-empty tabindex="-1" hidden>Ihre Demo-Auswahl ist leer. Laden Sie die Seite neu, um die Beispielpositionen wiederherzustellen.</p>
<p class="bc-status" data-bc-status role="status" aria-atomic="true">Die Mengen können Sie direkt eingeben oder mit Plus und Minus ändern.</p>
</div>
<aside class="bc-cart-summary" aria-labelledby="bc-cart-summary-title">
<h3 class="text-xl font-semibold" id="bc-cart-summary-title">Ihre Übersicht</h3>
<p class="mt-3">Drei Beispielprodukte. Mengen von 1 bis 99 je Position.</p>
<div class="bc-total">
<span>Artikelsumme</span>
<span data-bc-total>165,00 €</span>
</div>
<p>Nur Artikelpreise. Versand, Steuern und Zahlungsabwicklung werden nicht berechnet. Es gibt keine Kasse und keine Bestellung.</p>
<p class="mt-4">Diese lokale Auswahl ist unabhängig von den anderen Shop-Blöcken und wird weder gespeichert noch versendet.</p>
</aside>
</div>
</section>
<script type="module">
import {initCommerceBlocks} from 'https://ui.rittek.de/assets/modules/blocks-commerce.js';
const commerce = initCommerceBlocks(document);
// commerce.destroy(); // Listener entfernen und offene Dialoge schließen
</script>
</body>
</html>
Commerce
Bewertungsübersicht mit Sternefilter
Vier ausdrücklich fiktive Bewertungen, nachvollziehbarer Gesamtdurchschnitt und Verteilung sowie exakter Sternefilter mit Leerzustand. Keine erfundenen Verifikationsabzeichen.