Recruit

【Shopify③】Liquidの使い方

Blog

こんにちは。この世から1ウイルス残らずコロナを駆逐したい、takemotoです。

Shopifyブログ第3弾ということで、今回はliquidのコードの書き方についてご紹介します。

今までのブログはこちらです。

https://www.evoworx.co.jp/wp3/blog/shopify-theme-kit/

https://www.evoworx.co.jp/wp3/blog/shopify-about-file/

基本的なliquidの使い方

liquidは条件分岐や繰り返し構文、現在のページ情報からページごとに異なるコンテンツを表示させることが可能です。

基本的な構文は{%%}と{{}}があり、{%%}で処理を記述、{{}}はVueでも使用しているMustache構文で、値を出力します。
主に三つの機能があります。

{% Tags %}

if文やfor文、変数の定義などのロジックに使用します。

if文

<!-- customer.name がtakemotoの時 -->
{% if customer.name == 'takemoto' %}
  takemotoさん
{% elsif customer.name == '匿名' %}
  匿名
{% else %}
  その他
{% endif %}

takemotoさん

変数

JavaScriptではvarやconstで変数を定義しますが、liquidではassignを使用します。

{% assign company = 'EVOWORX' %}

上記の場合、変数「company」に文字列の「EVOWORX」が格納されています。

演算子

if文で使う演算子は基本的に他の言語と同じです。

== 等しい
!= 等しくない
> より大きい
< より小さい
>= 等しいかより大きい
<= 等しいかより小さい
or または
and および
contains 文字列内の一部の文字列を含む、または配列内の要素を含む

余白調整

liquidでは、タグ構文{{-、-}}、{%-、-%}にハイフンを含めることで、タグの余白を取り除く事ができます。

下記では、Hello, world!とWelcome back, takemotoの間に、{% if customer %}分の空行が入っています。

Hello, world!
{% if customer %}
Welcome back, {{ customer.first_name }}
{% endif %}

↓

Hello, world!

Welcome back, takemoto

liquidタグにハイフンを含めることで、レンダリングされたテンプレートから生成された空行を取り除く事ができます。

Hello, world!
{%- if customer -%}
Welcome back, {{ customer.first_name }}
{%- endif -%}

↓

Hello, world!
Welcome back, takemoto

Tagsに関しての詳細はこちらをご覧ください。

{{ objects }}

オブジェクトや文字列など、データの出力を行います。

例）基本的な使い方

<h4>{{ product.title }}</h4>
<p>{{ product.price }}</p>

上記のコードは、以下のように変換されます。

<h4>商品名</h4>
<p>商品金額</p>

例）if文と合わせた使い方

下記のコードでは、TOPページ(index)はstyle.css、カートページ(cart)ではcart.cssが読み込まれます。

{% if request.page_type == 'index' %}
 {{ 'style.css' | asset_url | stylesheet_tag }}
{% else if request.page_type ==  'cart' %}
 {{ 'cart.css' | asset_url | stylesheet_tag }}
{% endif %}

objectsに関しての詳細はこちらをご覧ください。

{{ Filters | Filters }}

filtersはオブジェクトや変数の出力内容の変更に使用します。filtersはオブジェクトと同じく{{ }}を使いますが、filtersはさらに|を使って表します。

{{ 'EVOWORX' | link_to: 'https://www.evoworx.co.jp/wp3', 'evoworxコーポレートサイトへのリンクです' }}
↓
<a href="https://www.evoworx.co.jp/wp3" title="evoworxコーポレートサイトへのリンクです">EVOWORX</a>

上記のコードでは、link_to:でURLを指定しています。

{{ 'evoworx_logo.png' | asset_url | img_tag }}
↓
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/evoworx_logo.png?v=1384022871" alt="" />

上記のように、複数のfilterを使用する事もできます。

filterに関しての詳細はこちらをご覧ください。

おまけ

コメントアウト

liquidで使用するコメントアウトは下記になります。

{% comment %} 

{% endcomment %}

handle

WordPressの「固定ページ」に当たるページを、条件分岐で分けたい場合に使用します。

例えば、example.com/pages/test のページだけに特定のコードを反映させたい場合、以下のように書きます。

{% if page.handle == 'test' %}
// test のページのみ表示するコンテンツ
{% endif %}

まとめ

Shopifyは公式ドキュメントがしっかりしてるのが良いですね。不明点は日本語フォーラムで質問することもできます。

Shopify素敵…！と思った方は、毎月$29を捧げよ！
※Shopify Partnersに登録すれば無料で試せます

では！

参考サイト

Return back

Recommend

Contact Us