Open2021/11/01にコメント追加2

Shopifyで使用されているLiquidについてのメモ

Shopifyは近年、コロナウイルスをきっかけに日本での導入が進んでいるECサイトです。Shopify導入の事例として、コアラマットレス、レッドブル、ゴーゴーカレーなどが挙げられる。

Shopifyではサイトを表示するためのテーマが存在しており、WordPressで例えるとCocoonやJin、SANGOのようなイメージ。

Shopifyのテーマは、Liquidで構成されている。LiquidはShopifyによってRubyを用いて開発されたテンプレート言語であり、html, css, javascriptを混ぜ合わせたような機能を実現できる。

Liquidファイルの中では、liquidで定義した変数をJavaScriptの変数に渡す事ができる。簡単な例であるが、以下のコードでは5の数値をJavaScriptの変数に渡している。

example.liquid

{% assign number = 5 %}

<script>
    const js_number = {{number}};
    console.log(js_number)
</script>

ちなみに、JavaScriptの値をliquidに渡すことはできない。

次回は、liquid特有の3つの機能（オブジェクト、フィルター、タグ）についてまとめる