Seitlicher Warenkorb
Ein Panel, das von rechts hereingleitet, mit Produkten, Mengen, die die Summe aktualisieren, und Gratisversand-Balken.
Einstellungen
Code
<div class="uv-ocd"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 4.5h2l2.2 10.5h10.6l2.2-8H7"/><circle cx="9.5" cy="19" r="1.3"/><circle cx="17" cy="19" r="1.3"/></svg><b class="ct">3</b></button><div class="scr"></div><aside class="dr" role="dialog" aria-modal="true" aria-labelledby="uv-ocd-t"><header><b id="uv-ocd-t">Dein Warenkorb</b><button type="button" class="x" aria-label="Schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><div class="fs"><span class="ms"></span><i><b></b></i></div><ul><li data-p="89"><span class="im" style="--c:#f97316"></span><span class="tx"><b>Trailschuhe</b><small>89 €</small></span><span class="qt"><button type="button" class="mn" aria-label="Weniger">−</button><output>1</output><button type="button" class="pl" aria-label="Más">+</button></span></li><li data-p="12"><span class="im" style="--c:#3b82f6"></span><span class="tx"><b>Funktionssocken</b><small>12 €</small></span><span class="qt"><button type="button" class="mn" aria-label="Weniger">−</button><output>2</output><button type="button" class="pl" aria-label="Más">+</button></span></li></ul><footer><p><span>Subtotal</span><b class="sb">113,00 €</b></p><button type="button" class="go">Zur Kasse</button></footer></aside></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Overlays
Alle ansehen: OverlaysWofür du ihn nutzen kannst
Ein seitlicher Warenkorb hält die Leute auf der Produktseite, während sie ihre Bestellung prüfen. Dieses Panel gleitet von rechts herein mit einem Fortschrittsbalken bis zum Gratisversand, jedem Artikel mit Bild, Preis und Mengenwähler und einer Zwischensumme, die sofort neu rechnet. Ist die Schwelle erreicht, zeigt der Balken eine kleine Erfolgsmeldung.
Mengen springen beim Ändern kurz auf, Preise folgen der Seitensprache, und das Badge am Warenkorb-Button aktualisiert sich ebenfalls. Das Panel ist ein modaler Dialog, der mit X, Escape oder Hintergrund schließt.