【Shopify】特定のタグが付いた商品を抽出して配列にする方法

Liquidで特定のタグが付いた商品を取得して配列にする処理が意外と面倒だったので備忘録も兼ねて方法を紹介します。

商品の絞り込み

コレクションでの絞り込み

collectionオブジェクトはproducts属性を持っているので、
特定のコレクションに属する商品を取得するのは簡単です。

foo.liquid

{% assign _products = collections.hoge.products %}

collection.liquid内、product.liquid内なら

collection.liquid

{% assign _products = collection.products %}

product.liquid

{% assign _products = product.collections['hoge'].products %}

タグでの絞り込み

コレクションと違い、タグはオブジェクトとして存在しないため、
{{ tags['fuga'].products }}のような商品の取り方ができません。
そのため、productの配列から特定のタグを持つ商品を抽出して新しい配列を作る必要があります。

例えば、"fugaコレクション"から"hogeタグ"の付いた商品だけを取得したい場合は以下のようになります。

bar.liquid

<!-- fugaコレクションの全商品を取得 -->
{% assign __products = collections['fuga'].products %} 

<!-- 空の文字列として宣言する -->
{% assign _products = '' %}
{% for _prod in __products %}
  {% for _tag in _prod.tags %}
    {% if _tag contains 'hoge' %}

      <!-- hogeタグを持っていれば、 _productsの末尾にproductオブジェクトと区切り文字','を追加 -->
      {% assign _products = _products | append: _prod | append: ',' %}

      {% break %}
    {% endif %}
  {% endfor %}
{% endfor %}

<!-- 末尾の ',' を削除し、 ','を区切り文字として配列を生成する -->
{% assign _products = _products | remove_last: ',' | split: ',' %}

まとめ

ちょっと面倒くさい方法ですが特定のタグが付いた商品の配列を作れました。
LiquidにもJavaScriptのfilterみたいな機能があれば嬉しいですね

参考