Liquid基礎③テーマタグと変数タグ

今回はテーマタグ（テンプレートタグ）を使った他ファイルの呼び出し方、変数化するためのタグを中心に学びます。 どちらも、使いこなせると作業効率が大幅にアップしますよ。

テーマタグ

テーマタグやテンプレートタグと呼ばれるタグは、テーマの一部であるコンテンツの割り当て・レンダリングの指示が出来ます。

comment

commentタグは「レンダリングまたは出力しない」ことを指示します。 HTMLのコメントアウトと同じイメージです。

{% comment %}と{% endcomment %}で囲われたコードはレンダリングされません。 処理・表示させたくないコードを囲ったり、メモを残したりすることができます。

練習に書いたfor文（{% for %}から{% endfor %}）までをコメントで囲ってみましょう。

lesson2.liquid

{% comment %}
  {% for item in collections.all.products limit: 3 %}
    <h3>{{ item.title }}</h3>
  {% else %}
    <p>商品がありません</p>
  {%- endfor %}
{% endcomment %}

保存してプレビューを確認すると、商品名が表示されなくなります。

インラインコメント

Liquidタグ、{%と%}の内部では「#」をつけることで、行をコメント化することも可能です。

コメントタグを削除して、for,else,endforの前にそれぞれ「#」を付けてみましょう。

lesson2.liquid

{% # for item in collections.all.products limit: 3 %}
  <h3>{{ item.title }}</h3>
{% # else %}
  <p>商品がありません</p>
{%- # endfor %}

すると、for文のループが実行されないため、itemオブジェクトは得できません。 elseもスキップされるので、pタグの「商品がありません」だけが画面上に表示されます。

コメントを使って、以下のように何の処理をしているかを書くこともあります。 ファイル内の区切りとしても、わかりやすいですね。

lesson2.liquid

{%
  ###############################
  # 商品を3件表示
  ###############################
%}
{% for item in collections.all.products limit: 3 %}
  <h3>{{ item.title }}</h3>
{% else %}
  <p>商品がありません</p>
{%- endfor %}

render

renderタグは、テーマのスニペット（snippets）ディレクトリにあるファイルを読み込む時に使用します。

Shopifyテーマ（Dawn）に用意されている、アイコンを表示してましょう。

lesson2.liquid

{%  render 'icon-arrow' %}

アイコンが表示されていれば成功です。 よく使うものはスニペットファイル化しておくと、1行で呼び出せるので便利ですね。

renderの活用

renderタグではパラメータ（変数、with、for）を使うことで、スニペットの変数に値を入れることも出来ます。

例えば、“特集コレクション”セクションのファイルfeatured-collection.liquidには「render 'card-product'」という記述があります。 その下、カンマ区切りで、値を渡す変数がいくつか書かれています。

一番上の変数card_productの場合は、productオブジェクトが渡されています。

呼び出されるファイルであるcard-product.liquidの方を見てみましょう。 変数card_productを使って、商品のURLや画像を表示させています。

実際のコードは複雑ですが、やっていることは下図イメージの流れです。

セクションファイル内に書けば良いのに、まどろっこしい…と思われるかもしれません。 このように、わざわざファイルを別にして情報の受け渡しをするのは、card-product.liquidに書かれている“商品を表示するレイアウト”を他のセクション・他の条件でも使えるようにするためです。 検索結果で表示される商品など、同じcard-product.liquidを使って商品情報を表示させている箇所はいくつもあります。

renderを使って、表示させたい商品の情報を渡して呼び出すことで、柔軟な出力が出来るのです。 何回も同じコードを書く必要がなく、修正も1つのファイル（上の場合はcard-product.liquid）だけで済むので楽ですね。

変数タグ

Shopifyテーマで使われているliquidでは、assginとcaptureを使って変数や配列を定義することもできます。

assign

assignを使うと、=の右側にある値やオブジェクトなどを代入することができます。 書き方は以下のとおりです。

実際にlesson2.liquidで変数を定義して、使ってみましょう。 1行目に、以下のように書いてみてください。

lesson2.liquid

{% assign myshop = shop.name %}

shopオブジェクトのnameプロパティを、変数「myshop」と定義しています。

その下に書いてあるif文、pタグ内の「shop.name」を「myshop」に変更しても、表示が変わらなければ変数定義が出来ています。

capture

captureでは{% capture 変数名 %}から{{% endcapture %}}までの間に書かれたものを、すべて変数として割り当てることが出来ます。

captureタグの中には、html、liquidオブジェクト、liquidタグなんでも書き込めます。 htmlによるページレイアウト、liquidタグやオブジェクトを組み合わせたブロックを丸ごと格納できます。 関数に近いイメージです。

lesson2.liquidに書いたif文を、captureタグで囲ってみましょう。

lesson2.liquid

{% assign myshop = shop.name %}
{% capture shopname %}
  {% if myshop == "SKILLHUB" %}
    <!-- ショップ名がSKILLHUBの時に実行したい処理 -->
    <p>SKILLHUBのお店です</p>
  {% elsif myshop != blank %}
    <!-- それ以外のショップ名が登録されている時に実行したい処理 -->
    <p>{{ myshop }}</p>
  {% else %}
    <!-- どの条件にも当てはまらない時に実行したい処理 -->
    <p>ストア名は考え中です。</p>
  {% endif %}
{% endcapture %}

この状態で上書き保存して、ページ表示を見てみましょう。 {% capture 変数名 %}から{{% endcapture %}}の間は変数の定義と認識されます。 結果、今まで表示されていたストア名は表示されなくなるはずです。

{{ 変数名 }}で、変数に格納されている情報を表示できます。 追加してみましょう。

{{ shopname }}

コードを上書き保存して、表示を確認します。

元通り、ストア名が表示されていたら、変数「shopname」の呼び出し成功です。