Horizon 购买流程:数量、加购与表单协作
本文基于 Horizon 4.2.0,源码固定到 5acd1b6(核验于 2026-10-07)。结论限于此 commit,不表示其他版本行为相同;本篇为源码分析,未完成店铺运行验证。
购买区的三个动作需要分开理解:选择数量、把指定变体加入购物车、进入加速结账。它们共享商品表单上下文,但不能通过一个按钮的动画判断整条购买链已经成功。
购买区先建立服务端状态
blocks/buy-buttons.liquid 读取商品及选中变体,结合可售状态和数量规则生成初始按钮状态。它输出商品表单和变体隐藏字段,并静态组织 blocks/quantity.liquid、blocks/add-to-cart.liquid、blocks/accelerated-checkout.liquid。
数量提示和批量定价来自商品与变体数据;堆叠和内边距等设置控制表现。不要把商家调整按钮布局误写成改变库存或数量规则。
礼品卡收件人表单是条件分支,入口为 snippets/gift-card-recipient-form.liquid。涉及礼品卡或门店取货时,应继续追踪相应数据和分支,不能只用普通商品通过一次加购就推定这些功能可用。
提交发生在浏览器组件
assets/product-form.js 中的 handleSubmit 接管表单提交,检查当前状态,并向主题提供的购物车添加地址发出请求。请求前的按钮反馈、服务端返回结果、错误提示和购物车展示更新是不同阶段。
该版本还处理变体切换中的加购排队:切换尚未完成时保存购买意图,随后解析目标变体与数量。因此,“点击按钮后提交当前隐藏字段”不足以概括本版本的全部行为。队列、代次计数与可售判断的拆解见加购竞态处理。
数量有两层约束
assets/component-quantity-selector.js 负责数量控件;商品表单也会检查是否允许加购,并在变体结果返回后更新相关约束。因此观察输入框中的数值只是第一步,还要核对请求里的数量和服务端实际接受的数量。
建议按顺序验证:最小数量、步长、上限、购物车已有数量、切换变体后立即点击、请求失败。记录提交的变体与数量、界面反馈和最终购物车,而不是仅记录按钮变为“已添加”。