【初心者にわかりやすく解説✨】メタフィールドを用いて、商品詳細ページのカスタマイズ
こんばんは。PeiWebです。今回は、メタフィールドを用いて商品詳細のページを一部カスタマイズしてみました✨
完成形
まずは、完成形を見ていきます。
通常、デフォルトのバリデーションの設定では以下のようになっていますが、
デフォルトのバリデーションの設定
色のバリデーションを変更させ、以下のように色で選択できるようにしていきます。
完成形
赤色の枠のところを実装していきます。
それでは、実装していきます。
メタフィールドとは
そもそも、「メタフィールド」ってなんやねん！って思う方もいると思います。
メタフィールドとは、「shopifyの元々記載されている情報とは別で、新たなフィールドとそれに対して値を入力することができる機能」です。
これだけ聞いても？？だと思うので、
具体的には、商品ページに
「キャンドルの燃焼時間を表示したい」とか「缶詰食品の賞味期限を表示したい」
といった情報を追記することができる機能です。
メタフィールドを使用すると、通常では管理画面で取り込めない特定の情報を保存することができ、Shopifyストアの機能や外観をカスタマイズすることができます。
メタフィールドの定義
さっそく、メタフィールドの定義をしていきます。
「管理画面 > 設定 > メタフィールド > バリデーション」を開きます。
「定義の追加」をクリック
メタフィールドの名前、ネームスペースとキー、説明、選択タイプを以下のように入力
メタフィールドの設定
続いて、メタフィールドの設定を行なっていきます。
まずは、Tシャツの商品を追加していきます。
商品追加
以下のように、「管理画面 > 商品管理」から以下のように設定してみてください。
※一例として、Tシャツにしていますが、色違いのものであればなんでも可能です。
メタフィールドの設定
メタフィールドは、定義しただけでは使用できないので、各商品に設定する必要があります。
以下のように、「商品管理」から、バリエーションに対してメタフィールドを設定するので、バリエーションの編集ボタンをクリックしてください。
クリックすると、バリデーションごとの商品の詳細画面が表示されます。
そして下記の画像のように、バリエーションの編集一覧の一番下に先ほど定義したメタフィールドという項目が追加されています。
入力欄をクリックすると、カラーピッカーが表示されますので、ボタンに使用する色を選択してください。追加したら保存してください。
同様に、他のTシャツにも、メタフィールドの情報を追加してください。
これで管理画面上での、メタフィールドの情報の付与は完了です。
メタフィールドは、Liquidを用いて呼び出すためテーマのコードをいじっていきます。
Liquidを用いたカスタマイズ
商品詳細ページについてLiquidを用いたカスタマイズを行います。
main-product.liquid
商品詳細ページはmain-product.liquidで定義されているので、バリデーションについて記載されている箇所を探していきます。
すると、以下のコードが確認できます。
{%- when 'variant_picker' -%}
{% render 'product-variant-picker', block: block, product: product %}
見つからない方は、variant_pickerで検索してみると見つかると思います。
どうやら、「product-variant-picker」というsnippetの中に記載されていると推測できます。
product-variant-picker.liquid
続いて、「product-variant-picker.liquid」をみていきます。
以下のコードがあるが確認できます。
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options', product: product, option: option, block: block %}
</fieldset>
{%- endfor -%}
どうやら、バリデーションに関しての設定は、snippetの中の「product-variant-options.liquid」に存在するのではないかと推測されます。
product-variant-options.liquid
続いて、「product-variant-options.liquid」をみていきます。そろそろあってくれ。。。。
確認してみると。。それらしきコードがあります。
<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>タグを以下のようにカスタマイズしていきます。
{% if product.variants[forloop.index0].metafields.colorShirt.color %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" style="background-color: {{ product.variants[forloop.index0].metafields.colorShirt.color }};">
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" >
{{ value }}
<span class="visually-hidden">
{{ 'products.product.variant_sold_out_or_unavailable' | t }}
</span>
</label>
上記のコードを解説していきます。
product.variants[forloop.index0]
今回、for文中で、何番目のvariantsかを示したいので、今のループが0から数えて何番目かを出力する「forloop」オブジェクトのindex0プロパティを使用しております。
このようにすることで、商品のvariantsオブジェクトを取得できます。
product.variants[forloop.index0].metafields.colorShirt.color
先ほどの、商品のvariants毎にメタフィールドで定義した値を読み込ませております。
if product.variants[forloop.index0].metafields.colorShirt.color
メタフィールドを設定していない商品をみてみると、メタフィールドと関係ないボタンの文字が消えてしまっています。
そのため、他のところに影響を与えないように、下記のようにメタフィールドを使う商品の場合と使わない場合で条件分岐をしております。
{% if product.variants[forloop.index0].metafields.colorShirt.color %}
略
{% else %}
略
最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。
Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
Discussion