はじめに
今回の記事では、LiquidのオブジェクトのGlobalオブジェクト、Contentオブジェクト、Otherオブジェクトについて解説していきます。
こちらを参考にしました。
Liquid objects
Liquidオブジェクトは、Shopifyの管理画面からデータを出力するために使用します。
テーマテンプレートでは、オブジェクトは以下のように{{ }}で囲って使います。
{{ product.title }}
上の例では、productがオブジェクトで、titleがproductの属性になります。
各オブジェクトは、titleのような、オブジェクトに関連する属性を持っています。
例えば、productオブジェクトにはtitleという属性が含まれており、{{ product.title }}とすることで、**商品名（title）**を出力することができます。
{{product.title}}は、Shopifyテーマの商品ページ（ product template ）でレンダリングされると、商品ページで読み込まれている商品ののタイトルが出力されます。
Awesome T-Shirtという名前の商品ページで{{ product.title }}を出力すると、以下のようになります。
Awesome T-Shirtの時
Awesome T-Shirt
Blue Shirtという商品の時
Blue Shirt
Shopifyストアのすべての商品に同じテンプレートファイルを使用しているにも関わらず、テンプレート内のLiquidオブジェクトは、表示されている商品ページ（各商品）に応じて異なるデータを出力します。
Global objects
Globalオブジェクトは、テーマ内の任意のファイルから使用することができます。
しかし、チェックアウトファイル（ checkout.liquid ）では、page_title以外の Global オブジェクトは使用できません。
LiquidのGlobalオブジェクトは全部で21種類あります。
それぞれ見ていきましょう。
all_products
ストア内の全商品のリストを返す
商品のハンドルを指定することで、アクセスすることができます。
{{ all_products['wayfarer-shades'].title }}
all_productsオブジェクトは、1ページあたり20個のハンドルしか使用できません。
もし、1ページに20個以上、商品のハンドルを使用したいときは、代わりにコレクションを使う必要があります。
ハンドルは、Liquidオブジェクトの属性にアクセスするために使用されます。
Shopifyのほとんどのオブジェクト（商品、コレクション、ブログ、記事、メニュー）にはハンドルがあります。
例えば、「About Us」というタイトルのページは、そのハンドルabout-usを使ってLiquidでアクセスすることができます。
.liquid
{{ pages.about-us.content }}
デフォルトでは、ハンドルは**オブジェクトのタイトルを小文字で表し、スペースや特殊文字はハイフン(-)で置き換えられます**。
>タイトルが "Shirt "の商品には、自動的に`shirt`というハンドルが与えられます。
>すでに「Shirt」というハンドルを持つ商品がある場合、ハンドルは自動的にインクリメントされます。
>具体的にいうと、最初の商品の後に作成された「Shirt」の商品はすべて、`shirt-1`、`shirt-2`などのようなハンドルを自動的に与えられます。
### articles
`ストア内の全ブログ記事がリストとして入っている`
```.liquid
{% assign article = articles['news/hello-world'] %}
{{ article.title | link_to: article.url }}
blogs
ストア内の全ブログがリストを返す
以下の例では、blog.ブログの名前.articlesとすることで、特定のブログの記事を取り出すことができます。
<ul>
{% for article in blogs.myblog.articles %}
<li>{{ article.title | link_to: article.url }}</li>
{% endfor %}
</ul>
canonical_url
現ページの canonical URL を返す
canonical URLは、ページのデフォルトURLであり、URLパラメータはすべて削除されています。
商品や商品のバリエーションの場合、canonical URLは、コレクションやバリアントが選択されていないデフォルトの商品ページになります。
例えば、コレクションの中の商品で、バリアントが選択されている場合、以下のようなURLになります。
https://docksupply.co/collections/classics/products/dory-shoes?variant=17287731270
canonical URLの時、以下のように/collections/classicsと?variant=17287731270がURLから消えていることがわかります。
https://docksupply.co/products/dory-shoes
canonical URLについての詳細は、GoogleのSearch Consoleを参照してください。
cart
ストアのカートを返す
collections
ストア内の全コレクションを返す
{% for product in collections.frontpage.products %}
{{ product.title }}
{% endfor %}
current_page
ページ分割されたコンテンツを閲覧しているとき、現在表示されているページ番号を返す
例えば、5ページあるコレクションページの3ページ目を表示している時、current_pageは3を返します。
{% if current_page != 1 %}
Page {{ current_page }}
{% endif %}
currenct_tags
コレクションやブログをフィルタリングするために使用されているすべてのタグを含む配列を返す
商品タグ（product tag）は、特定の商品タグを含む商品のみを表示するようにコレクションをフィルタリングするために使用されます。
同様に、記事タグ（article tag）は、特定の記事タグを含む記事のみを表示するようにブログをフィルタリングするために使用されます。
current_tags配列内のタグは常にアルファベット順で表示されており、手動で順番を変更することはできません。
<!-- in blog.liquid -->
{% if current_tags %}
<h1>{{ blog.title | link_to: blog.url }} › {{ current_tags.first }}</h1>
{% else %}
<h1>{{ blog.title }}</h1>
{% endif %}
customer
ストアにログインしている顧客を返す
顧客がログインしていない場合、何も返されません。
customerオブジェクトは、メールテンプレートやチェックアウトの注文ステータスページ、Order Printerなどのアプリでもアクセスすることができます。
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="/account">My Account</a>
{{ 'Log out' | customer_logout_link }}
{% else %}
{{ 'Log in' | customer_login_link }}
{% if shop.customer_accounts_optional %}
{{ 'Create an account' | customer_register_link }}
{% endif %}
{% endif %}
{% endif %}
linklists
ストア内のメニューとリンクのセットを返します
linklistオブジェクトのハンドルを呼び出すことでメニューにアクセスすることができます。
linklistオブジェクトはShopify管理画面のナビゲーションページでは、メニューと書かれています。
<ul>
{% for link in linklists.categories.links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
handle
現在表示しているページのハンドルを返す
{% if handle contains 'hide-from-search' %}
<meta name="robots" content="noindex">
{% endif %}
images
ファイル名を指定してストア内の画像にアクセスすることが出来る
{% assign image = images['my-image.jpg'] %}
<img src="{{ image }}" alt="{{ image.alt }}">
pages
ストア内の全ページのリストを返す
<h1>{{ pages.about.title }}</h1>
<p>{{ pages.about.author }} says...</p>
<div>{{ pages.about.content }}</div>
page_description
レンダリングされている商品、コレクション、ページの説明を返す
各説明はShopifyの管理画面で設定することができます。
{% if page_description %}
<meta name="description" content="{{ page_description }}" />
{% endif %}
page_title
現在のページのタイトルを返す
recommendations
販売、商品説明、商品とコレクションの関係などのデータに基づいて、おすすめ商品を返す
sectionを表示するときは、JavaScriptを使用してリクエストを行い、ページ上にレスポンスのHTMLを挿入する必要があります。
shop
ストアに関する情報を返します
scripts
ストアのアクティブなスクリプトに関する情報を返します
スクリプトに関する情報にアクセスするには、script.typeを使います。
現在は、cart_calculate_line_itemsしか使用できません。
{% if scripts.cart_calculate_line_items %}
<p>We are currently running a {{ scripts.cart_calculate_line_items.name }} promotion!</p>
{% endif %}
settings
ストアの公開テーマの設定にアクセスすることができます。
以下の例では、ストアの設定に登録したロゴにアクセスをしています。
{% if settings.logo %}
{{ settings.logo | img_url | img_tag: shop.name }}
{% else %}
<span class="no-logo">{{ shop.name }}</span>
{% endif %}
template
現在のページをレンダリングするために使用されているテンプレートの名前を返す
このとき、.liquid拡張子がない名前を返します。
Visit the <a href="/admin/themes/{{ theme.id }}/settings">theme editor</a>.
theme
ストアの公開しているテーマを返す
Visit the <a href="/admin/themes/{{ theme.id }}/settings">theme editor</a>.
Content objects
Content objectsは、テンプレートやセクションファイルの内容、ShopifyやShopifyアプリで読み込まれたscriptsやstylesheetsを出力するために使用されます。
content_for_header
<head>タグの中に配置して、Shopifyが必要とする全てのスクリプトをドキュメントに動的にロードします
ロードされたスクリプトには、Shopifyアナリティクス、Googleアナリティクス、Shopifyアプリに必要なスクリプトが含まれます。
HTMLの**<head>**タグの中に配置する必要があります。
content_for_index
ホームページでレンダリングされる動的セクションのコンテンツが含まれてる
templates/index.liquidに書く必要があります。
content_for_layout
index.liquidやproduct.liquidのような他のテンプレートで生成されたコンテンツを動的に読み込む
HTMLの**<body>**タグの中に配置する必要があります。
Other objects
以下に示すLiquidオブジェクトは、特定の状況でのみ使用されます。
additional_checkout_buttons
マーチャントのストアに、Paypal Express Checkoutのようなオフサイトチェックアウト機能を持つペイメントプロバイダがある場合に、trueを返します。
content_for_additional_checkout_buttons
Shopifyペイメントでないチェックアウトを使用しているアクティブな支払いのプロバイダーのチェックアウトボタンを返す
以下の例のように、オフサイトチェックアウトのゲートウェイが存在するかどうかを調べるには、additional?checkout_buttonsを使用して、それらのボタンを表示させたい時に、content_for_additional_checkout_buttonsを使用します。
{% if additional_checkout_buttons %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
終わりに
今回の記事はここまでになります。
お疲れさまでした。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。