Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?
Organization

【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.items120を返します。

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タグによって作成されたページ数を返します。

終わりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?