【Shopify】LiquidのMoney filterを全てまとめてみた話

はじめに

今回の記事では、ShopifyのMoney filterを全てまとめてみました。

こちらを参考にしました。

Money filter

Moneyフィルタを使うことで、一般設定にある通貨のフォーマットに基づいて価格を表示できます。

各 Money filter の説明の前に、軽く通貨のフォーマットについて説明します。

通貨フォーマット

ストア上に表示される通貨や、価格表示を変更して、お客様が金額を読み取りやすいようにすることができます。

通貨フォーマットの種類

通貨フォーマットの種類は全部で4つで、フォーマットによって使用箇所が変わります。

フォーマット名	使用箇所
通貨があるHTML	オンラインストアと管理画面
通貨のないHTML	オンラインストアと管理画面
通貨が表示されたメール	通知
通貨が表示されていないメール	通知とOrder Printerテンプレート

通貨フォーマットの選択肢

通貨額の価格表示方法を選べます。

価格表示形式	四捨五入	例
{{ amount }}		1,234.56
{{ amount_no_decimals }}	✓	1,235
{{ amount_with_comma_separator }}		1.234,56
{{ amount_no_decimals_with_comma_separator }}	✓	1.235
{{ amount_with_apostrophe_separator }}		1'234.56

四捨五入を加えた通貨のフォーマットにすると、小数点以下の数が50以上の場合は切り上げ、50以下の場合は切り下げとなります。

いずれの通貨のフォーマットを選択しても、ストアのチェックアウトでは小数点以下を含めた通貨が表示されます。

参考記事：Shopify ヘルプセンター - 通貨のフォーマット


それでは、Money filtersを見てみましょう。

money

通貨のないHTMLの形式に基づいて価格をフォーマット化します。

{{ 145 | money }}

<!-- if "HTML without currency" is ${{ amount }} -->
$1.45
<!-- if "HTML without currency" is €{{ amount_no_decimals }} -->
€1

money_with

通貨があるHTMLの形式に基づいて価格をフォーマット化します。

{{ 145 | money_with_currency }}

<!-- if "HTML with currency" is ${{ amount }} CAD -->
$1.45 CAD

money_without_trailing_zeros

通貨があるHTMLの形式に基づいて、小数点と価格に影響がないゼロを除いた価格をフォーマット化します。

つまり、入力値が 2000 の時は、＄20.00 ではなく、＄20 と返されます。

<!-- if "HTML with currency" is ${{ amount }} CAD -->
{{ 2000 | money_without_trailing_zeros }}

$20

価格に影響がないゼロだけが削除され、他の数字は削除されません。

<!-- if "HTML with currency" is ${{ amount }} CAD -->
{{ 145 | money_without_trailing_zeros }}

$1.45

money_without_currency

10進数を使用して価格をフォーマット化します。

{{ 145 | money_without_currency }}

1.45

終わりに

今回の記事はここまでになります。

お疲れさまでした。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。