Cart List Item

Overview

CartListItem is the line-item row used inside CartSheet and any cart detail view. It renders the product image, brand, title, optional subtitle, a QuantityPicker, the line price (with optional strikethrough and unit price), and applied discount or voucher badges.

Props are flat rather than wrapped in a line object: itemId, image, title, price, plus optional brand, brandHref, subtitle, strikethroughPrice, unitPrice, quantity, quantityLoading, quantityPicker, discount, voucher, flags, and href. The component emits itemQuantityChange with the new quantity number when the picker changes, and itemDelete when the row's delete control fires.

Auto-import tag: <LCartListItem>.

Key Business & UX Benefits

• Inline quantity picker lets shoppers adjust orders in place, reducing the drop-off that comes from cart edits feeling slow.
• Strikethrough and unit-price slots help shoppers confirm exactly what they're paying for, lowering returns from misread prices.
• Single row component slots into mini-cart sheets, dedicated cart pages, and order summaries, so cart UI stays consistent everywhere shoppers see it.
• Inline discount and voucher badges show applied promotions on the line itself, keeping the savings story attached to the product.

Usage

<CartListItem
  v-for="line in cart.items"
  :key="line.itemId"
  :item-id="line.itemId"
  :image="line.image"
  :title="line.title"
  :price="line.price"
  :quantity="line.quantity"
  :quantity-loading="loading[line.itemId]"
  @item-quantity-change="updateQty(line.itemId, $event)"
  @item-delete="remove(line.itemId)"
/>

Feature List

API Reference