EN
Shopify 知识库 · 指南

Dawn 数量选择器:规则、事件与浏览器验证

Dawn 数量选择器 QuantityInput:追踪加减与 min、data-min 边界逻辑,用独立浏览器实验复现同步 change 事件值的差异。
历史资料
请结合文中的适用版本和来源阅读。

本例固定在 Dawn v15.3.0、commit ecb06c31f1423fced1b3ea6ef7e1cb2143f04e47。研究对象是 quantity-input 的基本浏览器行为;它不是完整商品页或购物车测试。固定源码。

前台控件和后台配置

商品页的数量区域包含减号、数字输入框和加号。这个版本在 main-product 中提供 quantity_selector 区块,schema 将它限制为一个实例;实际购买规则从选中变体读取,随后还可能由商品信息组件按购物车数量调整。

内容来源核对入口
是否出现及排列位置商品模板与区块配置templates/product.json
初始最小值、最大值、步长选中变体的数量规则sections/main-product.liquid
加减与输入事件QuantityInput 类assets/global.js
购物车数量影响后的边界商品信息组件assets/product-info.js

商品页输出与边界更新方法应一起阅读。

一次点击怎样改变输入

构造函数在当前组件内部找到输入框和按钮,并监听 change 与 click。连接时检查边界并订阅 quantity-update,移除时取消订阅。

点击加号通常调用输入框的 stepUp(),减号调用 stepDown();值变化时派发可冒泡的 change 事件。另有两条特殊处理:从零增加时可能跳到 data-min,从最小购买量减少时可能回到输入框的 min。

这解释了为什么不能只看 HTML 的 min 属性:min 与 data-min 在某些调用场景中承担不同角色。这个版本的控件用 disabled CSS 类显示按钮边界,并没有同时设置原生 disabled 属性。

可重跑的独立实验

2026-09-19 截取的独立实验初始界面。图中是本地测试夹具,不连接 Shopify、不生成订单,也不代表实际店铺验收结果。

打开数量控件实验,点击“运行全部检查”。实验复制了固定版本的事件订阅代码,并原样提取 QuantityInput 类;HTML 是本地测试夹具,不是 Shopify 渲染结果。源码文件哈希保存在实验的“源码基线”链接中,Dawn MIT 许可证随代码保留。

2026-09-10 在 macOS 的 Codex 内置浏览器执行,12 项检查全部通过。这里的“通过”表示实际结果符合下表描述,不是宣称所有行为都适合直接作为业务校验。

条件观察结果
A:min=1、max=5、step=1按钮正常加减,达到边界后保持边界值
同时存在 A、BA 的按钮不改变 B 的值
B:min=0、data-min=3、step=1从 0 增加到 3,从 3 减少后最终回到 0
B 从 3 减少同步 change 监听器读到 2,点击处理结束后输入值为 0
A 手工输入 8控件保留 8,浏览器将输入标为超出上限
修改上限后发布数量事件按钮边界样式重新计算
移除并重新插入 B订阅先减少一个,再恢复原数量

同步事件值的差异来自代码顺序:先步进并派发 change,再执行回到 min 的特殊赋值。下游若延后读取值,可能观察到不同结果;这不能直接推导为店铺提交了错误数量,需要连同实际调用方和提交请求验证。

定制入口与验证重点

只改文字和样式时,先保留输入标识、按钮名称与关联关系。若增加事件订阅,不要假定同步监听器总能读到最终值;明确要观察哪一个阶段,并对特殊最小值分支重复测试。

如果需要增强按钮无障碍状态或输入约束,分别检查键盘、边界提示、手工输入和实际表单验证。不要仅凭 .disabled 的外观宣称按钮已被原生禁用,也不要把浏览器控件当作服务端交易规则的替代品。

本实验没有改动 Dawn 原始交互代码。店铺中的规则变更、变体切换、真实加购、服务端拒绝与错误提示仍未验证;进入这些层次时,应记录请求和页面结果,而不是复用本实验的“12 项通过”。

源码基线