【Shopify メタフィールド】 バリエーションのボタンを色ごとに変更
この記事では、メタフィールドでバリエーションごとのボタンの色の変更方法についてまとめます。
こちらが完成イメージとなります。
メタフィールドを定義
まずは、メタフィールドを定義していきます。
管理画面の 設定 > カスタムデータ > バリエーション を選択します。
定義を追加するをクリックし、名前とネームスペースとキーを記入していきます。
今回は、名前をTシャツの色、ネームスペースとキーをTshirt.colorとします。
これでメタフィールドを定義できました。
商品に色を設定
バリエーションごとに色を設定していきます。
管理画面に戻り、 商品管理にて色を設定させる該当商品を選択します。
それぞれのバリエーションをクリックし、一番下までスクロールすると先ほど設定したメタフィールドの欄があります。
そこで個別の色を設定していきます。
商品のバリエーションの配列について
商品のバリエーションがある場合、配列となっています。
今回でいえば、色が4種類あるので配列の個数は4個です。
product.variants[index]
product.variants[0]は白色のTシャツに該当します。
テーマエディターの設定
テーマエディターの商品のバリエーションピッカーをビル型ボタンに設定します。
コードを編集
商品のバリエーションボタンは、スニペットのproduct-variant-options.liquidにて記述されています。
対象箇所は、下の<label>タグです。
{%- if block.settings.picker_type == 'button' -%}
<input
//省略
>
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value -}}
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>
この<label>タグを下のように修正します。
<label
for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
{% if option.name == '色' %}
style="background-color: {{ product.variants[forloop.index0].metafields.Tshirt.color }};"
{% endif %}
>
{{ value -}}
{%- if option_disabled -%}
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
{%- endif %}
</label>
コードの解説
{% if option.name == '色' %}
は、バリエーションのオプション名が色の場合のみ適用させる条件分岐です。
product.variants[forloop.index0].metafields.Tshirt.color
は、先述したとおり商品バリエーションにメタフィールドで設定した色を反映させるためのものです。
product.variants[forloop.index0]は先述したとおり、商品バリエーションの配列のインデックス番号を0から出力させています。
終わり
メタフィールドを利用すれば、デザイン構築の幅が広がりますね！
Shopifyの構築を承ります！
Shopifyで実装したいデザインなどがござましたら、お気軽にご相談、お問い合わせくださいませ！
Discussion