Shpifyのテンプレートを編集際に馴染みのないliquidという言語に出会うかと思います。他のプログラミング言語をかじった方でしたらすぐ理解できるかと思いますが、liquidなりの書き方のルールが決まっていたりするので、そのあたりをまとめました。
最低限の部分をまとめているので、Shopifyのテンプレートを触る前にサラッと目を通してもらえたらと思います！
liquidはHTML構文と処理を一緒に記載できる
PHPを書いてきた方だと馴染みが深いかもしれませんが、liquidもHTMLの文中にコードを直接書くことで処理や出力をさせることができるようになっています。
具体的には以下のような書き方ができるような感じです。
{% assign title = "タイトルが入ります" %}
<h1>{{ title }}</h1>処理の定義
処理（ロジック）を定義する方法としては以下のとおりです。波括弧とパーセントの中にliquidの処理を記載すれば実行されるような仕組みです。
（PHPで言うところでの<?php ?>をイメージしてもらうといいかもしれません。）
{% %}
変数の定義
変数の定義はassignを使って以下のように記載します。
{% assign title = "タイトルが入ります" %}表示
基本の書き方は以下になります。波括弧2つで囲むとサイト上に表示することができるようになります。
{{ "変数名" }}
上記のコードはHTMLの文中に直接記載しても動作させることが可能となっています。
条件分岐
条件分岐の書き方もPHPと似ています。
{% assign myName = "haniwa" %}
{% if myName == 'haniwa' %}
<p>わたしの名前は埴輪です</p>
{% endif %}elseifももちろん使えます。
{% if myName == 'haniwa' %}
<p>わたしの名前は埴輪です</p>
{% elsif myName == 'dogu' %}
<p>わたしの名前は土偶です</p>
{% else %}
<p>わたしの名前は何でしょう</p>
{% endif %}ループ
collectionsのアイテムの数だけループさせるような処理となります。
{% for collection in collections %}
{{ collection.title }}
{% endfor %}collectionsはグローバルオブジェクトでどのファイルからも参照することが可能なのでループの挙動確認等で使って見ください！
フィルター
変数にパイプでつなぐとフィルターをかける仕組みがあります。そしてliquidだと頻繁に使われる記述なので覚えておきましょう。
assets内のURLを取得
asset_urlでフィルターをかけることで、対象のassetsフォルダ内にファイルへのURLを返却できるようになります。{{ 'application.js' | asset_url }}
出力は以下のような感じです。
//cdn.shopify.com/s/files/1/0338/2608/5887/t/2/assets/application.js?v=7787382599044311731スクリプトタグで出力
先ほどのURLに対してscript_tagでフィルターするとHTMLタグとして出力させることが可能です。
{{ 'application.js' | asset_url | script_tag }}以下のような出力となります。
<script src="//cdn.shopify.com/s/files/1/0338/2608/5887/t/2/assets/application.js?v=7787382599044311731" type="text/javascript"></script>スタイルシートの出力
スクリプトタグ同様にスタイルシートの読み込みタグの出力もフィルターで行えます。{{ 'application.sass.css' | asset_url | stylesheet_tag }}
ちなみにscss.cssファイルは、Shopifyがsassファイルを解析して自動で生成してくれるファイルとなります。
画像の出力
画像の出力についても同様ですね。{{ 'sample.jpg' | asset_url | img_tag }}
金額の単位を追加
moneyでフィルターすることで管理画面で設定した通貨をフィルタリングができます。{{ 10000 | money }}
日本円の場合は¥100となります。
ちなみに、設定 → 一般設定のストア形式に従って変換されるようになります。
エスケープ
HTMLタグ等の文字をエスケープすることができるようになります。{{ "<p>test</p>" | escape }}
<p>test</p>と記載したものを<p>test</p>として変換するイメージです。
日付
日付のフォーマットを変更できます。{{ "2020-07-24" | date: "%Y/%m/%d" }}
各フォーマットの意味はこちらにまとまっているので書き換える際は参考にしてもらえたらと思います。
→ Class: Time (Ruby 2.7.1)
リンク
aタグで囲うリンクは以下のようにフィルターを使って指定ができます。{{ 'shopify' | link_to: 'https://www.shopify.com', 'A link to Shopify' }}
以下のように変換されて出力されます。
<a href="https://www.shopify.com" title="A link to Shopify" rel="nofollow">shopify</a>コメントアウト
{% comment %}と{% endcomment %}で囲うことでコメントアウトすることができます。
{% comment %}
コメント対象の文が入ります。
{% endcomment %}値の中身を確認したい場合
PHPだとvar_dump()で値の中身を確認することができました。特にオブジェクトについてはどういった値が入っているか確認したいケースもあるかと思います。そんなときはjsonフィルターを使って出力してあげることでオブジェクト変数の中身を確認できるようになるので、ぜひ使ってみてください。
試しにループでも使ったcollectionsの値を以下のように取得してみましょう。
{{ collections | json }}表示を確認してみるとJSON形式でオブジェクトの中身が確認できていることが分かります。
おわり
liquidの基本的な構文についてまとめてみました。基本的な処理の考え方はその他の言語と変わらないので理解しやすいかと思います。
実際はShopifyが生成するオブジェクトの中身の確認が頻発することが想定されるので、jsonでのフィルタリングの方法は重宝する気がします。
Shpifyのチートシートがめちゃくちゃ見やすいのでこちらも参考にしながら進めていってもらえたらと思います。
→ Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid
