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

はじめに

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

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

page_image オブジェクト

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

Input

{{ page_image | img_url }}

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でシェアする画像が提供されていない場合のフォールバック動作についてはこちらをご覧ください。

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は、検索エンジンのリスティングやソーシャルメディアのフィードでシェアされた投稿のためにページのタイトルを識別するためによく使われます。

Input

<title>{{ page_title }}</title>

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オブジェクトについてはこちら。

paginate.parts

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

paginate.next

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

Input

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

Output

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

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

pagenate.previous

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

Input

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

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 機能を実現することができます。