spz-cart 购物车

支持布局: container

何时使用

需要展示购物车数据，一般用在购物车页面或者购物车侧边弹窗。

代码演示

基本用法

<spz-cart id="cart" layout="container" summary-id="#cart-summary-render" empty-item="cart.line_items" @cartIncrease="..." @cartDecrease="...">
  <template>
    <div>
      <!-- 购物车商品 ... -->
    </div>
  </template>
</spz-cart>

<!-- 购物车结账内容 -->
<spz-render id="cart-summary-render" layout="container" manual>
  <template>
    <!-- ... -->
    <button type="button" @tap="cart.checkout;">
      Checkout
    </button>
  </template>
</spz-render>

勾选用法

使用带有 role=checkbox 属性的input元素来作为每一项前面的勾选框。
使用带有 role=checkAll 属性的input元素来作为全选勾选框。
勾选框元素上需要用data-id属性使其与购物车中对应数据关联，值为接口数据line_items中每一项的id（勾选框必须，全选框不需要）。

<spz-cart
  id="cart-content"
  layout="container"
  mode="selectable"
  default-checked
  >
    <template>
      <div>
        <!-- 全选勾选框 -->
         <div>
          <input type="checkbox" role="checkAll" checked id="cart-check-all">
          <label for="cart-check-all">Select All</label>
        </div>
        <!-- 购物车中商品 -->
        <ul>
          <li>
            <div>
              <!-- 每一项信息前的勾选框 -->
              <input type="checkbox" role="checkbox" data-id="xxx">
              <div class="cart-item__product">
                <!-- 商品信息 -->
               </div>
            </div>
          </li>
        </ul>
    </template>
  </spz-cart>

属性

属性名	说明	类型	默认值	是否必需
summary-id	指定结账内容元素的`id`，支持响应式。当配置的元素是 `spz-render` 时，购物车变更时会自动重新渲染该元素。形式如 `#cart-summary-render`	string	-	否
note-id	指定购物车留言元素的`id`，支持响应式，该元素必须可以通过 `value` 属性来获取留言内容，例如：`textarea`, `input` 等元素。形式如 `#cart-note`	string	-	否
empty-items	获取购物车数据的路径	string	`cart.line_items`	否
mode	指定购物车的选择模式，可选值`selectable` \| `general`, 值为`selectable`时支持勾选	string	`general`	否
default-checked	当`mode=selectable`时，如有此属性则默认全选购物车中的每一项	-	-	否

方法

render

渲染购物车内容，不需要参数。

update

更新某个购物车商品。

参数	说明	类型	默认值	是否必须
id	商品数据的 `id` 属性	string	-	是
value	商品的要更新的数量	string	-	是

delete

删除某个购物车商品。

参数	说明	类型	默认值	是否必须
id	商品数据的 `id` 属性	string	-	是

checkout

购物车商品结账到订单，不需要参数。

事件

event 对象数据

属性	说明	类型
cart	当前触发事件后购物车内的数据	object

mounted

当购物车首次渲染完成的时候自动触发该事件。

cartEmpty

当购物车为空时自动触发该事件。

cartItemExists

当购物车不为空时自动触发该事件

cartChange

当删除，减少/增加购物车里的商品时自动触发该事件。

cartDelete

当删除购物车里的商品时自动触发该事件。

cartIncrease

当增加购物车里的商品数量时自动触发该事件。

cartDecrease

当减少购物车里的商品数量时自动触发该事件。

AI 摘要（LLM Ready）

组件标识：spz-cart
用途一句话：实现购物车。
可识别属性条目：5
可识别方法小节：4
可识别事件小节：8
关键属性名（Top）：summary-id、note-id、empty-items、mode、default-checked
关键方法名（Top）：render、update、delete、checkout
关键事件名（Top）：mounted、cartEmpty、cartItemExists、cartChange、cartDelete
阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
关联文档：/guide/actions-and-events/ 、/guide/layouts/

spz-cart 购物车#

#何时使用

#代码演示

#基本用法

#勾选用法

#属性

#方法

#render

#update

#delete

#checkout

#事件

#event 对象数据