今回からshopifyでよく使うオブジェクトやタグなどを少しずつ説明していこうと思います。

この記事では「product」オブジェクトを説明します。
商品情報の出力でよく使うオブジェクトなので重要度が高いオブジェクトです。

公式リファレンスを基に説明していきます。

productオブジェクト

productオブジェクトは商品詳細ページで{{ product.title }}とすれば商品名を出力できるなど商品情報が格納されているオブジェクトです。
商品一覧などで使用するときはcollectionオブジェクトと併用すれば、商品情報を取り出すことができます。商品一覧を出力する方法はコレクションごとの商品一覧を出力するをご覧ください。

product.available

商品が利用できるかどうかを、bool値で返してくれます。
商品管理画面で在庫の数が0以下、かつ、「在庫ポリシー」が「shopifyが在庫を追跡する」になっている場合にfalseを返します。

product.collections

商品が属してるコレクションを配列で返します。
以下のような書き方で、属しているコレクション名を全て出力します。

product.compare_at_price_max

バリエーションごとに金額が違う時に「定価」の金額で最も高い金額を返します。
shopifyでは商品管理画面に「価格」と「定価」の入力項目があります。「価格」が実際に販売される金額です。
割引表示をする際は割引前の価格が表示されることがありますが、その割引前の価格を入力するのが「定価」の項目といったイメージでいいと思います。
表示の際は{{ product.compare_at_price_max | money }}と記述するほうがいいです。

product.compare_at_price_min

バリエーションごとに金額が違う時に「定価」の金額で最も安い金額を返します。
表示の際は{{ product.compare_at_price_min | money }}と記述するほうがいいです。

product.compare_at_price_varies

「product.compare_at_price_max」と「product.compare_at_price_min」の金額違う時にtrueを返します。

product.content

商品管理画面の「説明」に保存した情報を出力します。
product.descriptionと同じです。

product.description

商品管理画面の「説明」に保存した情報を出力します。
product.contentと同じです。

product.featured_image

商品管理画面の登録画像で、featured_image（「画像」の項目で大きいもの）に設定している画像のURLを返します。
表示の際は<img src="{{ product.featured_image | img_url }}">と記述するほうがいいです。

product.first_available_variant

商品のバリエーションの中で利用できるバリエーションの一番目のバリエーションオブジェクトを返します。

「利用できるバリエーション」とは、バリエーションの在庫の数が1以上、または、「在庫ポリシー」が「在庫を追跡しない」になっている状態です。

product.handle

商品のhandleを返します。
商品ページのURLは「https://ドメイン/products/〇〇」となるのですが、この「〇〇」の箇所がhandleです。
商品管理画面では「ウェブサイトのSEOを編集する」で確認・変更できます。

product.has_only_default_variant

商品にバリエーションがないときに、trueを返します。

product.id

商品のIDを返します。
商品管理画面でURLが「https://ドメイン/admin/products/〇〇」になっていますが、この〇〇の箇所がIDです。

product.images

登録されている商品画像を配列で返します。

product.options

商品に設定されているのオプション名を配列で返します。
例えばバリエーションで「Size」には「S,M,L」があり、「Color」には「Black,White」が設定されていると、
product.options = ["Size","Color"]です。

product.options_with_values

商品に設定されているのオプションオブジェクトを配列で返します。
product.optionsと少し似ていますが、product.optionsはオプション名の配列に対し、product.options_with_valuesはオプションオブジェクトの配列です。
例えば下記のような感じで、オプションの設定値を取り出せます。

{% for product_option in product.options_with_values %}
    <h3>{{ product_option.name }}</h3>
    <ul>
      {% for value in product_option.values %}
        <li>{{ value }}</option>
      {% endfor %}
    </ul>
{% endfor %}

例えばバリエーションで「Size」には「S,M,L」があり、「Color」には「Black,White」が設定されていると、次のような出力になります。

<h3>Size</h3>
<ul>
  <li>S</li>
  <li>M</li>
  <li>L</li>
</ul>
<h3>Color</h3>
<ul>
  <li>Black</li>
  <li>White</li>
</ul>

後日オプションオブジェクトに関して記事を書きたいと思いますが、とりあえずオプションオブジェクトに関しては公式リファレンスをご覧ください。

product.price

商品の「価格」を返します。
表示の際は{{ product.price | money }}と記述するほうがいいです。

product.price_max

バリエーションごとに金額が違う時に「価格」の金額で最も高い金額を返します。

表示の際は{{ product.price_max | money }}と記述するほうがいいです。

product.price_min

バリエーションごとに金額が違う時に「価格」の金額で最も安い金額を返します。

表示の際は{{ product.price_min | money }}と記述するほうがいいです。

product.selected_variant

選択されているバリエーションのオブジェクトを返します。
https://ドメイン/products/〇〇?variant=バリエーションIDとすると、バリエーションIDに該当するバリエーションが選択されていることになります。パラメータがなかったり、IDが存在しないものだったりするときは「nil」を返します。

product.selected_or_first_available_variant

選択されているバリエーションのオブジェクトまたは、利用できるバリエーションの一番目のバリエーションオブジェクトを返します。
利用できるバリエーションの説明はこちら
選択されているバリエーションの説明はこちら

product.tags

商品に設定されているタグを配列で返します。

product.template_suffix

商品ページに使用しているテンプレートのsuffix（接尾辞）を返します。
デフォルトテンプレート使用している場合は「nil」を返しますが、「product.template1」というテンプレートを使用している場合は「template1」を返します。
またデフォルトテンプレート以外のテンプレートを作成しないと、商品管理画面にテンプレート選択のプルダウンは表示されないので気をつけてください。

product.title

商品名を返します。

product.type

商品タイプを返します。
商品管理画面の「Organization」の中にある「Product type」で選択しているものが「商品タイプ」です。

product.url

商品のURLを返します。
/prpducts/〇〇といった感じです。

product.variants

商品のバリエーションオブジェクトを返します。
variantオブジェクトについて詳しくはこちら

product.vendor

商品ベンダーを返します。
商品管理画面の「Organization」の中にある「Vendor」で選択しているものが「商品ベンダー」です。

これからもshopifyのオブジェクトについて書いていきますので、よろしくお願いします〜。