liquidテンプレートの説明

liquid.mov

概要

• Shopifyなどで使われているLiquid template languageを用い、変数の展開やif文などを実現する
• 詳細は下記、ただし下記記載の構文が全て使えるわけじゃ無い。recoreで使える構文は次のセクションから随時記載するので、その構文がどういうものなのかを調べる時に下記URLを参照することを推奨 https://shopify.github.io/liquid/

変数

• 変数を展開したい場合は {{ }} で囲む

  {{ product.attribute.jan }}
  
  ちなみにスペースの有無は関係ない（下記でもOK）
  {{product.attribute.jan }}
  

• 使える変数は Ctrl + Space を押したときに出るサジェスト内で、右側が string か array になっているもの

フィルタ

• 変数とフィルタをパイプで繋いで使う（下記はPD画像URLをカンマで繋いだものが出力される）

  {{ product.image_urls | join: ',' }}
  

• 使える変数フィルタはサジェスト内の右側が filter になっているもの（今のところ、join, map, split, uniq の4種類）

構文

• if文などの構文は {% %} で囲む（下記は在庫画像があれば在庫画像URLだけを、なければ商品画像URLを出力する）

{% if item.image_urls.size > 0 %}
{{ item.image_urls | join: ',' }}
{% else %}
{{ product.image_urls | join: ',' }}
{% endif %}

• 使える構文はサジェスト内の右側が snippet になっているもの（今のところ、if, elsif, else, for, break, continue, assignの7種類）

比較演算子

• https://shopify.github.io/liquid/basics/operators/

配列型で比較演算子を使う場合の注意点

• 配列型との比較には == ではなく contains を使う
  • 下記の例はカテゴリIDに75が含まれていたら、という意味になる

{% if product.category.ids contains 75 %}
aaa
{% endif %}