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

#はじめに
今回の記事では、Liquidのオブジェクトの**Globalオブジェクト**、**Contentオブジェクト**、**Otherオブジェクト**について解説していきます。

[こちら](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects)を参考にしました。

#Liquid objects
Liquidオブジェクトは、Shopifyの管理画面からデータを出力するために使用します。

テーマテンプレートでは、オブジェクトは以下のように`{{ }}`で囲って使います。

```.liquid
{{ 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
`ストア内の全商品のリストを返す`

商品のハンドルを指定することで、アクセスすることができます。

```.liquid
{{ all_products['wayfarer-shades'].title }}
```

`all_products`オブジェクトは、**1ページあたり20個のハンドルしか使用できません**。

もし、1ページに20個以上、商品のハンドルを使用したいときは、代わりに**コレクション**を使う必要があります。

>ハンドルは、**Liquidオブジェクトの属性にアクセスするため**に使用されます。

>Shopifyのほとんどのオブジェクト（商品、コレクション、ブログ、記事、メニュー）にはハンドルがあります。

>例えば、「About Us」というタイトルのページは、そのハンドルabout-usを使ってLiquidでアクセスすることができます。

>```.liquid
<!-- the content of the About Us page -->
{{ 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`とすることで、特定の`ブログ`の記事を取り出すことができます。

```.liquid
<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になります。

```.liquid
https://docksupply.co/collections/classics/products/dory-shoes?variant=17287731270
```

**canonical URL**の時、以下のように`/collections/classics`と`?variant=17287731270`がURLから消えていることがわかります。

```.liquid
https://docksupply.co/products/dory-shoes
```

canonical URLについての詳細は、Googleの[Search Console](https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls?hl=en&visit_id=637482814328700799-1594122673&rd=1)を参照してください。


###cart
`ストアのカートを返す`


###collections
`ストア内の全コレクションを返す`

```.liquid
{% for product in collections.frontpage.products %}
  {{ product.title }}
{% endfor %}
```



###current_page
`ページ分割されたコンテンツを閲覧しているとき、現在表示されているページ番号を返す`

例えば、5ページあるコレクションページの3ページ目を表示している時、`current_page`は``3``を返します。

```.liquid
{% if current_page != 1 %}
  Page {{ current_page }}
{% endif %}
```


###currenct_tags
`コレクションやブログをフィルタリングするために使用されているすべてのタグを含む配列を返す`

商品タグ（product tag）は、特定の商品タグを含む商品のみを表示するようにコレクションをフィルタリングするために使用されます。

同様に、記事タグ（article tag）は、特定の記事タグを含む記事のみを表示するようにブログをフィルタリングするために使用されます。

**current_tags配列内のタグは常にアルファベット順で表示されており、手動で順番を変更することはできません。**

```.liquid
<!-- 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などのアプリでもアクセスすることができます。

```.liquid
{% 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管理画面のナビゲーションページでは、**メニュー**と書かれています。


```.liquid
<ul>
 {% for link in linklists.categories.links %}
    <li>{{ link.title | link_to: link.url }}</li>
  {% endfor %}
</ul>
```




###handle
`現在表示しているページのハンドルを返す`

```.liquid
{% if handle contains 'hide-from-search' %}
  <meta name="robots" content="noindex">
{% endif %}
```



###images
`ファイル名を指定してストア内の画像にアクセスすることが出来る`

```.liquid
{% assign image = images['my-image.jpg'] %}
<img src="{{ image }}" alt="{{ image.alt }}">
```




###pages
`ストア内の全ページのリストを返す`

```.liquid
<h1>{{ pages.about.title }}</h1>
<p>{{ pages.about.author }} says...</p>
<div>{{ pages.about.content }}</div>
```



###page_description
`レンダリングされている商品、コレクション、ページの説明を返す`

各説明はShopifyの管理画面で設定することができます。


```.liquid
{% if page_description %}
  <meta name="description" content="{{ page_description }}" />
{% endif %}
```



###page_title
`現在のページのタイトルを返す`



###recommendations
`販売、商品説明、商品とコレクションの関係などのデータに基づいて、おすすめ商品を返す`

sectionを表示するときは、JavaScriptを使用してリクエストを行い、ページ上にレスポンスのHTMLを挿入する必要があります。


###shop
`ストアに関する情報を返します`



###scripts
`ストアのアクティブなスクリプトに関する情報を返します`

スクリプトに関する情報にアクセスするには、`script.type`を使います。

現在は、`cart_calculate_line_items`しか使用できません。

```.liquid
{% if scripts.cart_calculate_line_items %}
  <p>We are currently running a {{ scripts.cart_calculate_line_items.name }} promotion!</p>
{% endif %}
```


###settings
`ストアの公開テーマの設定にアクセスすることができます。`

以下の例では、ストアの設定に登録したロゴにアクセスをしています。

```.liquid
{% if settings.logo %}
  {{ settings.logo | img_url | img_tag: shop.name }}
{% else %}
  <span class="no-logo">{{ shop.name }}</span>
{% endif %}
```


###template
`現在のページをレンダリングするために使用されているテンプレートの名前を返す`

このとき、`.liquid`拡張子がない名前を返します。

```.liquid
Visit the <a href="/admin/themes/{{ theme.id }}/settings">theme editor</a>.
```


###theme
`ストアの公開しているテーマを返す`

```.liquid
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`を使用します。


```.liquid
{% if additional_checkout_buttons %}
  <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
```


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

お疲れさまでした。


# Shopify アプリのご紹介

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

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search