Panier latéral
Un panneau qui arrive par la droite avec les produits, des quantités qui recalculent le total et une barre vers la livraison offerte.
Réglages
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">Votre panier</b><button type="button" class="x" aria-label="Fermer"><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>Chaussures de trail</b><small>89 €</small></span><span class="qt"><button type="button" class="mn" aria-label="Moins">−</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>Chaussettes techniques</b><small>12 €</small></span><span class="qt"><button type="button" class="mn" aria-label="Moins">−</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">Payer</button></footer></aside></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Un panier latéral garde l'utilisateur sur la fiche produit pendant qu'il vérifie sa commande. Ce panneau glisse depuis la droite avec une barre de progression vers la livraison offerte, chaque article avec vignette, prix et sélecteur de quantité, et un sous-total recalculé instantanément. Une fois le seuil franchi, la barre affiche un petit message de victoire.
Les quantités rebondissent quand elles changent, les prix suivent la langue de la page et le badge du bouton panier se met à jour. C'est une boîte modale qui se ferme avec la croix, Échap ou le fond.