HTML + CSSOverlays

Seitlicher Warenkorb

Ein Panel, das von rechts hereingleitet, mit Produkten, Mengen, die die Summe aktualisieren, und Gratisversand-Balken.

Einstellungen

16px
1x

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: Overlays

Wofü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.