Shopifyストアで商品ごと、コレクションごとにユニークな詳細ページを作る事できるメタフィールド。今回は同じネームスペース(namespace)を持つメタフィールドの値を取得・表示させる方法について解説します。
Shopifyの商品、コレクション、ブログ、顧客情報などで、固有の値を登録できるのツールがメタフィールドです。
この値を活用して効率よくストアを運営する事もできれば、各テンプレートに組み込む事によって、商品ごと、コレクションごとにユニークな詳細ページを作る事も可能になります。
今回は同じネームスペース(namespace)を持つメタフィールドの値を取得・表示させる方法について解説したいと思います。
活用シーンは多くないと思いますが、知っておくといつか役に立つと思います。
活用シーン
上述しましたが、活用シーンは多くないと思います。
この方法について知りたいと思ったきっかけは、商品ごとのYoutube動画(iframe挿入)一覧を表示させたいという依頼があったため。
もちろん、textタイプのメタフィールドをいくつか設置しておけば解決する事案だと思いますが、商品によってはYoutube動画の数がバラバラ（中には０のものも）。
それで、iframe挿入用のメタフィールドのネームスペースを同一のものにし、値(iframe用のタグ)が入っている数だけに、<for文>を使って取得・表示させたいと思いついたのです。
準備
まずは、「movie」というネームスペースを持つメタフィールドを4つ設置しました。
movie.iframe1
movie.iframe2
movie.iframe3
movie.iframe4
もちろん5つ以上必要になると、ifram5、iframe6と、さらに追加すればOKです。
Liquidコード
最初は{% for metafield in collection.metafields %}と{% if metafield.namespace == "movie" and metafield.value != blank %}で、何とかいけると思っていたが、うまくいきませんでした。
Googleで色々調べたら、以下のようなLiquidコードにたどり着きました。
<ul>
{% for field in collection.metafields.movie %}
<li>{{ field | first }}: {{ field | last }}</li>
{% endfor %}
</ul>ただしこのコードだと、メタフィールドのラベルも表示されるので、値だけ必要だったら、
<ul>
{% for field in collection.metafields.movie %}
<li>{{ field | last }}</li>
{% endfor %}
</ul>と、メタフィールドのラベルである{{ field | first }}を削除すればＯＫです。
ちなみに{{ field | last }}が、メタフィールドの値になります。
※{{ field | first }}は{{ field[0] }}、{{ field | last }}は{{ field[1] }}にそれぞれ代用できます。
こんな応用も
例えば、iframeが1つの場合は表示セクションを横いっぱい(100%)して、2つの場合は半々(50%ずつ)の横並びにしたい場合、以下のような応用もできると思います。
{% assign movie_metafields_count = 0 %}
{% for field in collection.metafields.movie %}
{% if field[1] != blank %}
{% assign movie_metafields_count = movie_metafields_count | plus: 1 %}
{% endif %}
{% endfor %}
{% if movie_metafields_count == 1 %}//値が入っているメタフィールドが1つであれば
<ul class="iframe-full-width">
{% for field in collection.metafields.movie %}
<li> {{ field | last }}</li>
{% endfor %}
</ul>
{% elsif movie_metafields_count == 2 %}//値が入っているメタフィールドが2つであれば
<ul class="iframe-half-width">
{% for field in collection.metafields.movie %}
<li>{{ field | last }}</li>
{% endfor %}
</ul>
{% endif %}値が入っているメタフィールドの数によって、条件分岐をする手法になります。
数が1つであれば、ul class="iframe-full-width"が表示され、２つであれば、ul class="iframe-half-width"が表示されるコードです。
以上、同じネームスペース(namespace)を持つメタフィールドの値を取得・表示させる方法の解説でした。
