Dawn 数量选择器:规则、事件与浏览器验证
本例固定在 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、B | A 的按钮不改变 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 项通过”。