shopify 集成按钮变体选择器不起作用

如何解决shopify 集成按钮变体选择器不起作用

我正在尝试更改我的 shopify 商店的变体选择模式。基本上有一个下拉菜单可以选择变体（在我的情况下是大小）（图 1）。

我想为每个变体选项集成按钮（图片 2）。

我遵循了一个教程（你可以在这个地址找到：https://shopify.github.io/liquid-code-examples/example/product-variant-selector）但不幸的是我无法让它工作......

<div>
              {% unless product.has_only_default_variant %}
                {% for option in product.options_with_values %}
                  <div class="">
                    <label >{{ option.name }}</label>
                    <select class="size_selector single-option-selector-{{ section.id }} "  data-index="option{{ forloop.index }}">
                      {% for value in option.values %}
                        {%- assign variant_label_state = true -%}
                        {%- if product.options.size == 1 -%}
                          {%- unless product.variants[forloop.index0].available -%}
                            {%- assign variant_label_state = false -%}
                          {%- endunless -%}
                        {%- endif -%}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}

            {% endunless %}
        </div>

我正在尝试使用此代码（它与教程略有不同，因为我的主题默认情况下无法选择变体选择器的类型）：

<div>
            {%- unless product.has_only_default_variant -%}
            {%- for option in product.options_with_values -%}
                <fieldset id="ProductSelect-option-{{ forloop.index0 }}" name="{{ option.name | handleize }}">
                  <legend>
                    {{ option.name | escape }}
                  </legend>
                  {%- for value in option.values -%}
                    <!-- Check to see if there's a product size option. If there is a size,check to see if there's any availble for purchase. If not,set the variat control in a "disabled" state. -->
                    {%- assign variant_label_state = true -%}

                    {%- if product.options.size == 1 -%}
                      {%- unless product.variants[forloop.index0].available -%}
                        {%- assign variant_label_state = false -%}
                      {%- endunless -%}
                    {%- endif -%}

                    <input type="radio"
                      {% if option.selected_value == value %} checked="checked"{% endif %}
                      {% unless variant_label_state %} disabled="disabled"{% endunless %}
                      value="{{ value | escape }}"
                      data-index="option{{ forloop.index }}"
                      name="{{ option.name | handleize }}"
                      id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                    <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                      {{ value | escape }}
                    </label>
                  {%- endfor -%}
                </fieldset>
            {%- endfor -%}
          {%- endunless -%}
       </div>

我的问题是它看起来确实有效，但当我点击单选按钮时，变体没有改变......

如果你想要这里是我shopify商店的链接：https://www.the1011studios.com/

如果有人可以帮助我并告诉我我错过了什么，那就太好了 :D 谢谢。（现在我不在乎 css，我只是想让它工作）

如果您需要任何进一步的信息，请不要犹豫。