copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2021/06/18

【Shopify③】Liquidの使い方

Written by Yurie Takemoto

  • shopify

INDEX

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

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

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

    【Shopify①】ローカルで開発環境を構築する方法と使い方

    【Shopify②】テーマファイルの構造と解説

    基本的な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', 'evoworxコーポレートサイトへのリンクです' }}
    ↓
    <a href="https://www.evoworx.co.jp" 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に登録すれば無料で試せます

    では!

    参考サイト

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View