Magento 2分组产品改数量输入框为下拉选择框的报错问题排查

场景背景 #

• 原生分组产品页面的子商品数量控件为type="number"的文本输入框，为优化选数体验，计划替换为0-10选项的下拉选择框
• 改造过程中刻意保留了原有的name命名规则、data-selector选择器、validate-grouped-qty校验规则、错误信息绑定配置，核心提交字段未做改动

原生数量输入框原始代码 #

<input type="number"
name="super_group[<?= $block->escapeHtmlAttr($_item->getId()) ?>]"
data-selector="super_group[<?= $block->escapeHtmlAttr($_item->getId()) ?>]"
value="<?= $block->escapeHtmlAttr($_item->getQty() * 1) ?>"
title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
class="input-text qty"
data-validate="{'validate-grouped-qty':'#super-product-table'}"
data-errors-message-box="#validation-message-box"/>

改造后下拉框代码 #

<select name="super_group[<?= $block->escapeHtmlAttr($_item->getId()) ?>]"
data-selector="super_group[<?= $block->escapeHtmlAttr($_item->getId()) ?>]" 
class="qty-select" id="qty" type="number" 
data-validate="{'validate-grouped-qty':'#super-product-table'}" 
data-errors-message-box="#validation-message-box">
<option selected value="0">0</option>           
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

现存异常 #

• 改造完成后，任意选择子商品数量尝试加入购物车，系统始终弹出报错：

Please specify the quantity of product(s).

• 已测试移除下拉框默认选中的0值选项，报错仍然复现

问题根因 #

当前改造破坏了Magento原生分组产品组件的取值逻辑，具体问题点如下：

• 丢失了原生JS依赖的qty类名：原生分组产品前端组件在收集子商品数量、执行校验时，是通过类选择器.qty定位对应行的数量控件，而非依赖name或data-selector属性。改造后的下拉框类名仅写为qty-select，未包含原生要求的qty类，导致JS无法定位到对应控件，收集到的提交值为空，直接触发“未指定商品数量”的校验报错。
• 所有下拉框使用了重复的固定id="qty"：分组产品页会逐行渲染每个子商品的控件，所有元素使用相同id会违反HTML的id唯一规范，DOM查询时只会匹配到第一个同id元素，后续子项的控件完全无法被正常读取。
• 存在无效冗余属性：给<select>标签添加的type="number"属性仅对input标签生效，对select元素无任何作用，不参与取值流程。

修复方案 #

• 调整下拉框类名，保留原生依赖的qty类，可在原有类基础上追加自定义类：class="input-text qty qty-select"，兼容JS定位逻辑的同时不影响自定义样式开发。
• 移除固定的id="qty"属性，为每个子项的下拉框生成唯一id，例如拼接子商品id：id="qty-<?= $block->escapeHtmlAttr($_item->getId()) ?>"，避免重复id引发的DOM冲突。
• 移除select标签上无效的type="number"属性，补充和原生input一致的title属性，保证校验提示文案和原逻辑统一。
• 替换硬写的默认选中0的逻辑，动态匹配当前子项的默认数量值，给对应option添加选中状态，适配商品原有默认数量设置。

修复后的参考代码 #

<select name="super_group[<?= $block->escapeHtmlAttr($_item->getId()) ?>]"
data-selector="super_group[<?= $block->escapeHtmlAttr($_item->getId()) ?>]" 
class="input-text qty qty-select" 
id="qty-<?= $block->escapeHtmlAttr($_item->getId()) ?>"
title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
data-validate="{'validate-grouped-qty':'#super-product-table'}" 
data-errors-message-box="#validation-message-box">
<?php for ($qty = 0; $qty <= 10; $qty++): ?>
<option value="<?= $qty ?>" <?= ($block->escapeHtmlAttr($_item->getQty() * 1) == $qty) ? 'selected' : '' ?>><?= $qty ?></option>
<?php endfor; ?>
</select>

内容的提问来源于stack exchange，提问作者ralex