LoginSignup
25

More than 1 year has passed since last update.

【Shopify】liquidのオブジェクトについてまとめてみた (checkout, collection, comment)

Last updated at Posted at 2021-02-09

はじめに

今回は、Liquidのオブジェクトについて一つ一つまとめていきます。

checkoutcollectioncommentをまとめていきます。

こちらを参考にしました。

checkoutオブジェクト

checkoutオブジェクトの概要についてドキュメントからの引用です。

chekoutオブジェクトは、チェックアウト時の割引金額や通貨などにアクセスしたい時に使用します。これは、チェックアウトの注文ページでアクセスすることが出来ます。

ScreenClip.png

Shopify Plusのマーチャントは、checkout.liquidレイアウトファイルで使用することもできます。

それでは、checkoutトオブジェクトの属性を見ていきましょう。

checkout.applied_gift_cards

チェックアウトに適用されたギフトカードを返す

checkout.attributes

カートに追加されたチェックアウトの属性を返す

checkout.billing_address

チェックアウトの請求書先アドレスを返す

checkout.buyer_accepts_marketing

顧客がチェックアウト時にニュースレターを受け入れたどうかを返す

{% if checkout.buyer_accepts_marketing %}
    Thank you for subscribing to our newsletter. You will receive our exclusive newsletter deals!
{% endif %}

Thank you for subscribing to our newsletter. You will receive our exclusive newsletter deals!

checkout.cart_level_discount_applications

カート固有の割引アプリケーションの配列を返します。

{% for discount_application in checkout.cart_level_discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}

Discount name: SUMMER16
Savings: -$20.00

checkout.currency

チェエクアウト時の通貨を返します。

ストアで複数の通貨を使用している場合、顧客のローカル通貨と同じになります。

複数の通貨を使用していない場合、ストアの通貨と同じになります。

{{ checkout.currency.iso_code }}

USD

checkout.customer

チェックアウトする顧客を返します。

checkout.discount_application

チェックアウトで使用される割引の情報の配列を返します。

{% for discount_application in checkout.discount_applications %}
    Discount name: {{ discount_application.title }}
    Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}

Discount name: SUMMER16
Savings: -$20.00

checkout.discounts_amount

チェックアウト時に適用された割引額の合計を返します。

You save: {{ checkout.discounts_amount | money }} <br>

You save: $12.00

checkout.discounts_savings

チェックアウト時に適用された割引の合計を返します。

返される値は、checkout.discounts_amountの値を負にしたものです。

checkout.email

チェックアウト時に使用したメールを返します。

checkout.gift_cards_amount

チェックアウトのギフトカードで支払った金額を返します。

checkout.id

チェックアウトのIDを返します。

checkout.line_items

チェックアウトのすべてのラインアイテムを返します。

checkout.line_items_subtotal_price

カートに追加されている商品価格の合計から、商品の割引金額を引いたものを返します。

小計には税金(価格に税金が含まれていない限り)、カートの割引、送料は含まれていません。

<!-- subtotal = total dollar value of cart items - line item discount -->
Subtotal: {{ checkout.line_items_subtotal_price | money }}

<!-- for a cart containing a $500 product with a $50 line item discount -->
Subtotal: $450.00

checkout.name

チェックアウトの名前を返します。

この値は、checkout.idと同じで、前にハッシュタグが付加されています。

checkout.note

チェックアウトのメモを返します。

checkout.order

チェックアウトで作成された注文を返します。

チェックアウトの注文状態ページでまだ注文が作成されていないとき、このプロパティーはnilになるときがあります。

checkout.order_id

チェックアウトで作成された注文のIDを返します。

checkout.order_name

チェックアウトで作成された注文の名前を返します。

checkout.requires_shipping

チェックアウトが出荷(配送)を必要としているかどうかを返します。

{% if checkout.requires_shipping %}
    You will receive an email with your shipment tracking number as soon as your order is shipped.
{% endif %}

You will receive an email with your shipment tracking number as soon as your order is shipped.

checkout.shipping_address

チェックアウトの配送先を返します。

checkout.shipping_method

チャックアウトの配送方法を返します。

checkout.shipping_methods

チェックアウトの配送方法の配列を返します。

Shipping methods: <br>
{% for shipping_method in checkout.shipping_methods %}
    * {{ shipping_method.title }}: {{ shipping_method.price | money }} <br>
{% endfor %}

Shipping methods:
* International Shipping: $12.00

checkout.shipping_price

チェックアウトの送料を返します。

checkout.tax_lines

チェックアウトの税金を返します。

checkout.tax_price

チェックアウトの価格に税金が含まれているかどうかを返します。

checkout.total_price

チェックアウトの合計金額を返します。

<!-- Total = subtotal + shipping cost - shipping discount + taxes -->
Total: {{ checkout.total_price | money }}

<!-- For a $500 product with a $50 discount, $10 shipping, and a tax rate of 20% -->
Total: $552.00

checkout.transaction

チェックアウトからのトランザクション(処理の単位)の配列を返します。

決済方法等の情報を属性により出力することができます。

collectionオブジェクト

collectionオブジェクトの概要についてドキュメントからの引用です。

コレクションに関するオブジェクトで、コクレクションページのURLやタイトル等を返します。

collectionオブジェクトは、Globalオブジェクトであるcollectionsの中に格納されています。

collections.collection.~とすることでチェックアウトページ以外のページからアクセスすることができます。

collectionオブジェクトの属性を見ていきましょう。

collection.all_products_count

コレクションに登録されている商品の総数を返します。

コレクションページが、商品タグによってフィルタリングされている状態でも登録されている商品の総数が返されます。

それに対して、collection.products_countは、現在のビューのコレクション内の商品の総数を返します。

例えば、コレクションがUnReactタグでフィルタリングされている場合、collection.products_countは、UnReactタグとマッチする商品の総数を返します。

{{ collection.all_products_count }} total products in this collection

24 total products in this collection

collection.all_tags

コクレクションページがフィルタリングされている場合でも、全商品タグのリストを返します。

最大で、1000個のタグを返す事ができます。

collection.all_products_countに対して、collection.tagsは、現在表示されているコレクションのタグのみを返します。

collection.all_types

コレクション内の全商品タイプのリストを返します

{% for product_type in collection.all_types %}
  {{ product_type | link_to_type }}
{% endfor %}

<a href="/collections/types?q=Accessories" title="Accessories">Accessories
<a href="/collections/types?q=Chairs" title="Chairs">Chairs</a>
<a href="/collections/types?q=Shoes" title="Shoes">Shoes</a>

collection.all_vendors

コクレクション内の全商品のベンダーのリストを返します。

{% for product_vendor in collection.all_vendors %}
  {{ product_vendor | link_to_vendor }}
{% endfor %}

<a href="/collections/vendors?q=Shopify" title="Shopify">Shopify</a>
<a href="/collections/vendors?q=Shirt+Company" title="Shirt Company">Shirt Company</a>
<a href="/collections/vendors?q=Montezuma" title="Montezuma">Montezuma</a>

collection.current_type

コクレクションページの/collections/types?q=TYPEの商品タイプ(TYPE)を返します。

例えば、自動生成された「Shirts」コレクションは、ストア内の「Shirts」タイプの全商品をリスト化します。

コレクションページ:yourstore.myshopify.com/collections/types?q=Shirts

{% if collection.current_type %}
    Browse all our {{ collection.current_type | downcase }}.
{% endif %}

Browse all our shirts.

collection.current_vendor

コレクションページの/collections/vendors?q=VENDORにある商品のベンダー(VENDOR)を返します

例えば、自動生成されたApparelCoコレクションは、ストア内のベンダーApparelCoを持つ全商品をリスト化します。

コレクションページ:yourstore.myshopify.com/collections/vendors?q=ApparelCo

{% if collection.current_vendor %}
    All products by {{ collection.current_vendor }}.
{% endif %}

All products by ApparelCo.

collection.default_sort_by

Shopify管理画面のコレクションのページで設定されているコレクションの並び順を返します。

可能な並び順は以下の8つです。

  • manual:手動
  • best-selling:ベストセラー
  • title-ascending:商品名をA-Z
  • title-descending:商品名をZ-A
  • price-ascending:価格が高い順
  • price-descending:価格が低い順
  • created-ascending:商品登録が新着順
  • created-descending:商品登録が古い順

ScreenClip.png

collection.description

コクレクションの名前を返します。

collection.handle

コレクションのハンドルを返します。

collection.id

コレクションのID番号を返します。

collection.image

コレクションの画像を返します。

画像ファイルをShopifyコンテンツ配信ネットワーク(CDN)から読み込むためには、img_urlフィルターを使用します。

以下の例では、ifタグで、最初に画像が存在するかどうかをチェックして存在していれば表示するようにしています。

{% if collection.image %}{{ collection.image | img_url: 'medium' }}{% endif %}

//cdn.shopify.com/s/files/1/0087/0462/collections/collection-image_medium.png?v=1337103726

collection.next_product

コレクション内の次の商品を返します。

次の商品がないときは、nilを返します。

また、コレクション内の次の商品のURLを返すには、collection.next_product.urlを使用します。

{% if collection.next_product %}
  {{ 'Next product' | link_to: collection.next_product.url, collection.next_product.title }}
{% endif %}

collection.previous_product

現在表示しているコレクションページ内の商品数を返します。

例えば、UnReactタグでフィルタリングされたコレクションを表示している場合、collection.products_countは、選択されたUnReactタグにマッチする商品の数を返します。

collection.products

コレクション内の全商品を返します。

1ページあたり、最大で50個の商品を表示することができます。

表示する商品数を変更するときは、pagenateタグ使用します。

collection.products_count

現在表示しているコレクションページ内の商品数を返します。

例えば、UnReactタグでフィルタリングされたコレクションを表示している場合、collection.products_countは、UnReactタグにマッチする商品数を返します。

{{ collection.products_count }} products

6 products

collection.published_at

コレクションが公開された日時を返します。

この情報は、Shopify管理者のコレクションページ設定することができます。

ScreenClip.png

collection.sort_by

URLパラメータであるsort_byによってコレクションに適用される並べ替え順を返します。

URLパラメータsort_byが存在しない場合はnilを返します。

例えば、/collections/widgets?sort_by=best-sellingのとき、


{% if collection.sort_by %}
  Sort by: {{ collection.sort_by }}
{% endif %}

Sort by: best-selling

collection.sort_options

コレクションのソートオプション(並び替え機能)の配列を返します。

<select name="sort_by">
{% for option in collection.sort_options %}
  <option value="{{ option.value }}">{{ option.name }}</option>
{% endfor %}
</select>

<select name="sort_by">
  <option value="manual">Featured
  <option value="best-selling">Best selling
  <option value="title-ascending">Alphabetically, A-Z
  <option value="title-descending">Alphabetically, Z-A
  <option value="price-ascending">Price, low to high
  <option value="price-descending">Price, high to low
  <option value="created-ascending">Date, old to new
  <option value="created-descending">Date, new to old
</select>

option.name

ソートオプションの顧客側に表示するラベル(ベストセラー等)は、言語エディタから変更することが可能です。

ScreenClip.png

option.value

フォーム送信でsort_byプロパティに割り当てるソートオプションの値。

現在のソートオプションを識別するには、collection.sort_byを使用します。

<option {% if option.value == collection.sort_by %}selected{% endif %} >
    ...
</option>

collection.template_suffix

コレクションに割り当てられたカスタムcollecitonテンプレートの名前を返します。

カスタムテンプレートがコレクションに割り当てられていない場合はnilを返します。

{{ collection.template_suffix }}

no-price

collection.title

コレクションのタイトルを返します。

<h1>{{ collection.title }}</h1>

<h1>Frontpage</h1>

collection.tags

現在、表示されているコレクションページ内の商品タグを返します。

例えば、UnReactタグでフィルタリングされたコレクションを表示している場合、collection.tagsは、UnReactにマッチする商品タグを返します。

collection.url

コレクションのURLを返します。

commentオブジェクト

commentオブジェクトの概要についてドキュメントからの引用です。

commentオブジェクトは、コメントの作者や内容などのコメントに関する情報を返します。

コメントとは、ブログ記事に対する読者の反応のことです。

コメントは通常、記事の本文のあとに、逆時系列で記事のページに表示され、無制限につけることができます。

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

comment.author

コメントの作者を返します。

comment.content

コメントの内容を返します。

comment.created_at

コメントが投稿された時刻のタイムスタンプを返します。

dateフィルタを用いると、タイムスタンプより読みやすい形式に変換できます。

{{ comment.created_at | date: "%b %d, %Y" }}

Feb 26, 2017

comment.email

コメントの作者のメールアドレスを返します。

comment.id

コメントID(一意の識別子)を返します。

comment.status

コメントの状態を返します。

状態の値は以下の5つです。

  • pendeing:保留状態のメール

  • published:公開されているコメント

  • removed:削除されたコメント

  • spam:Shopifyのスパム検出でスパムとしてマークされたコメント

  • unapproved:承認待ちのコメント

comment.updated_at

コメントのステータスが最後に変更された時刻のタイムスタンプを返します。

例えば、コメントが記事の著者によって承認された時のタイムスタンプなどです。

comment.url

comment.idが付加された記事のURLを返します。

表示しているページをコメントまで自動スクロールするために使用します。

終わりに

今回の記事はここまでになります。

お疲れさまでした。

Shopify アプリのご紹介

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25