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

はじめに

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

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

part オブジェクト

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

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

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

Input

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

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は、ポリシーのコンテンツを返します。

Input

{% assign policy = shop.privacy_policy %}

{{ policy.body }}

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は、ポリシーのタイトルを返します。

Input

{% for policy in shop.policies %}
  {{ policy.title }}
{% endfor %}

Output

Privacy policy
Refund policy
Shipping policy
Terms of service

policy.url

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

Input

{% for policy in shop.policies %}
  {{ policy.url }}
{% endfor %}

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は、使用している販売チャネルで利用できないコレクションを除き、製品が属するすべてのコレクションの配列を返します。

Input

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

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

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は、管理画面で商品が作成された時刻のタイムスタンプを返します。

Input

{{ product.created_at }}

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 を返します。

Input

URL: {{ product.featured_image }}
Aspect ratio: {{ product.featured_image.aspect_ratio }}
URL: {{ product.featured_image.src }}

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 がゼロよりも大きいか、 variant.inventory_policy が継続するように設定されていなければなりません。inventory_policy が設定されていない variant は利用可能とみなされます。

product.handle

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

product.has_only_default_variant

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

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

{% 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フィルターを使用します。

Input

{{ product | img_url }}

Output

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

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

product.media

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

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

Input

{{ product.media }}

Output

products/boat-shoes.jpgVideoDropExternalVideoDrop

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

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

テーマに画像、動画、3Dモデルを追加する方法についてはこちらをご覧ください。

product.options

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

Input

{% for option in product.options %}
  {{ option }}
{% endfor %}

Output

Color Size Material

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

Input

{{ product.options.size }}

Output

3

product.options_by_name

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

Input

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

Output

<label>
  Color
  <select>
    <option>Red</option>
    <option>Green</option>
  </select>
</label>

product.options_with_values

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

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 %}

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は、ストアで商品が公開された時のタイムスタンプを返します。

Input

{{ product.published_at }}

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 を返します。

Input

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

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 は、商品のすべてのタグの配列を返します。タグはアルファベット順に返されます。

Input

{% for tag in product.tags %}
  {{ tag }}
{% endfor %}

Output

new
leather
sale
special

product.template_suffix

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

Input

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

Output

custom

product.title

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

product.url

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

Input

{{ product.url }}

Output

/products/awesome-shoes

product.variants

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

product.vendor

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

終わりに

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

Shopify アプリのご紹介

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