ecforceのLiquidでよくみかけるものや使うものをまとめてみる(備忘録)

今回はecforceのLiquidでよくみかけるものや使うものをまとめていきます。
こちらの内容は順次更新していく予定です。

ルートパスの変数について

// パスを記述する場所では下記変数を仕様
{{ file_root_path }}

// 使用例
<link rel="stylesheet" href="{{ file_root_path }}/foo/bar/aaa.css">
<script src='{{ file_root_path }}/test.js'></script>
<img src="{{ theme_file_root_path }}/assets/images/hoge.jpg">

// 実装後に下記のように変換される(hogeはドメインなどによって勝手に変わる部分です)
<link rel="stylesheet" href="https://hoge/hoge/uploads/foo/bar/aaa.css">
<script src='https://hoge/hoge/test.js'></script>
<img src="https://hoge/hoge/assets/images/hoge.jpg">

このように対応はしますが、外部で読み込ませるCSSで画像を読み込ませたい場合は、相対パスで記述することが多いです。

if文について

「もし〜だったら、〜という表示をしたい」という場面が結構出てきます。
そんなときに使えるのがif文です。

// if文の型
{% if ここに任意の条件を記載 %}
  ここに処理内容を記載
{% endif %}

// if文の型(elseがある場合)
{% if ここに任意の条件を記載 %}
  ここにif文の処理内容を記載
{% else %}
  ここにelse文の処理内容を記載(if文の条件以外の場合の中身)
{% endif %}

// if文の型(else ifとifがある場合)
{% if ここにifの任意の条件を記載 %}
  ここにif文の処理内容を記載
{% elsif ここにelsifの条件を記載 %}
  ここにelsif文の処理内容を記載
{% else %}
  ここにelse文の処理内容を記載(if文、elseif文の条件以外の場合の中身)
{% endif %}

色々と記載していますが、
もしAだったらA、AじゃなくてBだったらB、AでもBでもなかったらCという感じで理解いただくといいのかなと思います。
ちょっとelsifの部分がJavaScriptと違っていてなれないところかもしれません。

if文の条件の書き方

// =を使う使用例
{% if order.device_variant == blank %}

// =とクォーテーション(ダブル、シングルのどちら可)を使う使用例
{% if order.device_variant == 'smartphone' %}
※のクォーテーションでも動きました

// =は使わずにシンプルに条件を記載
{% if order.scheduled_to_be_delivered_at %}

ポイントは「=」が2つであることだと思います。この辺がJavaScriptと若干異なる点だと思います。

また、この中で使われている意味不明な文字列は、実装するページによって使うものが変わってきます。
基本的にはデフォルトですでに割り当てられていますので、その記述をそのまま使っていくことになります。

機能を追加する必要がある場合に、テーマガイドを確認しながら進めていくイメージです。

unless文について

if文の逆になります。もし〜じゃなかったら、〜という表示をしたいという場合に使用します。条件の記述はif文と同じです。
下記では実際に使われている例を参考に挙げさせていただきます。

// スキップする商品を除いて出力したいとき
{% unless order_item.skip? %}
  商品名:{{ order_item.variant.name }}
  数量:{{ order_item.quantity }}個
{% endunless %}

for文について

繰り返しで処理をしたいときに使います。

// for文の型
{% for ecforce独特の型を掲載 %}
	ここに繰り返したい内容を記述
{% endfor %}

基本はデフォルトテーマに合わせて進めていきますので、「ecforce独特の型を掲載」の箇所については覚えなくてもいいのかなと思っています。

先ほどのif文同様、機能を追加したい場合にテーマガイドに沿って型を当てはめながら進めることになります。

「ここに繰り返したい内容を記述」こちらについても、ある程度デフォルトテーマで記載されているのですが、デザインカンプの内容によっては削除したり、順番を並び替えたり、新機能を追加したりといった対応が発生します。個人的にはカスタマイズが結構頻繁に起こる部分かなと思っています。

for文の使用例

// for文の使用例
{% for order_item in order.order_items %}
	商品名: {{ order_item.name_with_tax }}{% if order_item.variant.option_values_presentation %} ({{ order_item.variant.option_values_presentation }}){% endif %}
	商品コード: {{ order_item.product.number }}
	SKUコード: {{ order_item.variant.sku }}
	単価(税抜): {{ order_item.price }} 円
	数量: {{ order_item.quantity }}
	価格(単価×数量): {{ order_item.price | times: order_item.quantity }} 円
{% endfor %}

// 上記が出力されると下記のようなかたちで繰り返されて処理されます
商品名:商品A (サイズ:S 色:赤)
商品コード: P01
SKUコード: SKU01
単価(税抜): 1000円
数量: 2
価格(単価×数量): 2000円

商品名:商品B ※
商品コード: P02
SKUコード: SKU02
単価(税抜): 1000円
数量: 1
価格(単価×数量): 1000円

・・・続く

こちらの内容もデフォルトの型に沿って作ればOKですが、なかには表示数を制御したりしたい場合もあると思います。

for文での最大表示数を設定

// for文の任意の型の最後に「limit: 任意の数」を入れる
{% for 任意の型 limit: 任意の数 %}

// 実際の使用例
{% for order in orders limit: 3 %}

これにより最大数の制限ができるようになります。
ただ、いろんな案件をこなしている中で、制限してもかからない場合がありましたので、確実にできるという保証はありません。詳細がわかりましたら本内容を修正したいと思っています。

こちらで以上になりますが、Liquidは奥が深く、他にも様々なコードがたくさんあります。詳細は下記リンクで見てみてください。

個人的にはすべてを覚える必要はないと思っていますが、実務では上記で紹介したものが概ね理解して読めるようになれば、ある程度コーディングの実装はできるのではないかと思いました。ただサポート体制がある方が安心だと思います。

次回はいつになるかわかりませんが、もう少し踏み込んだ内容でネタができればお届けしたいと思っています。