【Shopify】liquidのオブジェクトについてまとめてみた (part, policy, product)

# はじめに

この記事は、Liquid オブジェクトについて日本語訳したものです。

`part`, `policy`, `product`オブジェクトをまとめていきます。



## part オブジェクト

`paginate.parts`配列が返す各パーツは、ページネーションのナビゲーション内のリンクを表します。

`part`オブジェクトは`paginate`オブジェクトからのみアクセス可能で、`paginate`タグ内でのみ使用できます。

以下の例は、`paginate.parts`配列を通過する`for`ループを使って`part`オブジェクトの属性にアクセスする方法を示しています。


```.liquid:Input
{% for part in paginate.parts %}
  {% if part.is_link %}
    {{ part.title | link_to: part.url}}
  {% endif %}
{% endfor %}
```

```.liquid:Output
<a href="/collections/frontpage?page=1" title="">1</a>
<a href="/collections/frontpage?page=2" title="">2</a>
<a href="/collections/frontpage?page=3" title="">3</a>
```

`part`オブジェクトの属性について見ていきます。



## part.is_link

`part.is_link`は、パーツがリンクの場合は`true`を返し、リンクでない場合は`false`を返します。



## part.title

`part.title`は`part`のタイトルを返します。



## part.url

`part.url`は`url`のタイトルを返します。



# policy オブジェクト

`policy`オブジェクトは、`shop.policies`オブジェクトの個々のポリシーを表します。

個々のポリシーは、`shop.privacy_policy`などのようにショップオブジェクト上で直接参照することもできます。

これらのポリシーは、Shopify管理者のストアの「設定 > 法務関連」で設定することができます。

`policy`オブジェクトの属性について詳しく見てみましょう。



## policy.body

`policy.body`は、ポリシーのコンテンツを返します。

```.liquid:Input
{% assign policy = shop.privacy_policy %}

{{ policy.body }}
```

```.liquid:Output
<h2>PRIVACY STATEMENT</h2>

<h3>SECTION 1 - WHAT DO WE DO WITH YOUR INFORMATION?</h3>

<p>When you purchase something from our store...</p>
```



## policy.title

`policy.title`は、ポリシーのタイトルを返します。

```.liquid:Input
{% for policy in shop.policies %}
  {{ policy.title }}
{% endfor %}
```

```.liquid:Output
Privacy policy
Refund policy
Shipping policy
Terms of service
```



## policy.url

`policy.url`は、ポリシーの相対 URL を返します。

```.liquid:Input
{% for policy in shop.policies %}
  {{ policy.url }}
{% endfor %}
```

```.liquid:Output
/policies/privacy-policy
/policies/refund-policy
/policies/shipping-policy
/policies/terms-of-service
```

ポリシーページはテーマの`theme.liquid`レイアウトファイルの中にレンダリングされます。



# product オブジェクト

価格や合計などの金額の属性は、顧客の現地通貨で表示されます。結果を金額として表示するには、金額フィルタを使用します。

`product`オブジェクトの属性についてみていきましょう。



## product.available

`product.available`は、商品が購入可能な場合に`true`を返します。すべての製品バリアントの`inventory_quantity`の値が0以下で、かつ`inventory_policy`が、「在庫切れの場合でも販売を続ける」に設定されていない場合は`false`を返します。



## product.collections

`product.collections`は、使用している販売チャネルで利用できないコレクションを除き、製品が属するすべてのコレクションの配列を返します。

```.liquid:Input
この商品は次のコレクションに属しています:

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

```.liquid:Output
この商品は次のコレクションに属しています:

Sale
Shirts
Spring
```

## product.compare_at_price

`product.compare_at_price`は、Shopifyの管理画面で入力されたすべての商品のバリアントのうち、最も低い価格で比較されたものを返します。
この属性は下記の`product.compare_at_price_min`と似ています。

商品のバリアントに「割引前価格」の値がない場合、`product.compare_at_price`は`nil`を返します。



## product.compare_at_price_max

`product.compare_at_price_max`は、Shopify 管理画面で入力されたすべての商品のバリアントのうち、最も高い価格で比較したものを返します。

商品のバリエーションに「割引前価格」の値がない場合、 `product.compare_at_price_max` は `0` を返します。



## product.compare_at_price_min

`product.compare_at_price_min`は、Shopify 管理画面で入力されたすべての商品のバリアントのうち、最も低い価格で比較したものを返します。

商品のバリエーションに「割引前価格」の値がない場合、 `product.compare_at_price_min` は `0` を返します。



## product.compare_at_price_varies

`product.compare_at_price_varies`は、`compare_at_price_min` と `compare_at_price_max` が異なる場合に `true` を返します。両者が同じ場合は `false` を返します。



## product.content

`product.content`は、商品の説明を返します。`product.description` です。



## product.created_at

`product.created_at`は、管理画面で商品が作成された時刻のタイムスタンプを返します。

```.liquid:Input
{{ product.created_at }}
```

```.liquid:Output
2021-02-01 05:56:37 -0700
```



## product.description

`product.description`は、商品の説明を返します。`product.content`と同じものを返します。



## product.featured_image

`product.featured_image`は、その商品のフィーチャー画像の`image`オブジェクトを返します。各
商品の最初の画像は、フィーチャー画像あるいはメイン画像と呼ばれています。


`product.feature_image` のみを参照すると、その画像の相対 URL を返します。

```.liquid:Input
URL: {{ product.featured_image }}
Aspect ratio: {{ product.featured_image.aspect_ratio }}
URL: {{ product.featured_image.src }}
```

```.liquid:Output
URL: products/name.png
Aspect ratio: 1.0
URL: products/name.png
```



## product.featured_media

`product.featured_media`は、製品に添付されたメディアの最初の部分をレンダリングするために使用できます。



## product.first_available_variant

`product.first_available_variant`は、購入可能な最初の製品の `variant` オブジェクトを返します。

`variant` を利用可能にするには、 `variant.inventory_quantity` がゼロよりも大きいか、 v`ariant.inventory_policy` が継続するように設定されていなければなりません。`inventory_policy` が設定されていない `variant` は利用可能とみなされます。



## product.handle

`product.handle`は、商品のハンドルを返します。



## product.has_only_default_variant

`product.has_only_default_variant`は、商品がデフォルトのバリアントのみを持っている場合に `true` を返します。これにより、商品フォームでバリアントピッカーを表示するかどうかを決めることができます。

カスタマイズされたバリアントを持たない商品は、"Title" オプションを "Default Title" に設定したデフォルトのバリアントをひとつ持ちます。

```.liquid
{% if product.has_only_default_variant %}
  <input name="id" value="{{ variant.id }}" type="hidden">
{% else %}
  <select name="id">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor%}
  </select>
{% endif %}
```



## product.id

`product.id`は、商品の`id`を返します。



## product.images

`product.images`は、商品の画像の配列を返します。Shopifyのコンテンツ配信ネットワーク（CDN）上の商品画像にリンクするには、`img_url`フィルターを使用します。

```.liquid:Input
{{ product | img_url }}

```

```.liquid:Output
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_small.jpeg?v=1459175177
```

商品画像は、`product.media`オブジェクトを使用して返すこともできます。



## product.media

`product.media`は、追加された日付でソートした、商品に関連するメディアの混合配列を返します。

メディアフィルタを使用して URL やモデルビューアタグを生成し、商品ページでメディアがレンダリングされるようにすることができます。

```.liquid:Input
{{ product.media }}
```

```.liquid:Output
products/boat-shoes.jpgVideoDropExternalVideoDrop
```

`product.media` オブジェクトは、製品に関連付けられた各メディア項目を反復処理する for ループを作成するために使用されます。

```.liquid
{% for media in product.media %}
  {% include 'media' %}
{% endfor %}
```

テーマに画像、動画、3Dモデルを追加する方法については[こちら](https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video)をご覧ください。




## product.options

`product.options`は、商品のオプション名の配列を返します。

```.liquid:Input
{% for option in product.options %}
  {{ option }}
{% endfor %}
```

```.liquid:Output
Color Size Material
```

製品のオプション数を決定する必要がある場合は、サイズを使用します。

```.liquid:Input
{{ product.options.size }}
```

```.liquid:Output
3
```



## product.options_by_name

`product.options_by_name`は、製品のオプションに名前で直接アクセスできるようにします。options_by_name のオブジェクトキーは大文字小文字を区別しません。

```.liquid:Input
<label>
  Color
  <select>
    {% for color_option in product.options_by_name['Color'].values %}
      <option>{{ color_option }}</option>
    {% endfor %}
  </select>
</label>
```

```.liquid:Output
<label>
  Color
  <select>
    <option>Red</option>
    <option>Green</option>
  </select>
</label>
```



## product.options_with_values

`product.options_with_values`は、商品のオプションの配列を返します。

```.liquid:Input
{% for product_option in product.options_with_values %}
  <label>
    {{ product_option.name }}
    <select>
      {% for value in product_option.values %}
        <option {% if product_option.selected_value == value %}selected{% endif %}>
          {{ value }}
        </option>
      {% endfor %}
    </select>
  </label>
{% endfor %}
```

```.liquid:Output
<label>
  Color
  <select>
    <option selected>Red</option>
    <option>Green</option>
  </select>
</label>
```



## product.price

`product.price`は、すべての製品のバリアントの最低価格を返します。この属性は `product.price_min` と同じです。



## product.price_max

`product.price_max`は、すべての製品のバリアントの最高価格を返します。



## product.price_min

`product.price_min`は、すべての製品のバリアントの最低価格を返します。



## product.price_varies

`product.price_varies`は、製品のバリアントの価格が異なる場合に `true` を返します。すべての商品のバリエーションが同じ価格の場合は `false` を返します。



## product.published_at

`product.published_at`は、ストアで商品が公開された時のタイムスタンプを返します。

```.liquid:Input
{{ product.published_at }}
```

```.liquid:Output
2021-02-01 05:56:37 -0700
```



## product.requires_selling_plan

`product.requires_selling_plan`は、製品のすべてのバリアントで `variant.requires_selling_plan` が `true` に設定されている場合に `true` を返します。



## product.selected_variant

`product.selected_variant`は、選択された `variant` の `variant` オブジェクトを返します。選択された `variant` は URL パラメータ `variant` に基づいています。

選択された `variant` がない場合、このプロパティは `nil` を返します。

```.liquid:Input
<!-- URL = myshop.myshopify.com/products/shirt?variant=124746062 -->
{{ product.selected_variant.id }}
```

```.liquid:Output
124746062
```



## product.selected_or_first_available_variant

`product.selected_or_first_available_variant`は、選択された `variant` の `variant` オブジェクトを返します。選択された `variant` は URL パラメータ `variant` に基づいています。

選択された `variant` がない場合は、最初に利用可能な `variant` が返されます。
`variant` が利用可能であるためには、 `variant.inventory_quantity` がゼロよりも大きいか、 `variant.inventory_policy` が継続するように設定されていなければなりません。
`inventory_management` がない `variant` も利用可能とみなされます。



## product.selected_of_first_available_selling_plan_allocation

`product.selected_of_first_available_selling_plan_allocation`は、以下のシーケンシャルロジックに基づいた `selling_plan_allocation` オブジェクトを返します。

1. URL パラメータで有効な割り当てが選択されている場合、その割り当てが返されます。
2. URL で指定された割り当てがない場合、在庫のあるバリアントの最初の割り当てが返されます。
3. 在庫のある `variant` がない場合は、最初の `variant` の最初の割り当てが返されます。

製品に selling plans がない場合、このプロパティは `nil` を返します。



## product.selected_selling_plan

`product.selected_selling_plan`は、URL パラメータ `selling_plan` と販売計画の ID の値に基づいて `selling_plan` オブジェクトを返します。

例えば、URL パラメータに `?selling_plan=789` を指定すると、このプロパティは ID `789` の `selling_plan` オブジェクトを返します。



## product.selected_selling_plan_allocation

`product.selected_selling_plan_allocation`は、販売計画とバリアントを識別する URL パラメータに基づいて `selling_plan_allocation` オブジェクトを返します。

たとえば、URL パラメータに `variant=12345&selling_plan=8765` を指定した場合、このプロパティは、ID `12345` の `variant` オブジェクトと ID `8765` の `selling plan` のアロケーションを返します。




## product.selling_plan_groups

`product.selling_plan_groups`は、商品のバリエーションを含む selling_plan_group オブジェクトの配列です。



## product.tags

`product.tags` は、商品のすべてのタグの配列を返します。タグはアルファベット順に返されます。

```.liquid:Input
{% for tag in product.tags %}
  {{ tag }}
{% endfor %}
```

```.liquid:Output
new
leather
sale
special
```



## product.template_suffix

`product.template_suffix`は、`product.`プリフィックス と `.liquid` 拡張子を除いた、その製品に割り当てられたカスタムプロダクトテンプレートの名前を返します。
カスタムテンプレートが製品に割り当てられていない場合は、`nil`を返します。

```.liquid:Input
<!-- on product.section.liquid -->
{{ product.template_suffix }}
```

```.liquid:Output
custom
```



## product.title

`product.title`は、商品のタイトルを返します。



## product.url

`product.url`は、商品の相対 URL を返します。

```.liquid:Input
{{ product.url }}
```

```.liquid:Output
/products/awesome-shoes
```



## product.variants

`product.variants`は、商品のバリアントの配列を返します。



## product.vendor

`product.vendor`は、商品のベンダーを返します。



# 終わりに

今回の記事はここまでになります。
お疲れ様でした。

# Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search