Liquid とは? テンプレートタグの使い方。Shopifyのカスタマイズ。

Liquidとは、Rubyベースのテンプレートエンジン

Shopifyのコードを触ってみたいが、どうやって触るんだろう?
ということで、ちょっと調べてみたのですが、Liquidというのは、「Shopifyによって作成され、Rubyで書かれたテンプレート言語」のようです。
とは言ってもちょっとプログラム出身ではないので、しっくりきませんが。。

WordPressで言えば、テンプレートタグそのものがそれにあたるようですね。
このテンプレートタグを使用すると、様々な複雑な処理が簡単にできるようになりそうです。
とは言ってもタグがどのような種類があって、どのような処理や書き方をするのでしょうか?

今日は、初めてなので、まずは、よく使いそうであろうものから試してみました。

画像を表示する(asset_img_url)

まずは、画像の表示をしてみます。
あらかじめ、assetsフォルダに画像をアップロードしておきましょう。


//INPUT
{{ '画像名.png' | asset_url | img_tag }}

 

というようなタグがありますので、これが出力されると、


//OUTPUT


のように画像タグが出力されます。

リンクの設定をする

基本的なHTMLリンクを生成する

次は、リンクを設定してみます。
テキスト・リンク先URL・title要素を設定します。


//INPUT
{{ 'Shopify' | link_to: 'https://www.shopify.com','A link to Shopify' }}

と入力すると、

 
//OUTPUT
Shopify
 

と出力されます。

TOPページへのリンク

TOPページへのリンクを設定してみます。

 
//INPUT
{{ routes.root_url }}
 

と入力すると、

 
//OUTPUT
リンクテキストや画像
 

と出力されます。

ショッピングカートへのリンク

ショッピングカートページへのリンクを設定してみます。

 
{{ routes.cart_url }}
 

と入力すると、

 
カートをみる
 

と出力されます。

サイト内の各ページへのリンクを貼るためのタグは他にも色々あるようなので、また後日紹介していきたいと思います。

CSSを読み込む(asset_url)

次に、CSSファイルを読み込んでみましょう。

 
//INPUT
{{ 'CSSのファイル名.css' | asset_url | stylesheet_tag }}
  

とするとCSSが読み込まれますので、任意のファイル名に書き換えて使用します。

 
//INPUT

 

Javascriptを読み込む。(asset_url)

 
//INPUT
{{ 'Jsのファイル名.js' | asset_url | script_tag }}
  

 
//OUTPUT    

のようになります。

liquidファイルをインクルードする

下記のような記述をすると、任意のliquidファイルをインクルードすることができます。
snippetsフォルダ内にあるファイルは、

 
{% include 'parts-name' %}
 

と記述すると、インクルードされます。

また、headerやfooter等、sectionsフォルダ内にあるものは、

 
{% section 'header' %}
 

と記述することで、インクルード可能になります。

まとめ

取り急ぎ、初めの一歩という感じのタグを紹介させていただきました。
慣れてきたら、色々な処理方法を紹介していきたいと思います。
下記は、ShopifyのLiquidのチートシートになりますので、気になる方は参考にしてみてください。

KEiSoN★

インターネット・ITに将来の可能性を感じ、デジタルハリウッドオンラインスクールで、webデザインを学ぶ。
2007年よりECカート開発会社にてwebディレクター/webデザイナーとして従事。マネージャー職も務める。
2009年1月よりフリーランスのwebディレクター/Webデザイナーとして独立し、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばすなど、写真や映像のクリエイティブにも触れる。
2015年11月にスカイゴールド株式会社として法人化。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発・オウンドメディア構築が得意。
国内外の様々な価値観・デザインに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。