Liquid基礎④Liquidのフィルター(Filters)

Liquidフィルタ―を使うと、画像の出力や、商品価格の表示、アセットフォルダ内のCSSファイルの読み込みなどをスムーズに行うことができます。

Liquidのフィルター(Filters)とは

Liquid フィルターは、Liquidコードの出力・表示を変更するために使用します。 {{ }}内で、パイプ文字（|）の後に入力します。

Shopifyで使えるフィルターは数多くあります。 オブジェクトなどと同じく、すべて覚えるというのは現実的ではありません。 公式リファレンスで、必要な時に調べられれば良いでしょう。

最初に覚えたい3つのフィルター

フィルターの中でも使う機会が多い、３つのフィルターを紹介します。 実際に書いてみて、フィルターのイメージを掴んでください。

lesson2.liquidで、以下2つの呼び出しを追加してみましょう。

• featured_image（商品に登録されている最初の画像）
• price_min（最も安い価格）

lesson2.liquid

{% for item in collections.all.products limit: 3 %}
  <h3>{{ item.title }}</h3>
  {{ item.featured_image }}
  {{ item.price_min }}
{% else %}
  <p>商品がありません</p>
{%- endfor %}

表示を確認すると、画像部分はパスの文字列、価格部分は桁数が多く表示されています。 フィルターを使って、この表示を最適化しましょう。

1.画像表示に使うMedia filters

画像を表示させるために、Media filters（ image_url と image_tag）を加えます。

image_urlは、以前のレッスンでブロックを作成した時にも使用した「画像のURLを出力する」フィルター。 今回新しく使う image_tagは「imgタグで出力する」役割を持つフィルターです。

フィルターはパイプ文字（|）で区切ることで、複数使用できます。

{{ item.featured_image | image_url: width: 200 | image_tag }}

2.日本円表示にするMoney filters

次に、商品価格部分。 価格を日本円表示に適した形にするために、Money filters（money）を加えます。

moneyはストアのHTML に基づいて、価格をフォーマットしてくれます。 今表示しているのは日本語サイトなので、日本円に適した桁数で表示されるというわけです。

{{ item.price_min | money }}

3.文字数を制限するtruncate

商品やブログのタイトル、説明などは、文字数にはムラが生じるでしょう。 一覧表示・複数個の表示をするとき、文字数の差が激しいと見栄えが悪くなってしまう可能性もあります。

そんな時は、truncateフィルターを使って、出力する文字数を制限してあげましょう。

今回はお試し。 商品タイトルにtruncateを適用してみましょう。

<h3>{{ item.title | truncate: 8 }}</h3>

保存して、表示を確認します。

8と指定しましたが、表示されているタイトルの文字数は少ないですね。 これは、パラメータで指定した数に省略符号「…」の3つもカウントされているためです。

アセットファイルを呼び出すフィルター

Shopifyテーマでは、CSSファイルやJavaScriptファイルはアセット（assets）ディレクトリに格納されています。 オリジナルのCSSファイルやJavaScriptファイルを使いたい場合も、アセットディレクトリへ追加する形です。

そして、アセットフォルダ内にあるcss/jsファイルを読み込みたい時は、Liquidで以下のフィルターを使用して記述します。

今回はCSSファイルの追加をやってみましょう。 JavaScriptファイルの場合もフィルターが変わるだけですので、CSSができればできますよ。

A:セクションからCSSファイルを読み込む

実際にオリジナルのCSSファイルを作成し、読み込めるか試してみましょう。

1.CSSファイルの作成

Shopifyコード編集画面を開きます。 左側、 アセット のすぐ下にある「新しいアセットを追加する」をクリック。

上部タブで「空のファイルを作成する」を選択します。 拡張機能はCSSを選択し、ファイル名にlessonと入力してください。

完了ボタンをクリック。 アセットが作成され、白紙のlesson.cssが表示されます。

次のステップでCSSファイルを読み込めているか確認します。 わかりやすそうなCSSを少し書いておきましょう。

lesson.css

h3 {
  color: red;
}

2.セクションファイルにLiquid追加

lesson2.liquidから、作成したlesson.cssを読み込みましょう。 使用するLiquidフィルターはasset_urlと、stylesheet_tagの２つ。

lesson2.liquidの、一番上（1行目）に書くと良いでしょう。

lesson2.liquid

{{ 'lesson.css' | asset_url | stylesheet_tag }}

h3でマークアップされている文字が赤く表示されました！ 追加したCSSが効いていることがわかりますね。

CSSファイルはlesson2.liquidから読み込んでいますが、CSSはセクションが使用されているページテンプレート全体に影響します。 今回の場合だと、ホームページテンプレートだと他のセクションの見出しも赤くなっているはずです。 このセクションのh3タグだけ色を変えたい・サイズを変えたいなどの場合は、idやclassを付けて対応しましょう。

B:Shopifyテーマ（ストア）にCSSを適用する

Shopifyテーマ（ストア）全体で、同じCSSファイルを使いたい、ということもありますよね。 その場合は、theme.liquidの方から、アセットのCSSファイルを読み込みます。

theme.liquidは、レイアウトディレクトリにあります。 どのページテンプレートでも使う、大きな枠組みの役割を持つファイルです。

※確認しやすいよう、先程lesson2.liquidに書いたCSSリンクは、コメントアウトもしくは削除しておいてください。

lesson2.liquid

{% comment %}
{{ 'lesson.css' | asset_url | stylesheet_tag }}
{% endcomment %}

theme.liquidを開きます。

このファイルに、先程と同じくasset_urlと、stylesheet_tagを使って、読み込みたいCSSを記述すればOKです。 </head>の直上に貼り付けてみましょう。

以下のショートカットキーで、検索機能を立ち上げて探すとわかりやすいです。

• Win:Ctrl + F
• Mac:command + F

theme.liquid

{{ 'lesson.css' | asset_url | stylesheet_tag }}

上書き保存して、右上に表示されている「ストアをプレビュー」をクリック。 CSSが効いているか確認しましょう。

トップページや、上部メニューからコレクションを開いみてください。 h3見出しの文字、コレクションページであればコレクション名が赤色になっていたら成功です。

これで、２通りのオリジナルCSSファイルの読み込み方法は完了です。 CSSでカスタマイズするだけでも、デザインのバリエーションはグンと広がりますね。