【Shopifyテンプレート言語】Objectってなに?【Liquid】

こんにちは、たかぼー(@taka_forward)です。

昨日の記事でLiquidについて紹介したので、今日は3大要素の1つ:Objectについて詳しく紹介していきます。

たかぼー

Objectについて紹介していきますよ〜!

<この記事を読むことのメリット>
① Liquidについて詳しく知れる
② Objectについて詳しく知れる
② Shopifyのテーマ開発の具体的なイメージがわく

Objectとは?

コードを動的に出力する際にかかれるもので、Global Objects, Content Objects, Other Objectsの3つに分類されます。表記方法は「Shopifyで決められた変数.(ドット)プロパティ」です。

Shopifyで決められた変数(=オブジェクト)とは

Shopifyで決められた変数は、Liquid cheat sheetで青色の背景で記載されているもので、shop, customer, articleなどです。変数と聞くと「なんだか難しそう」というイメージですが、「みたら大体わかる」ので1回cheat sheetをご覧ください。

※それぞれのオブジェクトについての解説も今後ブログの記事にしていきます。

プロパティとは

プロパティは表記によって2種類に分類されます。単数形か複数形かです。

単数形の場合

この場合は単純にある一つの値を動的に出力します。例えば、

{{ product.description }} … 製品の詳細を表示するときに書くコード

これを書けば、管理画面に登録した製品の詳細文章が反映される、ということになります。

(※9割程度は単数形です。体感ですが)

複数形の場合

この場合はそれ自体に複数の値を持っているので、{% for … %}のロジックと一緒に使用することで出力ができます。例えば、

{% for collection in product.collections %}
  {{ collection.title }}
{% endfor %}

と書くと、コレクション(日本語でいうカテゴリー)のタイトルを全て表示するという動作が起こります。2行目のループ内は一つづつ動作が繰り返されるので、単数形であることに注意です。

(※英語のドキュメントを見ると、プロパティはattributeです。日本語のドキュメントがプロパティと記載しているので本記事でも合わせて記載しております。)

Global Objects

全てのテーマファイルで使用ができるオブジェクトです。ほぼ全てのオブジェクトがこれに分類されます。

Content Objects

テンプレートやセクションファイル、Shopifyアプリを読み込むために必要なオブジェクトです。

3つしかないので紹介します。

{{ content_for_header }}

Shopifyのアプリ(WordPressでいうプラグイン)を使うのに必要なスクリプトやGoogleアナリティクスや、Shopifyアナリティクスを読み込むためにあるオブジェクトです。「theme.liquid」<header>タグ内に必ず記載するものです。

※Shopifyは管理画面からGoogleアナリティクスとFacebookピクセルを登録するメニューがあります。

※Shopifyアナリティクスとは、管理画面から売り上げやサイトを訪問した人が、どのデバイスを使って、どこからアクセスをしたか、購入のリピート率はどれくらいか、などがわかるツールです。

{{ content_for_index }}

お客さんがテーマを編集してサイト構築をする際に使用するオブジェクトです。「templates/index.liquid」ファイルの<body>タグ内に記載します。

これは、トップページを全て、ノーコード(サイト上のカスタマイズのみ)で作る場合に使われます。

※ちなみにですが、Debutテーマだとtemplates/index.liquidファイルは、 {{ content_for_index }}しか書いてありません。(自作テーマの場合はindex.liquidにトップページのコーディングデータを入れますが、Shopifyはノーコードでホームページが作れるため、テーマはほとんどこれなのではないでしょうか…)

{{ content_for_layout }}

それぞれのページで作成したテンプレートファイルを読み込みます。というオブジェクトです。「theme.liquid」ファイルの<body>タグ内に必ず記載するものです。

トップページであれば、theme.liquid→index.liquid(トップページに対応するテンプレートファイル)、商品の個別ページだったら、theme.liquid→product.liquid(商品の個別ページに対応するテンプレートファイル)の順で表示されるので{{ content_for_layout }}がそれぞれ、index.liquid/product.liquidに対応している。ということになります。

それぞれのテンプレートファイルの対応については、こちらの記事を参照してください。

Other Objects

特定の状況下で使用ができるものです。(2つしかないので紹介します。)

additional_checkout_buttons

外部サイトに飛んで決済をしてもらう場合(例:Apple payやGooglepayなど)が設定されているかどうかを判断する時に使います。設定があればtrueを、なければfalseを返します。

{{ content_for_additional_checkout_buttons }}

外部サイトでチェックアウトするボタンを出力します。

カートページ(決済情報を入力する前に注文商品の数量と金額を確認する画面)やチェックアウトページ(決済時に個人情報を入れる画面)で2つセットで使うことが多いです。

{% if additional_checkout_buttons %}
  <div class="additional_checkout_buttons">
{{ content_for_additional_checkout_buttons }}</div>
{% endif %}

これをかくとチェックアウトページでこのようになります。

チェックアウトページの編集は、Shopify PlusプランでないとLiquidコードの変更ができませんのでお気をつけください。

まとめ

ここまでオブジェクトについて紹介しました。

詳しく知りたい方は、公式のドキュメントを、他にどんなオブジェクトがあるか知りたい方はCheat sheetをご覧ください。

Shopify公式ドキュメント
Shopify Cheat Sheet

この記事を書いた人

たかぼー

1993年、東京都生まれ。大学卒業後、メーカーの海外営業を経験し、「日本製のものが1人でも多くの人に使われて欲しい」という思いを形にするためにShopifyを使ったECサイト制作から運用までのサポートをしています。これからECサイト制作を始める人が「楽しく」作ってお客様の売り上げに貢献できるよう、知識のシェアをしているブログです。