【Shopifyテンプレート言語】Filterってなに?【Liquid】

こんにちは、たかぼー(@taka_forward)です。

先日の記事でObjectについて紹介したので、今回はFilterについて詳しく紹介していきます。

たかぼー

Objectの出力値を調整する「Filter」について紹介していきますよ〜!

<この記事を読むことのメリット>
① Liquidについて詳しく知れる
② Filterについて詳しく知れる
② Shopifyのテーマ開発の具体的なイメージがわく

Filterとは?

オブジェクトについての出力値を変更する際に使われます。例えば、日付や値段の表記を変更したい場合(例:Sat, July 4, 20→July 4)・多言語サイトに対応するとき・CDNを読み込む場合によく使われます。

※CDNとは…Content Delivery Networkの略で、コードを外部サーバーに置き、そこから読み込むことで、サイトの読み込みが早くなる、かつ、サイトへの負荷を減らせるもの。キャッシュ関係の問題が発生した場合は、再現が困難なことがあるため、問題解決までに時間がかかることがあります。Web制作だとフレームワークで有名な「Bootstrap」がCDNです。

書き方

出力を示す{{ … }}、ロジックを行う{% … %}の中で「|」を使って記載します。Macだとshiftキーを押しながら、¥を入力すると表示され、「|」は「パイプ」と呼ばれます。

例:{{ page.title | upcase }}:ページのタイトルを全て大文字で出力する場合

例:{{ page.title | upcase | remove: “COOL” }}:ページのタイトルを全て大文字で出力し、COOLが入っている時は削除する場合
※このケースのように複数のフィルターを1度に使用することも可能です。

といったような形で使います。

よくあるFilterの紹介

ここからよく使うFilterについて記載していきます。

翻訳対応時: {{ … | t }}

既存のテーマをみていると、フィルターの後が、「t」とだけ書かれているものがよくあると思います。これは「translation(翻訳)」の略で、管理画面からテキストを入力することが可能です。

[管理画面ログイン] > [(左下の)設定] > [ストアの言語]から翻訳の文字を変更することができます。

※…に入るものは任意で設定ができますので、多言語対応したい場合に設定を行います

日時表記を変えたい:{{ … | date}}

ブログ投稿日時や、注文時にお客さんに送られるメールの日時表記を変更する場合に使用します。

{{ article.published_at | date: “%a, %b %d, %y” }}

article.published_atは「ブログ投稿日時」を表しており、この場合、「Tue, Jul, 28, 7」となります。

日本用にローカライズすると、

{{ article.published_at | date: "%Y年%m月%d日" }} 
// 「2020年07月03日」と出力

となります。

表記については、こちらのサイトで変更できますのでご覧ください。

値段の表示を変えたい:{{ … | money}}

これは商品価格の表示方法を変更する際に使用されるフィルターになります。このフィルターは管理画面の設定と連動しておりますので、[管理画面ログイン] > [(左下の)設定] > [一般設定] > [ストア通貨] の表記の確認をしつつ、使うようにしてください。

それぞれのフィルターについて紹介していきます。

{{ product.price | money }}

商品の値段を記載する際によく使います。管理画面上の「通貨のないHTML」の設定を反映します。上の画面の場合、¥{{ amount_no_decimals }}が記載されているので、表示は製品価格が1000円の場合、¥1000と表示されます。(経験上このフィルターを使用することが一番多いです。)

{{ product.price | money_with_currency }}

この場合は、管理画面上の「通貨があるHTML」に記載の金額を反映します。上の画面の場合、¥{{ amount_no_decimals }} JPYが記載されているので、表示は製品価格が1000円の場合、¥1000JPYと表示されます。

{{ product.price | money_without_trailing_zeros }}

この場合は、管理画面上の「通貨があるHTML」に記載の金額を元に、0を削除した数字を反映します。($10.00などで表示している場合に使用するので日本だと使う場合は稀だと思います。)

{{ product.price | money_without_currency }}

この場合は、小数点以下の金額を削除した数字を反映します。(日本だと使う場合は稀だと思います。)

画像サイズを合わせたい:{{ … | img_url }}

URLにパラメーターをつけて画像サイズを揃えることができます。

{{ product.featured_image | img_url: ‘100×100’ }}

のように記載すると、おすすめ商品写真のサイズが100×100になります。ファーストビューの写真サイズを揃える場合でも使用され、サイズについてはタテのみ制限をかけたり(img_url: ‘100x’)、横のみ制限をかけたりする(img_url: ‘x100’)こともできます。

まとめ

ここまでフィルターについて紹介しました。

詳しく知りたい方は、公式のドキュメントを、他にどんなものがあるか知りたい方はCheat sheetをご覧ください。

Shopify公式ドキュメント
Shopify Cheat Sheet

この記事を書いた人

たかぼー

1993年、東京都生まれ。大学卒業後、メーカーの海外営業を経験し、「日本製のものが1人でも多くの人に使われて欲しい」という思いを形にするためにShopifyを使ったECサイト制作から運用までのサポートをしています。これからECサイト制作を始める人が「楽しく」作ってお客様の売り上げに貢献できるよう、知識のシェアをしているブログです。