Liquid-初級編Part3

Liquidの大枠を理解したい人に向け、初級編と題して、3回に分けてliquidの基本についてご紹介しています。

3つのパートに分かれた初級編の記事を読み終えた段階で、liquidを書く事ができる状態ではなく、

その一歩手前のliquidがどこに記載されていて、何が書かれているのかを把握できている状態として、liquidは実際には書かないけど、

理解しておきたい人にわかりやすいように、記事を構成しています。

今回は、初級編Part3という事で、文字や画像を加工して表示させるFiltersについて解説して行きます。

文字や画像を加工して表示させるとは？

Filtersは、文字や画像を加工して表示させるとお伝えしたのですが、中々イメージしにくいかと思いますので、例を用いてFiletersを解説します。

例えば、productのオブジェクト内に、販売日であるsalesdateのプロパティがあるとします。

ただし、SalesDateのプロパティはJanuary 1st 2022で持っている為、このままだと、ECサイト上では、January 1st 2022として表示されてしまいます。

入力

{{product.salesdate }}

出力

January 1st 2022

2022年1月1日と加工して、表示方法を変更した出力したい際に用いられるのが、FiltersになりますFiltersの基本的な書き方は、

パイプ”|”を使って、”|”右側に加工内容を記述していきます。今回は5種類のFiltersについて解説していきます。

General filters

Array filters

Color filters

Font filters

HTML filters

それぞれがどんな加工方法ができるのかを解説して行きます。

変数を定義するときに使用します。

Filters-General filters

先述した日付などのfilterになります。

入力

 {{product.salesdate  | date: %Y年 %m月 %d日}}

出力

2022年1月1日

Filters-Array filters

データの中から指定された順番のものだけを加工して表示させるfilterになります。

例えば、salesdateに”2022年1月1日”,”2022年2月1日”,”2022年3月1日”のデータが入っているとすると、

入力

 {{product.salesdate  |first}}

出力

2022年1月1日

と、指定した物だけが出力されます。

Filters-Color filters

カラーコードを加工して表示させるfilterになります。

例えば、カラーコードをRGB形式で出力する場合には、

入力

 {{ ‘#834b8f’  | color_to_rgb }}

出力

rgb(131, 75143)

と、出力されます。

Filters-Font filters

フォントを加工して表示させるfilterになります。

例えば、フォントのウエイトとスタイルを加工して表示させたい場合は、

入力

{% page.title | font_modify: ‘weight’, ‘bold’ | font_modify: ‘style’, ‘italic’ %}

と記述する事によって、太字で、イタリックのフォントに加工して出力させる事ができます。

Filters-HTML filters

Assetsに含まれているファイルをHTMLタグで囲って出力するfilterになります。

例えば、画像に対してimgタグを作成したい場合は、

入力

{{ ‘title.gif’ | asset_url | img_tag }}

出力

<img src=”title.gifのURL”>

となります。

まとめ

liquidがどこに記載されていて、何が書かれているのかを把握できている状態を目的とした初級編Part3のまとめになります。

・文字や画像を加工して表示させたい場合には、filetersを使用

・Filtersの基本的な書き方は、パイプ”|”を使って、”|”右側に加工内容を記述

liquidを書く事ができる状態ではなく、その一歩手前のliquidがどこに記載されていて、

何が書かれているのかを把握できている状態を目標としてLiquidの初級編を3つに分けて、今まで解説させて頂きました。

皆さんがliquidの概要を説明できるような状態のお力添えが少しでも出来ていれば幸いです。

今回の初級編は、本当にliquidの大枠の部分になります。

Tagsなども多くの種類があ流のですが、実際にShopifyを構築していく中で、その都度調べながら自分のものとして頂ければと思います。

また、liquidに関しては、英語の記述の為、読みにくい部分もありますが、詳しい内容はShopifyの公式サイトを有効活用して頂ければと思います。

■参考リンク

https://shopify.dev/api/liquid