JavaScript 错误 - Shopify 模板中的“无法读取未定义的属性”

问：

我在 Shopify 模板中遇到与变体选择相关的 JavaScript 错误。错误消息为“无法读取未定义的属性”。问题似乎发生在全局.js文件中的第1226行。我在产品页面上使用 variant-radios 元素进行颜色选择，并使用 variant-selects 元素进行尺寸选择。该错误阻止所选变体正常工作。

以下是相关代码：

{%- unless product.has_only_default_variant -%}
  <variant-radios
    class="no-js-hidden"
    data-section="{{ section.id }}"
    data-url="{{ product.url }}"
    {{ block.shopify_attributes }}>
    {%- for option in product.options_with_values -%}
      <fieldset name="Color" class="js product-form__input {% unless option.name == 'Color' %} %}hidden{% endunless %}">

        <legend class="form__label">{{ option.name }}</legend>

        {%- for value in option.values -%}


          {% if option.name == 'Color' %}
            <input
              type="radio"
              id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
              name="{{ option.name }}"
              value="{{ value | escape }}"
              form="{{ product_form_id }}"
              {% if option.selected_value == value %}
              checked
              {% endif %}>
          {% endif %}


          {% if option.name == 'Color' %}
            {% assign variant_image_url = product.variants[forloop.index0].metafields.variant.image_url %}
            <label
              class="swColor"
              for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
              style="background-image: url({{ variant_image_url }});">
              {{ value }}
            </label>
          {% endif %}


        {%- endfor -%}
      </fieldset>
    {%- endfor -%}
    <script type="application/json">
      {{ product.variants | json }}
    </script>
  </variant-radios>

  <variant-selects
    id="variant-selects-{{ section.id }}"
    class="no-js-hidden"
    data-section="{{ section.id }}"
    data-url="{{ product.url }}"
    {% if update_url == false %}
    data-update-url="false"
    {% endif %}
    {{ block.shopify_attributes }}>
    {% for option in product.options_with_values %}

      {% if option.name == 'Size' %}
        <label for="Option-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
        <div class="my-2">
          <select
            name="options[{{ option.name | escape }}]"
            id="Option-{{ section.id }}-{{ forloop.index0 }}"
            class="w-full border py-3 px-3">
            {% for value in option.values %}
              <option
                value="{{ value | escape }}"
                {% if option.selected_value == value %}
                selected="selected"
                {% endif %}>{{ value }}</option>

            {% endfor %}


          </select>
        </div>
      {% endif %}

      <script type="application/json">
        {{ product.variants | json }}
      </script>

    {% endfor %}

  </variant-selects>
{%- endunless -%}

class VariantRadios extends VariantSelects {
  constructor() {
    super();
  }

  setInputAvailability(listOfOptions, listOfAvailableOptions) {
    listOfOptions.forEach((input) => {
      if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
        input.classList.remove('disabled');
      } else {
        input.classList.add('disabled');
      }
    });
  }

  updateOptions() {
    const fieldsets = Array.from(this.querySelectorAll('fieldset'));
    this.options = fieldsets.map((fieldset) => {
      return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;
    });
  }
}

错误日志提到了 VariantRadios.updateOptions 方法中的问题。我已经尝试根据建议更新代码，但问题仍然存在。有关如何解决此问题的任何见解将不胜感激！