ドロップダウンの代わりにShopify Variantチェックボックス

Question

私は、私のバリアントが、Shopifyが提供するデフォルトのドロップダウンではなく、次のイメージのように表示するようにしています。

私は現在、次のコードを使用していますが、バスケットに何かを追加しようとしたときにはエラーをスローします。エラーが「パラメータがないか無効です：必要なパラメータがありません：無効な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> 

あなたがラベルを持つことができません入力の内部にある。他の方法でOKになります。

---

そして、あなたは、それ以上を選択し使用していないので、このためのポイントは、ありません。

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