Shopifyメタフィールドのリッチテキスト要素の中で「リスト」の取得・表示、「unordered」と「ordered」について解説します。
Shopifyにおけるメタフィールドの活用度は非常に高いと思います。
商品ぺージ、ページ、ブログ、コレクションページなど、基本テンプレートを用いてページを作るため、個々のユニークなデータや情報の表示にメタフィールドを活用するシーンが多いです。
メタフィールドには、単純なテキストや数字を入れるものもあれば、リッチテキストのような、ちょっとしたエディタのようなものもあります。
このリッチテキストですが、その値を取得・表示させるには、Liquid変数だけではNGで「for文」「if文」など、制御構文が必要です。
※Liquidの変数と制御構文の違い、役割が知りたい方は以下の記事をご一読ください。
Shopify 開発言語 Liquid、{{ }} と{%- -%}の違いは？
今回は、メタフィールドのリッチテキスト要素の中で「リスト」の取得・表示について解説したいと思います。
メタフィールド取得・表示の基本
まず、メタフィールド取得・表示の基本的な手法について。
メタフィールドは、ネームスペースとキーと構成されており「.」の前がネームスペース、後ろがキーになります。
custom.list
ここでは、「custom」がネームスペース、「list」がキーになります。
取得と表示には、以下のような変数コードが用いられます。
{{ product.metafields.custom.list }}
これは、商品ページのメタフィールドの場合です。
もし、顧客ページのメタフィールドを取得・表示する場合は、
{{ customer.metafields.custom.list }}
コレクションのメタフィールドだｔ、
{{ collection.metafields.custom.list }}
になります。
基本的には「単一行テキスト」、１つの「整数」などは、{{ collection.metafields.custom.list }}などでほぼ問題なく表示されます。
リッチテキストの表示させると
では、本題のリッチテキストのリストですが、
・氏名：山田テスト
・年齢：20
・職業：公務員
と、メタフィールドに入力した情報を、上記で紹介したコードで表示させると、以下のようになります。
{“type”:”root”,”children”:[{“listType”:”unordered”,”type”:”list”,”children”:[{“type”:”list-item”,”children”:[{“type”:”text”,”value”:”氏名：山田テスト”}]},{“type”:”list-item”,”children”:[{“type”:”text”,”value”:”年齢：20″}]},{“type”:”list-item”,”children”:[{“type”:”text”,”value”:”職業：公務員”}]}]}]}
この表示でわかるように、メタフィールドは「表示のため」というより「データの格納」に近い役割をしております。
そのため、一部のタイプ（例えば、前出の「単一行テキスト」など）を除き、表示のためには、工夫が必要になるわけです。
リッチテキスト<リスト>の表示
以下は、リスト表示のためのLiquidコードになります。
{% assign data = collection.metafields.custom.list.value %}
{% for child in data.children %}
{% if child.type == "list" %}
<ul>
{% for item in child.children %}
<li>{{ item.children[0].value }}</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}では、順に解説していきます。
①まず「data」の変数にメタフィールドの値(value)を格納します。
②「for文」を使って変数「data」の子(children)要素を変数「child」に格納してループを作ります。（ここの子要素は、調べてみたところ、プロパティではないらしいです。）
③「if文」を使って子要素のタイプがリスト(リスト)の場合、<ul><li>タグを使ってリストを作ります。
④<li></li>の間には、{{ item.children[0].value }}と、1番目([0])のデータから順に取り出された値が表示されます。
リスト「unordered」と「ordered」
実はリッチテキストのリストには、番号あり・無しと2つの種類があります。
{% if child.type == "list" %}
{% if child.listType == "unordered" %}
<ul>
{% for item in child.children %}
<li>{{ item.children[0].value }}</li>
{% endfor %}
</ul>
{% elsif child.listType == "ordered" %}
<ol>
{% for item in child.children %}
<li>{{ item.children[0].value }}</li>
{% endfor %}
</ol>
{% endif %}
{% endif %}こちらのコードのように、さらに「if文」で条件分岐し、リストタイプが番号なしであれば<ul>タグを使い、番号ありだと<ol>タグを使用するのです。
リッチテキストその他
今回、リッチテキストのリストタイプだけを紹介しましたが、他にも
<!--見出し-->
{% if child.type == "heading" %}
<h{{ child.level }} ">{{ child.children[0].value }}</h{{ child.level }}>
{% endif %}<!--テキスト-->
{% if child.type == "paragraph" %}
<p>{{ text.value }}</p>
{% endif %}などがあります。
