Shopify 2.0 Dawn主题隐藏不可用变体及变体配置相关问题

问题2：变体选项组从单选改为复选框 #

实现步骤： #

1. 打开snippets/product-variant-options.liquid，找到你需要修改的变体选项对应的fieldset代码块
2. 将该fieldset下input的type="radio"改为type="checkbox"，同时删除input的name属性中统一的分组标识，避免选中一个其他选项自动取消
3. 回到/assets/global.js，修改VariantRadios类的updateOptions方法适配多选取值：

updateOptions() {
  const fieldsets = Array.from(this.querySelectorAll('fieldset'));
  this.options = fieldsets.map((fieldset) => {
    const isCheckbox = fieldset.querySelector('input[type="checkbox"]');
    if (isCheckbox) {
      return Array.from(fieldset.querySelectorAll('input:checked')).map(i => i.value);
    } else {
      return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;
    }
  });
}

如果需要实现多变体同时加购，还需要额外修改加购逻辑传递多个变体ID，上述代码仅完成交互形式的修改

问题3：下拉选择框添加自定义提示文本 #

推荐优先选择硬编码实现，无需依赖JS加载，没有内容闪烁问题，性能和稳定性更高，操作步骤：

1. 打开snippets/product-variant-options.liquid文件
2. 找到生成select下拉框的代码，在循环输出option的代码之前，新增一行：

<option value="" disabled selected>请选择{{ option.name }}</option>

如果临时需要修改不想动模板，也可以用JS实现，在页面加载完成后批量替换每个select的首个选项文本即可，劣势是页面加载初期会显示原始选项，存在闪烁感。

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