购物车、金额与优惠
按服务端行项目展示,再解释金额、支付与优惠条件。
行项目、数量与删除
按购物车实际行项目显示主商品和配件。相同变体可能因属性或销售计划分成多行,修改时应保留行的身份,而不是只按商品名匹配。
数据与依赖
- cart.items、quantity、final_line_price、url_to_remove。
- 异步改单行时使用当前 line key。
交互逻辑
- 更新后重新核总额与实际行。
- 数量为零、删除和空购物车分别处理。
示例代码 · snippets/ww-cart-lines.liquid
{% 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 %}
验收检查
- 核两条同变体但属性不同的行。
- 核库存不足、数量修正及键盘提交。
片段适用于完整购物车页,抽屉需另接焦点管理与状态提示;不靠客户端计算替代后台金额。
金额、支付图标与安心条
把商品折后金额、运费税费与最终结账结果区分。支付图标只说明主题读取到的能力,目标市场是否可用仍以实际结账配置和测试为准。
数据与依赖
- cart.total_price 与 money_with_currency。
- shop.enabled_payment_types 和政策页面。
交互逻辑
- 购物车变更后刷新实际总额。
- 安心条引用同一政策,避免另写过期条件。
示例代码 · snippets/ww-cart-summary.liquid
<dl>
<dt>Items after applied discounts</dt>
<dd>{{ cart.total_price | money_with_currency }}</dd>
</dl>
<p>Shipping, taxes and final eligibility are confirmed at checkout.</p>
{% if shop.shipping_policy != blank %}
<a href="{{ shop.shipping_policy.url | escape }}">Shipping conditions</a>
{% endif %}
{% if shop.refund_policy != blank %}
<a href="{{ shop.refund_policy.url | escape }}">Return conditions</a>
{% endif %}
<ul aria-label="Supported payment types">
{% for type in shop.enabled_payment_types %}
<li>{{ type | payment_type_svg_tag }}</li>
{% endfor %}
</ul>
验收检查
- 核商品、购物车与结账的金额和币种。
- 用目标市场核支付、运费及退换规则。
图标不能证明每位顾客都能使用该支付方式,也不证明税费已全部计算。
优惠卡、优惠码与截止条件
先展示适用商品、门槛、币种和有效期,再提供复制按钮。复制成功只改变提示文字,活动是否真正应用由购物车或结账结果确认。
数据与依赖
- 核准的活动码、期限和叠加条件。
- 只读输入、按钮和 role=status 提示区。
交互逻辑
- 复制失败时让顾客手动选择文本。
- 过期或不适用时移除误导的领取文案。
示例代码 · assets/ww-copy-code.js
export function bindDiscountCopy(button, input, status) {
button.addEventListener('click', async () => {
const value = input.value.trim();
if (!value) return;
try {
await navigator.clipboard.writeText(value);
status.textContent = 'Code copied. Check its conditions at checkout.';
} catch {
input.focus();
input.select();
status.textContent = 'Select and copy the code.';
}
});
}
// Use a read-only text input, a type=button control and a role=status element.
// Copying a code does not apply or validate a discount.
验收检查
- 核无权限复制、空码和多次点击。
- 用适用与不适用商品分别核结账。
复制代码不等于自动应用优惠;不要用客户端显示值承诺成交价。
先理解,再整合,最后验证
- 选择模块,确认数据和输入输出。
- 将片段接入当前主题或框架。
- 用真实变体、市场和失败恢复场景验收。
示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。
架构参考
示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。
Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。
依据核对 2026-11-12