在 Dawn Theme 12.0.0 中自定义变体选择器的问题

问：

我目前正在自定义 Dawn 主题版本 12.0.0，并且我遇到了产品变体选择器的问题。要求是在下拉列表中使用色板和大小变体显示颜色变体。

我修改了 product-variant-picker 代码，并在下拉部分添加了条件 option.name == 'size'。但是，我遇到了一个错误，并且大小变体没有按预期更改。

以下是修改后的代码片段：

<!-- Code snippet from product-variant-picker --> {%- for option in product.options_with_values -%} <div class="product-form__input product-form__input--dropdown"> <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}"> {{ option.name }} </label> <div class="select"> {% if option.name == 'Size' %} <select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select" name="options[{{ option.name | escape }}]" form="{{ product_form_id }}"> {% for value in option.values %} <option value="{{ value | escape }}" {% if option.selected_value == value %} selected="selected" {% endif %}>{{ value }}</option> {% endfor %} </select> {% endif %} {% if option.name == 'Color' %} <!-- Add swatch code here --> {% endif %} {% render 'icon-caret' %} </div> </div> {%- endfor -%}

但是，当我对此进行测试时，我收到以下 JavaScript 错误：

未捕获的 TypeError：无法读取 null 的属性（读取“value”），位于 global.js？v=2122465563403314371700045281：1062：88 在 Array.forEach （） 在 VariantSelects.updateVariantStatuses （global.js？v=2122465563403314371700045281：1059：19） 在 VariantSelects.onVariantChange （global.js？v=2122465563403314371700045281：967：10）

我相信这个错误与updateVariantStatuses方法有关。有人可以就如何解决此问题并成功实施要求提供指导吗？

提前感谢您的帮助！