Cart Drawer
Your bag2
- Air Max 90Qty 1$129
- Field JacketQty 1$240
Subtotal$369
Mini cart panel with a count badge header, two item rows showing photo, name, quantity, and price, and a tone Checkout CTA next to the subtotal.
The import and the props worth knowing about, in one place.
import { Commerce12 } from "@/components/beste/piece/commerce12";
<Commerce12
items={[
{
"image": "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=128&auto=format&fit=crop",
"name": "Air Max 90",
"qty": 1,
"price": "$129"
},
{
"image": "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=128&auto=format&fit=crop",
"name": "Field Jacket",
"qty": 1,
"price": "$240"
}
]}
subtotal="$369"
tone="foreground"
/>
Mini cart-line card with product photo, name, variant, price, a minus/plus quantity stepper, and a tone-filled Add to cart button.
Dashed-border receipt with the store name and order id, three monospaced quantity-name-price rows, a subtotal, and a bold final total with payment method.
Product row whose Add button presses itself, sends a dot arcing up to the cart icon, and bumps the badge count on every landing before the cart empties again.
Frequently-bought-together row with product thumbnails joined by plus icons, a bundle total with a Save emerald chip, and a tone Add-items CTA.
