购物车对象详解

购物车对象详解

购物车对象包含了用户当前购物车中的所有商品信息、价格计算、运费、税费等。掌握购物车对象是构建完整电商体验的关键。

购物车基本信息

购物车状态

<!-- 购物车基本信息 -->
<div class="cart-summary" data-cart-count="{{ cart.item_count }}">
  {% if cart.item_count > 0 %}
    <h2>购物车 ({{ cart.item_count }} 件商品)</h2>
 
    <div class="cart-meta">
      <p><strong>商品数量:</strong> {{ cart.item_count }}</p>
      <p><strong>商品小计:</strong> {{ cart.items_subtotal_price | money }}</p>
      <p><strong>总价:</strong> {{ cart.total_price | money }}</p>
 
      {% if cart.total_discount > 0 %}
        <p class="discount"><strong>优惠:</strong> -{{ cart.total_discount | money }}</p>
      {% endif %}
    </div>
  {% else %}
    <div class="empty-cart">
      <h2>购物车为空</h2>
      <p>您的购物车中还没有商品</p>
      <a href="{{ routes.all_products_collection_url }}" class="btn btn-primary">开始购物</a>
    </div>
  {% endif %}
</div>

购物车商品

商品列表

<!-- 购物车商品列表 -->
{% if cart.item_count > 0 %}
  <div class="cart-items">
    {% for item in cart.items %}
      <div class="cart-item" data-variant-id="{{ item.variant.id }}">
        <div class="item-image">
          <img src="{{ item.image | image_url: width: 150, height: 150 }}"
               alt="{{ item.product.title }}"
               loading="lazy" />
        </div>
 
        <div class="item-details">
          <h3 class="item-title">
            <a href="{{ item.product.url }}">{{ item.product.title }}</a>
          </h3>
 
          {% unless item.variant.title == 'Default Title' %}
            <p class="item-variant">{{ item.variant.title }}</p>
          {% endunless %}
 
          {% if item.vendor != blank %}
            <p class="item-vendor">品牌: {{ item.vendor }}...

下一步学习

现在您已经掌握了购物车对象的使用，建议继续学习：

• 全局对象详解 - 了解更多全局对象
• 产品对象详解 - 深入了解产品相关对象
• 客户对象详解 - 学习客户相关功能
• 高级 Liquid 技巧 - 学习更高级的模板技巧

最后更新时间：

2026年6月27日

客户对象布局和模板