はじめに

今回は、liquidの基本的な構文を学習していきます。

頑張っていきましょう。

今回はこちらを参考にしました。

サイト上の表示とロジック

Ruby On Railsを触ったことがある人なら馴染み深いですが、liquidはHTMLの文章中に直接コードを書くことができます。

.html.erbファイルのようなものですね。

HTMLの中に直接コードを書く上で大切になってくるのは、表示とロジックです。

表示とは、HTMLのようにサイト上に表示される部分で、ロジックとはif文などのコードの制御を行う部分です。

ifやforなどのコードを制御する部分がHTMLファイル上に見えてしまったら、大変なことになりますよね。

そのため、liquidファイルでは表示とロジックを明確に区別しています。

表示

liquidでサイト上に表示を行う場合は、{{}}でコードを囲います。

{% assign number = 100 %} 
<h1>{{number}}</h1>

{{}}の中にはShopifyであらかじめ定義されている「オブジェクト」や、「オブジェクトのプロパティ」、または「文字列」が入ります。

簡単に書くと、liquid内で定義した変数を表示するときに用います。

ロジック

{%%}は、liquidのロジックを用いるときに使います。

liquidのロジックとは、具体的にはfor文やif文、変数宣言などが当てはまります。

{{}}との違いは、サイト上に出力されないということです。

{% if 5 > 3 %}
    <h2>5は3より大きい</h2>
{% else %}
    <h2>5は3より小さい</h2>    
{% endif %}

それでは、liquidの具体的な構文を見てみましょう。

変数の定義（assign）

既に一度出てきていますが、liquidにおいて変数の定義はassignを用いて行います。

変数の定義はロジックなので{%%}を用います。

{% assign number = 100 %} 
<h1>{{number}}</h1>

条件分岐（if）

これも既に出てきていますが、条件分岐はifを使って表現します。

ifもロジックなので{%%}を使います。

{% if 5 > 3 %}
    <h2>5は3より大きい</h2>
{% else %}
    <h2>5は3より小さい</h2>    
{% endif %}

ifとendifで挟むことで、条件分岐を実装できます。他のプログラミング言語と同じように、elseも使えます。

ループ（for）

残念なお知らせですが、liquidではwhileループが使えません。

forループを頑張って使いましょう。

{% for i in (1..5) %}
    <h1>{{i}}</h1>
{% endfor %}

pythonなどで使うrangeの代わりに、(1..5)とることで、1から5までのイテレーターを作成することができます。

break

breakは使えます。

他の言語と同じで、break文が走ると処理が終了します。

{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    <h1>{{ i }}</h1>
  {% endif %}
{% endfor %}

continue

ついでに、continueも使えます。

{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    <h1>{{ i }}</h1>
  {% endif %}
{% endfor %}

フィルター

こちらを参照しています。

liquid特有の書き方ですが、変数をパイプで繋ぐことでフィルターをかけることができます。

イメージとしては、変換器のようなものだと思って下さい。

assetsファイルを渡したら、そのassetsファイルのURLを返すasset_urlというフィルターや、配列を渡すと一番最初の値を返すfirstというフィルターがあります。

以下のコードで、具体的な挙動を見てみましょう。

asset_url

テーマの「assets」フォルダにあるファイルのURLを返します。

{{ 'shop.css' | asset_url }}

//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253

asset_urlを用いることで、タグのsrc属性にurlを渡すことができます。

応用として、スタイルシートの読み込みタグの出力をするフィルターを連結させることができます。

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

上記のように書くと、shop.cssのurlがstylesheetタグに渡された状態の、stylesheetタグを出力することができます。

asset_img_url

テーマの「assets」フォルダにある画像のアセットURLを返します。また、asset_img_urlは画像サイズパラメータを受け取ります。

{{ 'logo.png' | asset_img_url: '300x' }}

//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_300x.png?42

上記のように、asset_img_urlは画像サイズをパラメータとして受け取ります。

img_url

戻り値として、画像のURLを返します。また、画像のサイズをパラメーターとして受け取ります。

また、以下のオブジェクトでimg_urlを用いることができます。

product
variant
line item
collection
article
image

img_urlフィルターの後には、使用する画像のサイズを入力して下さい。また、もとの画像のサイズよりも小さいサイズを指定した場合は、Shopifyは画像を拡大縮小して表示します。

画像サイズを指定しない場合は、フィルターは（100 x 100）の画像を返します。

{{ product | img_url: '100x100' }}
{{ variant | img_url: '720x720' }}
{{ line_item | img_url: '1024x' }}
{{ product | img_url }}

上記のようにすると、オブジェクトの画像のURLを取得することができます。

このように、フィルターはかなり多くあるので、詳しくは別の記事で解説したいと思います。

終わりに

今回の記事を最後まで読んで頂きありがとうございました。

Shopifyで重要なのはフィルターをどう使うのかということと、オブジェクトをどう使うのかという部分です。

その辺りは、また別の記事にまとめるので、楽しみにして下さい。

Shopify アプリのご紹介

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

Shopifyをカスタマイズ？Liquidの基本構文を解説！