Shopify Liquid  の覚書 Liquid言語ってどんなの?

LiquidはShopifyのために作られた専用のテンプレート言語だそうです。

テンプレート言語とは?

Webサイトのデザイナーや開発者は、テンプレート言語を使って、複数のページで同じ内容を持つ静的コンテンツと、ページごとに変化する動的コンテンツを組み合わせたWebページを構築することができます。テンプレート言語を使うと、ウェブページのレイアウトを定義する静的な要素を再利用しながら、Shopifyストアのデータを動的にページに反映させることができます。静的要素はHTMLで記述され、動的要素はLiquidで記述されます。ファイル内のLiquid要素はプレースホルダーとして機能します。ファイル内のコードがコンパイルされてブラウザに送信されると、LiquidはテーマがインストールされているShopifyストアのデータで置き換えられます。

要するに、商品などのデータは価格など一つ一つ違うから、それを定型文に当てはめるために使えるという感じです。

例えば

商品名△△△△

値段¥○○○

○○○の部分を

データベースから抜き出して商品ごとにとっかえたりできるという感じです。なので一度設定すれば、たとえ商品が1000個あって、商品ごとにページを作らなくても大丈夫になるという感じ。

Liquidの文法構文

伝統的なプログラミング言語と同様に、Liquidは構文を持ち、変数と相互作用し、出力や論理などの構成要素を含みます。その読みやすい構文のため、Liquidの構造は認識しやすく、HTMLと区別することができます。{{ }}は出力を表し、{% %}は論理と制御フローを表します。

HTML とかだと <> と</>で区切るけど、Liquidでは{{}} と {%%}の二種類で区切るってことです。

HTML → <h1>見出し1</h1> <a href=“”> リンク先</a>

Liquid → {{product.title}}    {% for in collection%} {% endfor %} 

オブジェクト

Liquid のオブジェクトは{{}}で囲んで表記します。{{}}の中に書かれたものはShopify管理画面で入力したものを出力表示します。

たとえば商品のタイトルだったら。

{{ product.title }}

{{ product.price }}

でサイト上には

最新ワイヤレスヘッドフォンAT45

 ¥2,980

などといった具合に。

タグ tag

タグは{{%%}で囲んで表記。タグの中は if とか forループとかが入って直接サイトに表示される要素でなくて条件などで表示するための司令を出す感じです。

  {% if product.available %}

  <h2>価格 ¥980</h2>

  {% else %}

  <h2 class=”sold-out”>ごめんない、売り切れです。</h2>

  {% endif %}

これだともし商品が販売できる状態だと

価格¥980

と表示されるけど、そうでない場合{% else %}で

ごめんなさい、売り切れです。

と表示されます。

フィルター Filter

フィルターは 出力させるものを変化させるのに使います。 {{}}の中で囲んだ出力させる要素を |で区切って書きます。

公式の例だと

  {{ ‘hello, world!’ | capitalize }}

hello, world は全部小文字ですが |のあとにcapitalize(英語で最初を大文字にするっていう意味)とフィルターを使っているので。

Hello, world

と表示される。

こんな感じに複数組み合わせることも。

  {{ ‘hello, world!’ | capitalize | remove: “world” }}

この例だと、

‘hello, world!’ を最初大文字にして、”world”を取り除いて という意味。

なのでストアには

Hello, !

とだけ表示される感じです。

Filterの種類はは覚えきれないほどたくさんあるのでまた別の機会に。

参考サイト 

https://shopify.dev/concepts/shopify-introduction

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top