Cart
Cart Sheet
Off-canvas mini-cart sheet that composes line items, summary, free-delivery progress, and the coupon accordion.
Loading playground
Overview
CartSheet is the off-canvas mini-cart shown when a shopper opens the cart from the header or after an add-to-cart action. It composes CartListItems, a CartSummaryBox, a FreeDeliveryProgress indicator, and the CartCouponCodeAccordion. When the cart is empty, the sheet renders EmptyStateCart instead of the line-item list.
Auto-import tag: <LCartSheet>.
Key Business & UX Benefits
- Off-canvas cart keeps shoppers on the page they were browsing, lifting conversion compared to a full cart-page redirect after every add-to-cart.
- Bundles free-delivery progress, coupon entry, and totals in one sheet so shoppers see every lever for raising basket value before they check out.
- Automatic empty-state swap with a shop-now CTA recovers traffic that would otherwise hit a dead-end cart and bounce.
- Single mini-cart contract covers desktop and mobile, removing the need for separate cart UIs and the QA cost that comes with them.
Feature List
- Off-canvas sheet driven by v-model:open so the same header button opens it from any page
- Auto-swaps to EmptyStateCart when the cart-content has no line items, no extra v-if needed
- Bundles CartListItem rows, FreeDeliveryProgress, CartSummaryBox, and CartCouponCodeAccordion in one cart-content shape
- paymentLogos slot renders the accepted payment methods at the bottom so trust signals stay visible at checkout entry
- Single event surface (item-delete, item-quantity-change, apply-coupon-code, remove-discount) keeps cart logic in your store
- One contract drives both desktop and mobile mini-cart, removing the need for separate sheet templates
API Reference
| Prop | Default | Type |
|---|---|---|
openrequired | boolean | |
cartContent | {
freeDeliveryProgress: {
totalPrice: {
amount: 0,
currency: "EUR"
},
maxPrice: {
amount: 0,
currency: "EUR"
}
},
cartListItems: [],
summaryBox: {
subtotalPrice: {
amount: 0,
currency: "EUR"
},
totalPrice: {
amount: 0,
currency: "EUR"
}
},
paymentLogos: []
} | CartContent { freeDeliveryProgress, cartListItems, summaryBox, 1 more } |
emptyState | {} | EmptyStateCartProps { heading, icon, isLoggedIn, 2 more } |
position | right | "left" | "right" | "top" | "bottom" |
| Event | Type |
|---|---|
update:open | (event: "update:open", value: boolean): void |
applyCouponCode | (event: "applyCouponCode", code: string): void |
itemQuantityChange | (event: "itemQuantityChange", itemId: string, quantity: number): void |
itemDelete | (event: "itemDelete", itemId: string): void |
removeDiscount | (event: "removeDiscount"): void |