Shopify 变体复选框而不是下拉菜单

Question

我正在努力使我的变体显示如下图，而不是 Shopify 提供的默认下拉菜单。

我目前正在使用以下代码，但在尝试向购物篮中添加内容时出现错误。错误状态 "Parameter Missing or Invalid: Required parameter missing or invalid: id"

      <form action="/cart/add" method="post" enctype="multipart/form-data">
            {% for variant in product.variants %}
            {% if variant.available == true %}
              <fieldset class="group">
                <ul class="checkbox">
                  <li>
                    <input type="checkbox" value="{{variant.id}}">
                      <label>{{ variant.title }} for {{ variant.price | money_with_currency }}</label>
                    </input>
                  </li>
                </ul>
              </fieldset>
            {% else %}
            <option disabled="disabled"> {{ variant.title }} - sold out!</option>
            {% endif %}
            {% endfor %}
            <input type="submit" name="add" id="add" class="inpost-buy w-button" value="Add to Bag →"></input>
      </form>

Answer 1

您缺少复选框的名称属性。

应该有name="id"。（或者如果你真的确定有复选框而不是单选按钮，它应该是 name="id[]" ）

此外，这不是有效的 HTML 代码：

<input type="checkbox" value="{{variant.id}}">
   <label>{{ variant.title }} for {{ variant.price | money_with_currency }}</label>
</input>

输入中不能有标签。反之亦然。

这没有意义，因为你不再使用 select:

<option disabled="disabled"> {{ variant.title }} - sold out!</option>

Shopify 变体复选框而不是下拉菜单

Shopify Variant checkbox instead of dropdown

liquid

shopify