【Shopify】liquidのオブジェクトについてまとめてみた (page_image, page_title, pagenate)

# はじめに

この記事は、Liquid オブジェクトについて日本語訳したものです。

`page_image`, `page_title`, `pagenate`ブジェクトをまとめていきます。

# page_image オブジェクト

SNSのフィードや検索エンジンのリスティングに表示される関連画像の画像ドロップを返します。

```.liquid:Input
{{ page_image | img_url }}
```

```.liquid:Output
//cdn.shopify.com/s/files/1/0987/1148/files/nice-candle-and-rocks_300x300.jpg?v=1590502771
```

商品ページ、コレクションページ、ブログ記事の場合、`page_image`はリソースの設定された画像が存在する場合、そのリソースの設定された画像です。
例えば、商品ページの`page_image`はその`product.feature_image`と同じです。フィーチャー画像が存在しない場合、`page_image`は管理画面で設定されたストアのソーシャル共有画像に基づいています。

SNSでシェアする画像の設定と、SNSでシェアする画像が提供されていない場合のフォールバック動作については[こちら](https://help.shopify.com/en/manual/online-store/os/using-themes/change-the-layout/theme-settings/showing-social-media-thumbnail-images#setting-the-social-sharing-image-in-your-admin)をご覧ください。



## Open Graph tagsのフォールバックについて

`page_image`ドロップは、Open Graph の`og:image`メタタグを作成するためにテーマでよく使用されます。

テーマのコードベースがページの`og:image`タグを提供していない場合、ページがレンダリングされたときに Shopify が自動的に`og:image`タグを生成します。フォールバックマークアップは以下のメタタグを生成します。

- `og:image`
- `og:image:secure_url`
- `og:image:width`
- `og:image:height`



# page_title オブジェクト

`page_title`は、管理画面のそれぞれのセクションで設定されているページのタイトルを返します。
`page_title`は、検索エンジンのリスティングやソーシャルメディアのフィードでシェアされた投稿のためにページのタイトルを識別するためによく使われます。

```.liquid:Input
<title>{{ page_title }}</title>
```

```.liquid:Output
<title>私たちについて</title>
```

商品、ページ、コレクション、ブログ、ブログ記事のリソースのために、ページのタイトルは、検索エンジンのリスティング設定から取得されます。
ホームページの場合、page_titleは管理画面の「オンラインストア > 各種設定」の設定から取得されます。



# pagenate オブジェクト

`paginate`タグのナビゲーションは、`paginate`オブジェクトの属性を使って構築されます。そのため、`pagenate`オブジェクトは、`pagenate`タグの中でのみ使用することができます。

より迅速な代替手段として`default_pagination`フィルタを使用することもできます。

`pagenate`オブジェクトの属性について見ていきます。



## paginate.current_offset

`paginate.current_offset`は、現在のページより前のページにあるアイテムの総数を返します。

例えば、1ページのアイテム数を`5`に設定し、ページを分割しているとします。この状態で、3ページ目にある場合`paginate.current_offset`は、`10`を返します。



## paginate.current_page

`paginate.current_page`は、現在のページの番号を返します。



## paginate.items

`paginate.items`は、ページ分割するアイテムの総数を返します。

例えば、アイテム数`120`個のコレクションをページ分割する場合、`paginate.items`は`120`を返します。

`part`オブジェクトについては[こちら](https://shopify.dev/docs/themes/liquid/reference/objects/part/)。



## paginate.parts

`paginate.parts`は、ページ分割のすべての`parts`の配列を返します。
`parts`とは、ページ分割のナビゲーションを構築するために使用されるコンポーネントのことです。



## paginate.next

`paginate.next`は、ページネーションナビゲーションの**Next**リンクの`part`変数を返します。

```.liquid:Input
{% if paginate.next.is_link %}
  <a href="{{ paginate.next.url }}">{{ paginate.next.title }}</a>
{% endif %}
```

```.liquid:Output
<!-- 最後のページではなく、次のページへのリンクが必要な場合は -->
<a href="/collections/all?page=17">Next »</a>
```

上の例は、16ページ目にいるときの挙動になります。`{{ paginate.next.url }}`は、次のページのリンクを返すので`?page=17`と URL の末尾についています。


## pagenate.previous

`pagenate.previous`は、ページネーションナビゲーションの前のリンクの部分変数を返します。

```.liquid:Input
{% if paginate.previous.is_link %}
  <a href="{{ paginate.previous.url }}">{{ paginate.previous.title }}</a>
{% endif %}
```

```.liquid:Output
<!-- 最初のページではなく、前のページへのリンクが必要な場合は -->
<a href="/collections/all?page=15">« Previous</a>
```

上の例は、16ページ目にいるときの挙動になります。`{{ paginate.previous.url }}`は、前のページのリンクを返すので`?page=15`と URL の末尾についています。



## paginate.page_size

`paginate.page_size`は、1ページあたりの表示件数を返します。



## pagenate.pages

`pagenate.pages`は、`pagination`タグによって作成されたページ数を返します。


# 終わりに

今回の記事はここまでになります。
お疲れ様でした。

# 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