Liquidとは
LiquidとはShopifyによって作成されたテンプレート言語。
オープンソース。
ストアの見た目を作成できる。
ドキュメント
Github
Liquidの{{ }}と{% %}の違い
Liquidの構文は、2種類の区切り文字で記載。
{{ }} = データを出力
{% %} = 処理の指示
# 二重中括弧で囲んだ部分はデータ出力を記載
# 例
<h2>{{ shop.name }}</h2>
# 実行結果
<h2>マイショップ</h2>
# 中括弧とパーセンテージで囲んだ部分にはロジックを記載
# 例
# item01.imagesリストの要素数分(3要素と仮定)ループ処理を実行
{% for image in product.images %}
<img src=”{{ image | img_url: ‘small’ }}”>
{% endfor %}
# 実行結果
<img src=”http://○○○.com/images/item01_01_small.jpg”>
<img src=”http://○○○.com/images/item01_02_small.jpg”>
<img src=”http://○○○.com/images/item01_03_small.jpg”>
オブジェクトとプロパティ
オブジェクトとは、プロパティ(KeyとValueのペア)の集合体のこと。
オブジェクトとは「変数」。
プロパティとは「属性」のことで、shopオブジェクトには、Shopifyの管理画面で設定したショップの情報がすべて格納されている状態。
shopオブジェクトに設定されているプロパティは「shop.name」(オブジェクト.プロパティ)のように、ドットの右側に記載。
商品情報はproductオブジェクト、ブログの記事情報はarticleオブジェクトなど。
各オブジェクトにはいくつものプロバティがある。
例えばShopオブジェクトのプロパティ
プロパティにある値は表示するページや設定によって異なる。
# ストアの商品数が1000個の場合
{{ shop.product_count }}
# 実行結果
1000
特定のオブジェクトからのみアクセルできるオブジェクトも存在する
他のLiquidファイルで記述しても出力できない。
productオブジェクトは、商品ページのテンプレート( product template )で使った場合のみ、該当する商品の情報にアクセスして出力することができる。
反対に、shopのように、どのテンプレートを使ったページからでもアクセスできるオブジェクトも存在する
どこでも使えるオブジェクトのことを グローバルオブジェクト(Global Objects) と呼ぶ。
オブジェクト、プロパティ一覧
グローバルオブジェクトどうかの確認方法
checkoutオブジェクト
checkoutオブジェクトを例とすると、上記URLをクリックしてオブジェクトのページを表示。
「Map」をクリックすると表示されるまるで囲んだ箇所が使用できるテンプレート。
checkoutテンプレートからしかアクセスできない。
グローバルオブジェクトの場合は「Global」と表示される
productオブジェクトの場合は「Returned by」という表示がある。
これは直接値を出力すこと以外で「値を出力できる」方法のこと。
例)コレクションのページで、商品のタイトルや画像は出力されているなど。
collection.products= collectionオブジェクトのproductsプロパティ(コレクションに属している全商品)からタイトルなど商品情報を取得している。
Liquidのタグ
Liquidでは{% %}で囲んで、繰り返しや変数定義などの“処理”を指示できる。
この処理を指示するコードをタグ(Tags)と呼んでいる。
Liquid Tagsの一覧は、公式リファレンスにも掲載されています。
▼公式リファレンス(英語)
shopify.dev- Liquid tags
Liquid template language
基本的なタグ
繰り返しタグ(for)
for文はループ処理(同じ処理を繰り返す)を行うための構文。
指定したオブジェクトやプロパティ内にある要素を取り出し、繰り返し処理する。
{% for 変数名 in 繰り返す配列 %}
繰り返し行いたい処理
{% endfor %}
# 例
# 商品の一覧を表示
{% for item in collections.all.products -%}
<h3>{{ item.title }}</h3>
{%- endfor %}
LiquidのフィルターLiquidのフィルター
Liquid フィルターは、Liquidコードの出力・表示を変更するために使用。
{{ }}内で、パイプ文字(|)の後に入力します。
フィルターは複数個繋げて記載することも可能。
複数個記載したフィルターは、左側から右側へ順番に処理さる。
フィルターを使いこなすことで、ロジックを記載する量が少なくなるためShopifyのテーマをカスタマイズする負担が軽減できる。