こんにちは、たかぼー(@taka_forward)です。
昨日の記事でLiquidについて紹介したので、今日は３大要素の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をご覧ください。
※それぞれのオブジェクトについての解説も今後ブログの記事にしていきます。
プロパティとは
プロパティは表記によって２種類に分類されます。単数形か複数形かです。
単数形の場合
この場合は単純にある一つの値を動的に出力します。例えば、
{{ product.description }} … 製品の詳細を表示するときに書くコードこれを書けば、管理画面に登録した製品の詳細文章が反映される、ということになります。
（※9割程度は単数形です。体感ですが）
複数形の場合
この場合はそれ自体に複数の値を持っているので、{% for … %}のロジックと一緒に使用することで出力ができます。例えば、
{% for collection in product.collections %}
{{ collection.title }}
{% endfor %}と書くと、コレクション（日本語でいうカテゴリー）のタイトルを全て表示するという動作が起こります。2行目のループ内は一つづつ動作が繰り返されるので、単数形であることに注意です。
（※英語のドキュメントを見ると、プロパティはattributeです。日本語のドキュメントがプロパティと記載しているので本記事でも合わせて記載しております。）
Global Objects
全てのテーマファイルで使用ができるオブジェクトです。ほぼ全てのオブジェクトがこれに分類されます。
Content Objects
テンプレートやセクションファイル、Shopifyアプリを読み込むために必要なオブジェクトです。
３つしかないので紹介します。
{{ 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つしかないので紹介します。）
外部サイトに飛んで決済をしてもらう場合（例：Apple payやGooglepayなど）が設定されているかどうかを判断する時に使います。設定があればtrueを、なければfalseを返します。
外部サイトでチェックアウトするボタンを出力します。
カートページ（決済情報を入力する前に注文商品の数量と金額を確認する画面）やチェックアウトページ（決済時に個人情報を入れる画面）で2つセットで使うことが多いです。
{% if additional_checkout_buttons %}
<div class="additional_checkout_buttons">
{{ content_for_additional_checkout_buttons }}</div>
{% endif %}これをかくとチェックアウトページでこのようになります。
チェックアウトページの編集は、Shopify PlusプランでないとLiquidコードの変更ができませんのでお気をつけください。
まとめ
ここまでオブジェクトについて紹介しました。
詳しく知りたい方は、公式のドキュメントを、他にどんなオブジェクトがあるか知りたい方はCheat sheetをご覧ください。
