Shopify Liquid 配列・計算フィルター｜where・map・sort・plus・divided_by

配列の要素を区切り文字でつないで1つの文字列にします。

書き方

{{ 配列 | join: '区切り' }}

タグ一覧をカンマ区切りで表示するときなどに使います。

例

{{ product.tags | join: '、' }}

出力

新商品、綿100%、春夏

公式ドキュメント　｜　目次へ戻る ↑

配列の最初の要素を取り出します。

書き方

{{ 配列 | first }}

配列.first とドットで書くこともできます。

例

{{ product.images | first | image_url: width: 400 | image_tag }}

公式ドキュメント　｜　目次へ戻る ↑

配列の最後の要素を取り出します。

書き方

{{ 配列 | last }}

split と組み合わせて末尾の部分を取り出すときに便利です。

例

{{ 'a/b/c' | split: '/' | last }}

出力

c

公式ドキュメント　｜　目次へ戻る ↑

配列の要素数、または文字列の文字数を返します。

書き方

{{ 配列または文字列 | size }}

配列.size とも書けます。リスト型メタフィールドの件数は .value.count で取る場面があります（STORE DOJO の TIPS 参照）。

例

{{ collection.products | size }}件

出力

24件

公式ドキュメント　｜　関連TIPS：Shopifyでリスト型のメタフィールドの配列数は.sizeではなく、.countで取得する ／ ShopifyのLiquidでメタフィールド「ファイル(リスト)」の登録数を取得する方法　｜　目次へ戻る ↑

オブジェクトの配列から、指定したプロパティの値だけを集めた配列を作ります。

書き方

{{ 配列 | map: 'プロパティ' }}

商品一覧からタイトルだけを集める、といった使い方をします。

例

{{ collection.products | map: 'title' | join: ' / ' }}

公式ドキュメント　｜　目次へ戻る ↑

指定したプロパティが特定の値を持つ要素だけに絞り込みます。

書き方

{{ 配列 | where: 'プロパティ', 値 }}

値を省略すると、そのプロパティが真の要素だけを残します。

例

{% assign in_stock = collection.products | where: 'available' %}
{{ in_stock.size }}

出力

18

公式ドキュメント　｜　目次へ戻る ↑

指定したプロパティが特定の値を持つ要素を取り除きます（where の逆）。

書き方

{{ 配列 | reject: 'プロパティ', 値 }}

例

{% assign others = collection.products | reject: 'vendor', 'STORE DOJO' %}

公式ドキュメント　｜　目次へ戻る ↑

条件に合う最初の1件を取り出します。

書き方

{{ 配列 | find: 'プロパティ', 値 }}

for と break で探す処理を1行で書けます。見つからなければ nil です。

例

{% assign red = product.variants | find: 'title', 'レッド' %}
{{ red.price | money }}

出力

¥2,800

公式ドキュメント　｜　目次へ戻る ↑

条件に合う最初の要素の位置（0から数える番号）を返します。

書き方

{{ 配列 | find_index: 'プロパティ', 値 }}

例

{{ product.variants | find_index: 'available', true }}

出力

0

公式ドキュメント　｜　目次へ戻る ↑

条件に合う要素が1つでもあれば true を返します。

書き方

{{ 配列 | has: 'プロパティ', 値 }}

contains はオブジェクトの配列に使えないため、その代わりに使えます。

例

{% assign any_stock = product.variants | has: 'available', true %}
{% if any_stock %}在庫あり{% endif %}

公式ドキュメント　｜　目次へ戻る ↑

配列を並べ替えます（大文字と小文字は区別されます）。

書き方

{{ 配列 | sort: 'プロパティ' }}

プロパティ名を指定するとその値で並べ替えます。逆順にしたいときは reverse を続けます。

例

{% assign by_price = collection.products | sort: 'price' %}

公式ドキュメント　｜　目次へ戻る ↑

大文字と小文字を区別せずに並べ替えます。

書き方

{{ 配列 | sort_natural: 'プロパティ' }}

英字のブランド名などを自然な順番で並べたいときに使います。

例

{{ 'b,A,c' | split: ',' | sort_natural | join: ',' }}

出力

A,b,c

公式ドキュメント　｜　目次へ戻る ↑

配列の順番を逆にします。

書き方

{{ 配列 | reverse }}

文字列には直接使えないため、文字列を逆にしたいときは split: '' してから使います。

例

{{ 'S,M,L' | split: ',' | reverse | join: ',' }}

出力

L,M,S

公式ドキュメント　｜　目次へ戻る ↑

重複した要素を取り除きます。

書き方

{{ 配列 | uniq }}

複数商品のベンダー名を重複なく並べるときに使います。

例

{{ collection.products | map: 'vendor' | uniq | join: ', ' }}

公式ドキュメント　｜　目次へ戻る ↑

配列から nil（値なし）の要素を取り除きます。

書き方

{{ 配列 | compact }}

map で集めた結果に空の値が混ざるときに使います。

例

{{ collection.products | map: 'metafields.custom.badge' | compact | size }}

公式ドキュメント　｜　目次へ戻る ↑

2つの配列をつなげて1つにします。

書き方

{{ 配列 | concat: 別の配列 }}

重複は残るため、必要なら uniq を続けます。

例

{% assign all = product.tags | concat: collection.all_tags | uniq %}

公式ドキュメント　｜　目次へ戻る ↑

数値の合計を返します。

書き方

{{ 配列 | sum: 'プロパティ' }}

プロパティを指定すると、その値を合計します。

例

{{ cart.items | sum: 'quantity' }}

出力

5

公式ドキュメント　｜　目次へ戻る ↑

足し算をします。

書き方

{{ 数 | plus: 数 }}

文字列で届いた数字を数値に変えたいときにも | plus: 0 が使えます。

例

{{ forloop.index0 | plus: 1 }}

出力

1

公式ドキュメント　｜　目次へ戻る ↑

引き算をします。

書き方

{{ 数 | minus: 数 }}

例

{{ product.compare_at_price | minus: product.price | money }}

出力

¥1,000

公式ドキュメント　｜　目次へ戻る ↑

掛け算をします。

書き方

{{ 数 | times: 数 }}

小数を掛けると結果も小数になります。

例

{{ product.price | times: 1.1 | round | money }}

公式ドキュメント　｜　目次へ戻る ↑

割り算をします。

書き方

{{ 数 | divided_by: 数 }}

割る数が整数だと結果も整数（切り捨て）になります。小数で受け取りたいときは 3.0 のように小数で割ります。

例

{{ 10 | divided_by: 3 }} / {{ 10 | divided_by: 3.0 }}

出力

3 / 3.3333333333333335

公式ドキュメント　｜　関連TIPS：ShopifyのLiquidの割り算結果は除数と同じ結果になる　｜　目次へ戻る ↑

割り算の余りを返します。

書き方

{{ 数 | modulo: 数 }}

3件ごとに区切りを入れる、といった処理に使います。if の条件の中ではフィルターを使えないため、先に assign で計算します。

例

{{ 7 | modulo: 3 }}

出力

1

公式ドキュメント　｜　関連TIPS：Shopifyのテンプレート言語Liquidでrandomな数字を取得する方法　｜　目次へ戻る ↑

四捨五入します。

書き方

{{ 数 | round: 桁数 }}

桁数を省略すると整数に、指定すると小数点以下その桁まで残します。

例

{{ 3.456 | round: 1 }}

出力

3.5

公式ドキュメント　｜　目次へ戻る ↑

小数点以下を切り上げて整数にします。

書き方

{{ 数 | ceil }}

例

{{ 4.1 | ceil }}

出力

5

公式ドキュメント　｜　目次へ戻る ↑

小数点以下を切り捨てて整数にします。

書き方

{{ 数 | floor }}

例

{{ 4.9 | floor }}

出力

4

公式ドキュメント　｜　目次へ戻る ↑

絶対値（マイナスを取った値）を返します。

書き方

{{ 数 | abs }}

差額を常にプラスで表示したいときに使います。

例

{{ -250 | abs }}

出力

250

公式ドキュメント　｜　目次へ戻る ↑

値が最小値を下回る場合は最小値を返します。

書き方

{{ 数 | at_least: 最小値 }}

表示する件数などに下限を付けるときに使います。

例

{{ section.settings.columns | at_least: 2 }}

出力

2

公式ドキュメント　｜　目次へ戻る ↑

値が最大値を上回る場合は最大値を返します。

書き方

{{ 数 | at_most: 最大値 }}

例

{{ variant.inventory_quantity | at_most: 10 }}

出力

10

公式ドキュメント　｜　目次へ戻る ↑