1. TOP
  2. Shopify
  3. 【Shopify】動的な情報を出力できるオブジェクトとプロパティについて - #05
詳しくはこちら
Shopify
 | 

【Shopify】動的な情報を出力できるオブジェクトとプロパティについて - #05

前回の記事では、liquidの基本的な書き方を紹介しました。

今回は、Objects{{ ○○ }}で商品名や値段、商品の一覧などの動的な情報を出力する方法を解説します。

そのためにまず、オブジェクトとプロパティについて解説します。

 

■バックナンバー

目次

オブジェクトとプロパティとは

オブジェクトとは、情報が入っている箱のようなイメージです。

それに対してプロパティは、オブジェクトという箱の中のモノというイメージです。

 

オブジェクトは「商品情報」「コレクション（カテゴリー）」「ユーザー情報」「カートの中身」などいくつも種類があります。

 

プロパティはオブジェクトによって、存在する、存在しないが分れます。

例えば、「商品名」というプロパティは、「商品情報」オブジェクトには存在しますが、「ユーザー情報」オブジェクトには存在しません。

 

ちなみに、「商品情報」オブジェクトには、以下のようなプロパティが入っています。

  • 商品名
  • 値段
  • 説明文
  • カテゴリー
  • タグ
  • 商品詳細ページのURL

 

このように、「オブジェクト」と「オブジェクトのプロパティ」を用いることで、動的な情報をサイト上に表示できます。

 

また、公式ドキュメントではオブジェクトの中のプロパティのことを「オブジェクト」と呼ぶ場合もあります。

これはプロパティの中にさらにプロパティが存在する場合があるからだと思います。

以下では、「商品一覧」はオブジェクト、「商品カテゴリー」は商品一覧のプロパティになります。

しかし、見方によっては「商品カテゴリー」というオブジェクトがあり、その中に「商品詳細」プロパティがあるとも言えます。

なので、プロパティはプロパティでもあるしオブジェクトでもあるということになります。

商品一覧
└商品カテゴリー
­ └商品詳細
­ ­ └商品名
­ ­ └値段
­ ­ └画像
­ ­ ­ └画像A
­ ­ ­ └画像B

※こちらは私個人の見解なので間違っていたらスミマセン...

オブジェクトの呼び出し方

呼び出し方

呼び出し方は至ってシンプルです。

objects.properties

このように、オブジェクトとプロパティをドットで繋げるだけです。

 

プロパティは以下のように複数繋げることもできます。

objects.properties.properties

オブジェクトの呼び出せるページと呼び出せないページ

オブジェクトの種類によって、「呼び出せるページ」と「呼び出せないページ」があります。

また、コード上のfor文の中で呼び出すオブジェクトもあります。

さらに、「全てのページで呼び出せる」グローバルオブジェクトも存在します。

 

ややこしいですね・・・。

 

簡単にまとめると、オブジェクトは種類によって、「呼び出せる場合」と「呼び出せない場合」があります。

 

少し例を用意しました。

 

page_titleは、ページのタイトル情報を持っています。

これはグローバルオブジェクトに属するので、全てのページで呼び出せます。

見出しや<title>タグで使いそうなオブジェクトですね。

 

product.titleは、商品名の情報を持っています。

商品詳細ページで{{ product.title }}と書けば商品名が表示されますが、TOPページでこのコードを書いても表示されません。

これは、TOPページがproductオブジェクトの情報を持っていないからです。

 

このように、呼び出すオブジェクトがそのページに存在すれば当然使えますが、存在しなかったら使えません。

オブジェクトの名前や仕様の調べ方

「商品名を出力したい！...けどオブジェクト名やプロパティ名が分からない...。」のような場面が必ず出てきます。

このような場合、以前紹介した公式ドキュメントやチートシートを使いましょう。

チートシートで、出力したい情報を英語で検索して、さらに細かく調べたい場合は公式ドキュメントを使う。

この方法で、オブジェクトやプロパティの名前や仕様は簡単に調べられます。

Stackoverflowを使う

Stackoverflowとは、海外のエンジニア向けの質問サイトです。

日本でいうTeratailのような感じです。

この質問サイトで調べる方法もあります。

 

調べる際は「liquid」と「shopify」の2つのタグを検索ワードに含めて検索しましょう。

「liquid」と「shopify」の2つのタグを含めないと、思い通りの検索結果が返ってきません。

 

検索時にタグを設定する方法は、[タグ名]のように検索ワードに含めるだけです。

なので、以下のように検索ワードを入力して検索をすればOKです。

[liquid] [shopify]ここに検索したいワード

 

ちなみに、以下のURLをブックマークしてアクセスすれば、最初から「liquid」と「shopify」の2つのタグが検索ワードに設定されます。

https://stackoverflow.com/questions/tagged/liquid+shopify

まとめ

オブジェクトとプロパティについて理解できたでしょうか？

この記事の内容まで理解できれば、liquidのコードをある程度は理解できるはずです。

 

公式ドキュメントやチートシートを利用すれば、調べたいオブジェクトやプロパティは必ず見つかります。

公式ドキュメントは全部英語ですが、Google翻訳などを使えば意外と理解できます。

 

次回は、実際にオブジェクトを使って商品の情報などを出力する方法を解説します。

 

■バックナンバー

関連記事