はじめに
今回は、Liquidのオブジェクトについて一つ一つまとめていきます。
checkout、collection、commentをまとめていきます。
こちらを参考にしました。
checkoutオブジェクト
checkoutオブジェクトの概要についてドキュメントからの引用です。
chekoutオブジェクトは、チェックアウト時の割引金額や通貨などにアクセスしたい時に使用します。これは、チェックアウトの注文ページでアクセスすることが出来ます。
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：商品登録が古い順
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管理者のコレクションページ設定することができます。
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
ソートオプションの顧客側に表示するラベル（ベストセラー等）は、言語エディタから変更することが可能です。
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 機能を実現することができます。