Liquid基礎(オブジェクト)

【Shopify】Liquid基礎~オブジェクト~

前回はLiquidの重要な機能をざっくり解説しましたが、今回はオブジェクトについてもう少し深堀りしていきます。

参考資料

公式ドキュメントやチートシートを精読することが重要

今回参考にする資料は以下の公式ドキュメント、チートシートです

Shopify 公式ドキュメント(オブジェクト)
Shopify 公式(チートシート)

このリンク先を必要なタイミングで精読することを繰り返すことで、自然と理解が進むと思います。今回はオブジェクトの中でも、よく使うものをピックアップして深堀りします。

オブジェクト一覧とよく使うもの

公式ドキュメントを見ると、多種多様のオブジェクトが記載されていますが、よく使うもの、あまり使わないものと様々あります。よく使うものを1つ理解すると、他のオブジェクトの理解も進みやすいです。

オブジェクト一覧

チートシート(オブジェクト1) チートシート(オブジェクト2)

100個以上あるので、すべてを覚えようとする必要はありません。まずはよく使うものからしっかりと身につけましょう!覚えるというよりも、どんなものがあるかを把握することが重要です。適宜、チートシートを見ることを心がけましょう。

よく使うオブジェクト

個人的によく使っているオブジェクトを選出してみました。本当は倍くらいありますが、かなり長くなってしまうので15個に絞りました。
1.address(顧客の住所や注文の配送先住所などの住所)
2.article(ブログ内の記事、またはブログ投稿)
3.block(ブロックの内容)
4.blog(ストア内の特定のブログ)
5.cart(カートの情報)
6.collection(コレクションの情報)
7.customer(顧客情報)
8.forloop(ループに関する情報)
9.handle(ハンドル)
10.image(画像情報)
11.page(ページ情報)
12.product(商品情報)
13.section(セクションの内容)
14.template(テンプレート情報)
15.variant(バリエーション情報)

productを例に深掘りしてみる

それでは、オブジェクトの中でも頻出のproductについて、少し深掘りしてみます。

productのプロパティについて

プロダクトオブジェクトには以下のプロパティが紐づいており、{{ オブジェクト名.プロパティ名 }}と記述することで、データを出力することができます。 チートシート(オブジェクト3)

約40個のプロパティが紐づいているので、すべて覚えるのではなく、商品情報で出力したい情報があれば、適宜ドキュメントを確認する姿勢が重要です

productプロパティの例

プロパティのいくつかをざっくり解説します

product.available

購入可能かどうかでtrue/falseのいずれかを出力します。

product.collections

商品が属するコレクションの情報を出力します。

product.compare_at_price(_max,_min,_varies)

商品の価格情報を出力します。Shopifyでは割引前の価格やバリエーション別で異なる価格を設定しているので、どの価格が必要かを考えて使い分けます。

product.content(description)

商品の説明文を出力します。contentとdescriptionは同義です。

product.handle

商品のハンドル名を出力します。

product.id

商品のidを出力します。

product.price(_max,_min,_varies)

商品の価格情報を出力します。どの価格が必要かを考えて使い分けます。

product.tags

商品に登録されているタグを出力します。

product.title

商品名を出力します


他にもいろいろプロパティはありますが、上記はよく使うproductのプロパティなので、覚えておくと便利です。

まとめ

今回のポイント

今回はオブジェクトについて、productを例に解説しました。自分が必要な情報をオブジェクトを活用して出力できるようになりましょう!

ブログに戻る