# cart

> Shoplazza 主题的 cart template 渲染 /cart 页面，逐行展示客户购物车中的商品，本页讲文件位置与应引用的对象。

`cart` template 渲染 `/cart` 页面，提供客户购物车内容的概览。概览通常以表格形式展示，每个 line item 占一行。

![](https://cnres.appracle.com/8ffdbcf5d5cb6b05601d4fd50391fd8c.png)

## 位置

`cart` template 位于 theme 的 `templates` 目录下：

**目录**

```text
└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── cart.liquid
    |   ...
    ...
```

## 内容

您应该在 template 的 section 中包含 [cart 对象](/zh-CN/docs/theme/architecture/templates/cart#cart-%E5%AF%B9%E8%B1%A1)。

### cart 对象

您可以访问 Liquid [cart 对象](/zh-CN/docs/theme/architecture/templates/cart) 来显示购物车的详细信息。

## 使用说明

使用 `cart` template 时，您应该熟悉以下内容：

*   [使用购物车 line item](/zh-CN/docs/theme/architecture/templates/cart#%E8%B4%AD%E7%89%A9%E8%BD%A6-line-item)
*   [允许客户从购物车前往结账](/zh-CN/docs/theme/architecture/templates/cart#%E5%89%8D%E5%BE%80%E7%BB%93%E8%B4%A6)
*   [提供从购物车删除 line item 的选项](/zh-CN/docs/theme/architecture/templates/cart#%E4%BB%8E%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%88%A0%E9%99%A4-line-item)
*   [更新 line item 数量](/zh-CN/docs/theme/architecture/templates/cart#%E6%9B%B4%E6%96%B0-line-item-%E6%95%B0%E9%87%8F)
*   [显示折扣](/zh-CN/docs/theme/architecture/templates/cart#%E6%98%BE%E7%A4%BA%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%92%8C-line-item-%E6%8A%98%E6%89%A3)
*   [使用购物车备注](/zh-CN/docs/theme/architecture/templates/cart#%E6%94%AF%E6%8C%81%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%A4%87%E6%B3%A8)
*   [在购物车中显示 line item 属性](/zh-CN/docs/theme/architecture/templates/cart#%E6%98%BE%E7%A4%BA-line-item-%E5%B1%9E%E6%80%A7)

### 购物车 line item

[line_item](/zh-CN/docs/theme/references/liquid/objects/line_item) 是购物车中的单条记录，记录了商品的哪个 variant 被加入购物车及对应数量。例如，如果客户将同一件 T 恤的 `中号` 和 `大号` 都加入购物车，则每件 T 恤各有一个 line item。

`cart` template 应包含一个表格，每个 line item 占一行：

*   The [spz-cart](https://lessjs.shoplazza.com/latest/components/spz-cart/) component

**示例**

```liquid
<spz-cart layout="container">
  <template>
    <div>
      <div spz-for="line_item of data.line_items">
        {%- comment -%} line item 信息 {%- endcomment -%}
      </div>
    </div>
  </template>
</spz-cart>
```

### 前往结账

要允许客户从购物车前往结账，您需要在任意位置添加一个按钮，点击该按钮时调用购物车的 `checkout` 动作执行结账。

**示例**

```liquid
<spz-cart id="cart" layout="container">
  <template>
    <div>
      <button type="button" @tap="cart.checkout;">Checkout</button>
    </div>
  </template>
</spz-cart>
```

### 从购物车删除 line item

您应该为客户提供从购物车中删除 line item 的选项。您需要添加一个按钮，点击时调用购物车的 `delete` 动作来删除对应 line item。

**示例**

```liquid
<spz-cart id="cart" layout="container">
  <template>
    <div>
      <div spz-for="line_item of data.line_items">
        {%- comment -%} line item 信息 {%- endcomment -%}

        <button type="button"  @tap="cart.delete(id=${line_item.id})">Remove</button>
      </div>
    </div>
  </template>
</spz-cart>
```

**提示**

请参考 [Cart API](/zh-CN/docs/theme/references/ajax-api/cart) 了解更多使用 JavaScript 修改购物车的方法。

### 更新 line item 数量

您应该为客户提供更新购物车中 line item 数量的选项。可以使用 [spz-quantity 组件](https://lessjs.shoplazza.com/latest/components/spz-quantity/) 来修改数量。

**示例**

```liquid
<spz-cart id="cart" layout="container">
  <template>
    <div>
      <div spz-for="line_item of data.line_items">
        {%- comment -%} line item 信息 {%- endcomment -%}

        <spz-quantity
          value="${line_item.quantity}"
          min="1"
          max="${line_item.available_quantity}"
          layout="flex-item"
          height="40"
          @quantityChange="cart.update(id=${line_item.id}, value=event.value);"
        ></spz-quantity>
      </div>
    </div>
  </template>
</spz-cart>
```

### 显示购物车和 line item 折扣

由于折扣可以适用于整个购物车或单个 line item，您应该在购物车总计摘要和各 line item 展示中都显示折扣信息。更多关于折扣及如何构建折扣展示的内容，请参考[折扣](/zh-CN/docs/theme/theme-features/pricing-and-payments/discounts)。

### 支持购物车备注

您可以为客户提供在订单中附加备注信息的选项，通过购物车[备注](/zh-CN/docs/theme/architecture/templates/cart#%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%A4%87%E6%B3%A8)实现。

#### 购物车备注

要获取购物车备注，需要在 [spz-form 组件](https://lessjs.shoplazza.com/latest/components/spz-form/) 内包含一个 HTML 输入框（通常为 `<textarea>`），并设置属性 `name="note"`。

**示例**

```liquid
<form id="cart-note-form" action-xhr="{{ '/api/cart/note' | add_root_url }}" method="POST">
  <textarea
    name="note"
    @input-debounced="cart-note-form.insert(name='note', value=event.value)"
    @change="cart-note-form.submit;"
  ></textarea>
</form>
```

### 显示 line item 属性

商品加入购物车时可以附带 [line item 属性](/zh-CN/docs/theme/references/liquid/objects/line_item)。您可以在购物车页面通过组件封装的 `parsedProperties` 对象，遍历每个属性来显示这些信息：

**示例**

```liquid
<spz-cart id="cart" layout="container">
  <template>
    <div>
      <div spz-for="line_item of data.line_items">
        {%- comment -%} line item 信息 {%- endcomment -%}

        <div spz-for="properties in line_item.parsedProperties">
          ${properties.name} / ${properties.isImage ? `<a href="${propertie.value}" target="_blank" >View image</a>` : properties.value}
        </div>
      </div>
    </div>
  </template>
</spz-cart>
```