はじめに

今回の記事では、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の時

product.liquid

Awesome T-Shirt

Blue Shirtという商品の時

product.liquid

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でアクセスすることができます。

{{ pages.about-us.content }}
デフォルトでは、ハンドルはオブジェクトのタイトルを小文字で表し、スペースや特殊文字はハイフン(-)で置き換えられます。

タイトルが "Shirt "の商品には、自動的にshirtというハンドルが与えられます。

すでに「Shirt」というハンドルを持つ商品がある場合、ハンドルは自動的にインクリメントされます。

具体的にいうと、最初の商品の後に作成された「Shirt」の商品はすべて、shirt-1、shirt-2などのようなハンドルを自動的に与えられます。

articles

ストア内の全ブログ記事がリストとして入っている

{% 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 }} &rsaquo; {{ 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 機能を実現することができます。

【Shopify】liquidのオブジェクトとは