跳到主要内容

cart

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

位置​

cart template 位于 theme 的 templates 目录下：

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

内容​

您应该在 template 的 section 中包含 cart 对象。

cart 对象​

您可以访问 Liquid cart 对象 来显示购物车的详细信息。

使用说明​

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

购物车 line item​

line_item 是购物车中的单条记录，记录了商品的哪个 variant 被加入购物车及对应数量。例如，如果客户将同一件 T 恤的 中号 和 大号 都加入购物车，则每件 T 恤各有一个 line item。

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

<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 动作执行结账。

<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。

<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 了解更多使用 JavaScript 修改购物车的方法。

更新 line item 数量​

您应该为客户提供更新购物车中 line item 数量的选项。可以使用 spz-quantity 组件 来修改数量。

<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 展示中都显示折扣信息。更多关于折扣及如何构建折扣展示的内容，请参考折扣。

支持购物车备注​

您可以为客户提供在订单中附加备注信息的选项，通过购物车备注实现。

购物车备注​

要获取购物车备注，需要在 spz-form 组件 内包含一个 HTML 输入框（通常为 <textarea>），并设置属性 name="note"。

<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 属性。您可以在购物车页面通过组件封装的 parsedProperties 对象，遍历每个属性来显示这些信息：

<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>