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ビジネスに関するお悩みがある方はお気軽にご相談ください。