---
# System prepended metadata

title: 購物車 UI components Design Doc

---

# 購物車 UI components Design Doc

## CartItem
location: /ui/Cart/CartItem/index.tsx

#### Interface
```typescript
type CartItemProps = {
    imageUrl: string
    title: string
    spec: string | null
    value: string
    campaigns: Campaign[]
}
```

#### Render
```jsx
<>
  <Layout>
    <Base.ItemImageThumbnail url="" />
    <Base.Title h="3"></Title>
    <Base.Spec>US10.5</Spec>
    <Base.Price value="3430"></Price>
  </Layout>

  <Layout>
    // loop Campaign
    <New.CartItemCampaign campaign={campaigns} />

    <Base.Quantity value="1" />
    <Base.IconButton type="whislist" />
    <Base.IconButton type="trash" />
  </Layout>
</>
```

#### Events 觸發事件

```typescript
type onQuantityAdd = () => void
type onQuantityMinus = () => void
type onRemove = () => void
```

## CartItemCampaign
location: /ui/Cart/CartItemCampaign/index.tsx

```typescript
type CartItemCampaignProps = {
    // ...
}
```

#### Render
```jsx
// ...
```

#### Events 觸發事件
- onCampaignActionClick 結帳

```typescript
type onCampaignActionClick = () => void

