Liquidでは、JavaScriptなどで使用される足し算(+)、引き算(-)、掛け算(*)、割り算(/)、割り算の余り(%)などの記号を使用した計算はできません。

今回は、Liquidで計算ができるMath Filterをご紹介します。

Math filterの基本的な使い方

数値から直接計算することができないので、まずは変数に数値を格納してからフィルターを記述します。

{% assign 変数名　= 値 | Math filter:値　%}

Math filterのそれぞれの使い方を解説していきます。

加算（足し算）

足し算はplusというフィルターを使用します。

{% assign sample = 700 | plus : 500 %}
{{ sample }}円

表示結果：1,200円

減算（引き算）

引き算はminusというフィルターを使用します。

{% assign sample = 1,500 | minus : 500 %}
{{ sample }}円

表示結果：1,000円

乗算（掛け算）

掛け算はtimesというフィルターを使用します。

{% assign sample = 1, 200 | times : 3 %}
{{ sample }}円

表示結果：3,600円

除算（割り算）

割り算はdevided_byというフィルターを使用します。
※Liquidの割り算では小数点以下は切り捨てとなります。

{% assign sample = 7,200 | divided_by : 8 %}
{{ sample }}円

表示結果：900円

余剰（割り算の余り）

割り算の余りはmoduloというフィルターを使用します。

{% assign sample = 12 | modulo : 5 %}
{{ sample }}

表示結果：2

Liquidを使用して割引率を計算する方法

例）2,400円の商品が1,800円の割引価格で販売されていた場合の割引率計算

{% assign discount = product.compare_at_price_max | minus: product.price | times : 100 | divided_by : product.compare_at_price_max %}
{{ discount }}%OFF

表示結果：25%OFF

《product.price：商品の販売価格》
《product.compare_at_price_max：値引き前価格》

計算式：discount = (2,400円 - 1,800円) × 100 ÷ 2,400円 = 25%

このように、product.priceなどのオブジェクトを使用して数値を設定することも可能です。

小数点以下の表示について

Liquidの計算では基本的に小数点以下が切り捨てとなりますが、フィルターを使用することで四捨五入や切り上げも可能です。
いくつか種類があるのでご紹介します。

小数点以下切り上げ

ceilというフィルターを使用して小数点以下の値を切り上げます。

{{ 2.6 | ceil }}    //3
{{ 3.2 | ceil }}    //4

小数点以下切り捨て

floorというフィルターを使用して小数点以下の値を切り捨てます。

{{ 2.6 | floor }}   //2
{{ 3.2 | floor }}   //3

四捨五入

roundというフィルターを使用して四捨五入します。
roundに値を入力することで小数点以下の桁数を決めることも可能です。

{{ 2.6 | round }}   //3
{{ 3.2 | round }}   //3
{{ 4.56782 | round: 2 }}    //4.57

Liquidでの計算はさまざまな部分で出てくるので参考になれば嬉しいです。