【Shopify】liquidのオブジェクトについてまとめてみた (address, all_country_option_tags, article)

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

addressからarticleをまとめていきます。

#addressオブジェクト
こちらの記事を参考にしました。

概要から見ていきましょう。

アドレスオブジェクトには、Shopifyのチェックアウトページで顧客が入力した情報が含まれています。顧客は、請求先住所または配送先住所の2つの住所を入力できることに注意してください。

つまり、addressオブジェクトには二種類あるということです。

それが、shipping_addressとbilling_addressです。

考えて見ればそれは当たり前で、Shopifyで管理する住所には請求先住所と配送先住所しかないからです。

addressオブジェクトとは端的にまとまるなら、請求先住所と配送先住所の各々の情報に対してアクセスできるオブジェクトということができます。

addressオブジェクトの使い道としては、メールテンプレートやチェックアウトの注文ステータスページ、Order Printerなどのアプリで使用することができます。

それでは、addressオブジェクトの各々の属性について見ていきましょう。

##address.address1
アドレスのAddress1フィールドの値を返します。

請求先住所や配送先住所の入力画面を思い出して下さい。

このような、請求先住所や配送先住所のAddress1が格納されているのがaddress.address1プロパティです。

ちなみに、一般的な海外の住所の書き方におけるaddress1やaddress2の定義は、以下になっています。

• Address1
  →市より下の住所

• Address2
  →マンション住まいの時は#部屋番号＋マンション名

ちなみに、配送先住所のaddress1プロパティにアクセスするときはshipping_address.address1を使いますし、請求先住所のaddress1を使用するときはbilling_address.address1を使用します。

##address.address2
これも先程と同様で、請求先住所や配送先住所のaddress2の値にアクセスすることができます。

また、shipping_address.address2を指定すれば配送先住所のaddress2にアクセスできますし、billing_address.address2にアクセスすれば、配送先住所のaddress2にアクセスできます。

##address.city
アドレスのCityフィールドの値を返します。

##address.company
アドレスのCompanyフィールドの値を返します。

##address.country
アドレスのCountryフィールドの値を返します。

.liquid

{{ shipping_address.country }}

Canada

##address.country_code
アドレスのCountryフィールドの値をISO 3166-2標準形式で返します。

ちなみに、ISO 3166-2とは行政区画名あるいは属領名をコードで表示するための地理コード系を定義するものです。

.liquid

{{ shipping_address.country_code }}

CA

##address.first_name
アドレスのFirst nameフィールドの値を返します。

first name、つまり下の名前を返します。

##address.last_name
アドレスのLast Nameフィールドの値を返します。

Last name、つまりは上の名前です。

##address.name
アドレスのFirst NameフィールドとLast Nameフィールドの値を返します。

.liquid

Hello, {{ billing_address.name }}

Hello, Bob Biller

##address.phone
アドレスのPhoneフィールドの値を返します。

##address.province
住所のProvince / Stateフィールドの値を返します。

.liquid

{{ billing_address.province }}

Ontario

##address.province_code
住所のProvince / Stateフィールドの省略値を返します。

.liquid

{{ billing_address.province_code }}

ON

##address.street
アドレスのAddress1フィールドとAddress2フィールドの合計値を返します。

.liquid

{{ shipping_address.street }}

##address.url
アドレスの相対URLを返します。

.liquid

{{ address.url }}

/account/addresses/12345

##address.zip
住所のPostal / Zipフィールドの値を返します。

#all_country_option_tagsオブジェクト
こちらを参考にしました。

all_country_option_tagsオブジェクトは、各国のタグを作成します。
data-provincesと呼ばれる属性が各に設定され、その国のサブリージョンのJSONエンコードされた配列を含みます。国がサブリージョンを持たない場合は、空の配列がその国の data-provinces 属性に設定されます。

簡単にまとめると、このall_country_option_tagsは各国の国名をHTMLのoptionタグで囲んだものが返ってきます。

具体例を見てみましょう。

以下のように使用します。

.html

<select name="country">
  {{ all_country_option_tags }}
</select>

all_country_option_tagsはliquidにより展開され、以下のHTMLコードになります。

.html

<select name="country">
  <option value="---" data-provinces="[]">---</option>
  <option value="Afghanistan" data-provinces="[]">Afghanistan</option>
  <option value="Aland Islands" data-provinces="[]">Åland Islands</option>
  ...
  <option value="Canada" data-provinces="[['Alberta','Alberta'],['British Columbia','British Columbia'],['Manitoba','Manitoba'],['New Brunswick','New Brunswick'],['Newfoundland','Newfoundland'],['Northwest Territories','Northwest Territories'],['Nova Scotia','Nova Scotia'],['Nunavut','Nunavut'],['Ontario','Ontario'],['Prince Edward Island','Prince Edward Island'],['Quebec','Quebec'],['Saskatchewan','Saskatchewan'],['Yukon','Yukon']]">Canada</option>
  ...
</select>

#articleオブジェクト
それではarticleオブジェクトについてまとめていきましょう。

このarticleオブジェクトは、articleテンプレート内でのみ使用できます。

ちなみに、articleテンプレート内以外からarticleオブジェクトにアクセスするときは、articles.(handle名).~でアクセスできます。

##article.author
記事の著者のフルネームを返します。

##article.comments
記事の公開されたコメントを返します。コメントが無効になっている場合は、空の配列を返します。

##article.comments_enabled?
コメントが有効になっている場合はtrueを返します。コメントが無効になっている場合はfalseを返します。

##article.comment_post_url
新しいコメントを作成するときにPOSTリクエストが送信される相対URLを返します。

.html

{{ article.comment_post_url }}

/blogs/news/10582441-sale-starts-today/comments

##article.content
記事の内容を返します。

##article.created_at
記事が作成されたときのタイムスタンプを返します。日付フィルターを使用してタイムスタンプをフォーマットします。

.html

{{ article.created_at | date: "%a, %b %d, %y" }}

Fri, Sep 16, 11

##article.excerpt
記事の抜粋を返します。

##article.excerpt_or_content
存在する場合は、記事のarticle.excerptを返します。記事の抜粋が存在しない場合は、article.contentを返します。

##article.handle
articleのハンドルを返します。

ハンドルとは簡単に書くと、その記事のURLです。

##article.id
記事のIDを返します

##article.image
記事の画像オブジェクトを返します。

###article.image.alt
記事画像の代替テキストを返します。

###article.image.src
記事画像への相対URLを返します。

.liquid

{{ article.image.src | img_url: '500x' }}

//cdn.shopify.com/s/files/1/0087/0462/blogs/summer_article_500x.png?v=1334084726

##article.moderated?
記事が属するブログがコメントを修正するように設定されている場合に true を返します。ブログが修正されていない場合は false を返します。

##article.published_at
記事が公開された日時を返します。日付フィルターを使用してタイムスタンプをフォーマットします。

##article.tags
記事のすべてのタグを返します。

.liquid

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

news new-products photography

###Total tag count
article.tagsをループしているとき、tag.total_countでタグが何回使われたかを表示することができます。この数字は、特定のタグで何回ブログ記事がタグ付けされたかを訪問者に表示します。

.html

{% for tag in article.tags %}
    {{ tag }} ({{ tag.total_count }})
{% endfor %}

news (5) new-products (2) photography (1)

##article.title
記事のタイトルを返します。

##article.updated_at
記事が更新された日時を返します。日付フィルターを使用してタイムスタンプをフォーマットします。

##article.url
記事の相対URLを返します。

.html

{{ article.url }}

/blogs/news/10582441-my-new-article

##article.user
記事の著者に関する情報を持つオブジェクトを返します。この情報は、Shopify管理者のアカウントページのスタッフアカウントオプションで編集することができます。

###article.user.account_owner
記事の作成者が店舗のアカウント所有者である場合にtrueを返します。記事の作成者がアカウントの所有者でない場合は false を返します。

###article.user.bio
記事の著者の略歴を返します。

###article.user.email
記事の著者のメールアドレスを返します。

###article.user.first_name
記事の著者の名を返します。

###article.user.homepage
記事の著者のホームページを返します。

###article.user.image
記事の作成者の画像オブジェクトを返します。

.liquid

{% if article.user.image %}
  {{ article.user.image | img_url: '200x200' }}
{% endif %}

//cdn.shopify.com/s/files/1/0087/0462/users/user-image_200x200.png?v=1337103726

###article.user.last_name
記事の著者の姓を返します。

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

お疲れさまでした。

Shopify アプリのご紹介

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