Cart drawer (mini cart)
A panel that slides in over the page showing your basket, so adding to cart never yanks you off the product you were browsing.
See it
What it is
A panel that slides in over the current page (usually from the right) showing what is in the basket, so adding an item does not fling the shopper off the product they were reading. It replaces the old pattern of redirecting to a full /cart page on every add, which reliably killed browsing momentum.
The usual anatomy: line items with thumbnail, variant, quantity stepper, and remove control, then a subtotal, a free-shipping progress bar, a primary checkout button, and often a small row of cross-sells. Keep the checkout button pinned to the bottom of the panel so it survives a long list of items.
Gotcha: it is a modal dialog, so it inherits every modal obligation. Trap focus inside it, close on Escape and on overlay click, return focus to the add-to-cart button that opened it, and announce the added item through a live region for screen reader users. Also keep the full cart page alive: people bookmark it, and some assistive and low bandwidth setups never see the drawer at all.
Ask AI for it
Build a cart drawer that slides in from the right over a dimmed overlay, 400px wide on desktop and full width on mobile, with a 250ms ease-out transform transition. Contents: a header with 'Your cart' and a close button, a scrollable list of line items (thumbnail, title, variant, quantity stepper, remove), and a pinned footer with a free-shipping progress bar, subtotal, and a full-width 'Checkout' button plus a quiet 'View cart' link. Implement it as an accessible dialog: focus trap, Escape to close, aria-modal, focus returned to the triggering button, page scroll locked while open, and a polite live region announcing 'Added to cart'. Honour prefers-reduced-motion by fading instead of sliding.