Shopify
バリエーション選択select
メタフェイズではShopifyを利用したストア構築を行っています。
今回はLiquidでバリエーション選択のセレクトボックスを表示する方法を紹介いたします。
product.liquidの任意の場所に下記を記述します。
<select name="id"> {%- for variant in product.variants -%} <option value="{{ variant.id }}">{{ variant.title | escape }}</option> {%- endfor -%} </select>
個数選択、カートに入れるボタンも合わせると下記になります。
<form method="post" action="{{ routes.cart_add_url }}" {{ html_params }}> {%- if product.has_only_default_variant -%} <input type="hidden" name="id" value="{{ variant.id }}"/> {%- else -%} バリエーション:<select name="id"> {%- for variant in product.variants -%} <option value="{{ variant.id }}">{{ variant.title | escape }}</option> {%- endfor -%} </select> {%- endif -%} 個数:<select name="quantity"> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> </select> <button type="submit">カートに入れる</button> </form>
Shopifyを利用したストアの構築・運用のご相談はお問い合わせフォームより受け付けております。
お問い合わせ
Webサイト制作やWebビジネスに関するお悩みがある方はお気軽にご相談ください。