1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Shopify Liquid言語

Last updated at Posted at 2020-11-05

Liquid言語について

Rubyをもとに作られているShopify独自の言語。:ring::sparkles:
HTMLでいつも変わらない部分(静的)が書かれて、場合によって変わる部分(動的)はLiquidで書かれる
{{ }}で区切って出力を表す。PHPのecho的なやつ
{% %}でロジックと制御フロー・・・if文とかforはこれで書く

オブジェクト

管理画面からデータを出力。オブジェクトは各プロパティのリストを持ってる。
たとえば、product(製品)オブジェクトなら製品1、製品2・・・などのリストを持っていて、それぞれに設定されているtitleとかを{{product.title}}で表示できる。
Shopifyのストア内で同じテンプレートをつかっていたとしても、それぞれのtitleが出力される。

タグ

・コントロールフロータグ
・イテレーションタグ
・テーマタグ
・バリアブルタグ 変数タグ
などがある

フィルター

数値、文字列、オブジェクト、変数の出力を変更するために使用され、
{{ | }} で表される(パイプ文字)
例えば、capitalize (大文字にする)remove(外す)
capitalizeは1文字目を大文字にしてくれる。:point_up_tone2:

{{ ‘hello,world!’  | capitalize}}   →(出力結果) Hello,world!
{{ ‘hello,world!’  | capitalize  | remove: "world" }}   →(出力結果) Hello,!

他にもいろいろなフィルターがある。

contains

特定の文字列を含んでいるか検索する。:eyes:
配列の中にあるオブジェクトに対しては検索かけられない:no_good_tone1:

{% if 	customer.email contains “@gmail.com” %}
<h1>こんにちはgmailユーザー!</h1>
{% endif %}

参考

Shopify Developers-Getting started with the Liquid markup language-
Shopify公式さん(英語)

おまけ

続編として、liquidのasset_urlフィルタについてを書いたのでよろしければ。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?