案例作品集 浏览精选项目

WESWOO 提供 Shopify Plus 项目开发费抵扣,至多 US$4,800

开发知识库 / 购物车、金额与优惠

购物车、金额与优惠

按服务端行项目展示,再解释金额、支付与优惠条件。

行项目、数量与删除

按购物车实际行项目显示主商品和配件。相同变体可能因属性或销售计划分成多行,修改时应保留行的身份,而不是只按商品名匹配。

数据与依赖

  • cart.items、quantity、final_line_price、url_to_remove。
  • 异步改单行时使用当前 line key。

交互逻辑

  • 更新后重新核总额与实际行。
  • 数量为零、删除和空购物车分别处理。
示例代码 · snippets/ww-cart-lines.liquid
Liquid · WESWOO
{% form 'cart', cart %}
  <ul>
    {% for item in cart.items %}
      <li>
        <a href="{{ item.url | escape }}">{{ item.product.title | escape }} — {{ item.variant.title | escape }}</a>
        <label for="Quantity-{{ section.id }}-{{ forloop.index }}">Quantity</label>
        <input id="Quantity-{{ section.id }}-{{ forloop.index }}" type="number" name="updates[]" value="{{ item.quantity }}" min="0" step="1">
        <span>{{ item.final_line_price | money_with_currency }}</span>
        <a href="{{ item.url_to_remove | escape }}">Remove this line</a>
      </li>
    {% endfor %}
  </ul>
  <p>{{ cart.total_price | money_with_currency }}</p>
  <button type="submit" name="update">Update cart</button>
  <button type="submit" name="checkout"{% if cart.empty? %} disabled{% endif %}>Checkout</button>
{% endform %}

验收检查

  • 核两条同变体但属性不同的行。
  • 核库存不足、数量修正及键盘提交。

片段适用于完整购物车页,抽屉需另接焦点管理与状态提示;不靠客户端计算替代后台金额。

先理解,再整合,最后验证

  1. 选择模块,确认数据和输入输出。
  2. 将片段接入当前主题或框架。
  3. 用真实变体、市场和失败恢复场景验收。

示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。

架构参考

示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。

Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。

依据核对 2026-11-12