メタフィールドとは、顧客や商品、注文にさまざまなデータを格納・取得・表示ができる便利なツール。今回は値が複数ある場合、改行＆リストタグで表示させる方法について解説します。
Shopifyでのストア運営において本当に便利だと思う機能の１つがメタフィールドです。
メタフィールド(Meta Field)とは、顧客や商品、注文にさまざまなデータを格納・取得・表示ができる本当に便利なツールです。
個人的には、運営中の会員限定サイトで顧客管理ページの「会員番号」や「会員入会年月日」、「会員有効期限」などをメタフィールドで実装・管理しています。
また、別のストア(チケット販売サイト)では、注文管理ページでチケットの整理番号(入場番号)などを入力して、顧客がアカウントページ(マイページ)で自分の整理番号を確認できるようにカスタマイズしています。
整理番号の場合、値が1つだけの場合もあれば、複数ある場合もある(たとえば、チケットを2枚以上購入)。
そこで複数のメタフィールドの値が設定可能な「値のリスト」で実装したものの、なんかその表示が気に食わない..
今回は、ちょっとした小技として、複数値を改行してきれいに表示させる方法について。
メタフィールドの「値のリスト」とは
メタフィールドに入力できる値が１つで十分な場合もあれば、複数必要な場合もある..
例えば、製品の関連商品・部品のリストだったり、原材料リストなどは、複数の項目が必要なので「値のリスト」を使用すると簡単に実装ができます。
メタフィールドを作成するときに「１つの値」を選択せず「値のリスト」を選択すると、（下の絵のように）顧客や注文、商品ページなどで複数の値が入力できるようになります。
※各フィールドに入っている「黄色」「赤色」「黒色」は任意で入力したものです。
これで複数の値がデータに格納されます。
以下は、メタフィールドに入力した複数の値を取得して表示するためのLiquidコードです。
{{ order.metafields.custom.color }}
※このサンプルコードは、注文(order)のメタフィールドです。
上記のコードを入力すると、以下の配列が表示されます。
[“黄色”,”赤色”,”黒色”]
これもこれでいいですが、もし顧客の注文詳細などでこのままだと少し見栄えがよくない..やはり記号を除き、きれいに改行された状態で表示させたい・・と思っちゃいますね。
改行するコード
では、さっそく改行された状態で表示させるコードを紹介します。
{%- assign color_values = order.metafields.custom.color | split: '","' -%}
{% for value in color_values %}
{{ value | replace: '["', '' | replace: '"]', '' }}
{% unless forloop.last %}<br>{% endunless %}
{% endfor %}では、１つずつ解説します。
①まず、assignを使って、メタフィールドの値order.metafields.custom.seribanをseriban_valuesに代入します。後ろのsplitは「”,”」を除くようにというフィルタリング機能を持っており、このままですと「[“黄色赤色黒色”]」と表示されます。
②「for文」を使って、メタフィールドの値を１つずつ取り出して「value」という変数に代入します。
③{{ value | replace: '["', '' | replace: '"]', '' }}で、変数「value」に代入されたそれぞれの値が表示されます。「replace」を使って「[“」と「”]」が空欄に代替(replace)され、「黄色赤色黒色」と表示されます。
④{% unless forloop.last %}<br>{% endunless %}は、「unless」を用いてShopifyの変数である「forloop.last」を条件分岐します。条件は「ループの最後でなければ」となり、改行の
⑤{% endfor %}でループ終了。
これで、
黄色
赤色
黒色
と表示されます。
リストタグで表示させたい
では、
・黄色
・赤色
・黒色
のように、リストタグで表示させたい場合は？ 以下のコードで実装できます。
{%- assign color_values = order.metafields.custom.color | split: '","' -%}
<ul>
{% for value in color_values %}
<li>{{ value | replace: '["', '' | replace: '"]', '' }}番</li>
{% endfor %}
</ul>以上です。利用シーンは多くないかもしれませんが、メタフィールドの値の表示において「split」や「replace」などの応用にヒントになると思います。
