Shopify Variant复选框而不是下拉列表

Question

我试图让它变成如下图所示，而不是Shopify提供的默认下拉列表。

我目前正在使用以下代码，但在尝试向篮子添加内容时会引发错误。错误状态＆＃34;参数缺失或无效：必需参数缺失或无效：id＆＃34;

      <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>