跳到內容
調色盤星雲光譜
選擇版面配色

即時套用,保留目前的亮暗模式。

CartSummary (am-cart-summary)

CartSummary 提供商品列、attributes、數量文字、移除連結、totals 與 checkout CTA 的頁面骨架,適合搭配 storefront 或 checkout flow 使用。

  • itemstotal 是必要欄位
  • item 可帶 imagehrefattributesquantityremoveHref
  • checkoutActioncontinueAction 與 empty state action 都是一般 link CTA
  • 空購物車會顯示 emptyTitleemptyDescription 與 optional emptyAction
<CartSummary
items={[
{
title: "Trail mug",
price: "NT$680",
quantity: 2,
attributes: [{ label: "Color", value: "Stone" }],
},
]}
subtotal="NT$1,360"
shipping="Free"
total="NT$1,360"
checkoutAction={{ label: "Continue to checkout", href: "/checkout" }}
/>

這是 display/layout pattern,不處理購物車 state、庫存、價格重算、折扣、付款或 checkout authorization。詳見 playground /playground/marketing/