ブログ

Blog

Posted at: 2024-06-25

【Shopify】paginateオブジェクトを使ってページネーションを実装する

今回はShopifyでブログ一覧ページなどにページネーションを実装する方法をご紹介します。

Shopifyではページネーションを実装するためのオブジェクトとして、paginateオブジェクトというものが用意されています。

今回はそのpaginateオブジェクトを利用し、独自のページネーションを作成していきます。

INDEX

ページネーション実装コード

細かいことはどうでもいいから実装の仕方だけ知りたいよっていう方のために、先に実装コードをご紹介します。

今回ご紹介するのは一例として、ブログ記事の一覧ページへの実装です。

{% paginate blog.articles by 5 %}
  <!-- 記事一覧の出力 -->
  {% if blog.articles.size > 0 %}
    <ul class="articles">
      <li class="article">
        <a href="{{ article.url }}">{{ article.title | escape }}</a>
      </li>
    </ul>
  {% else %}
    記事がないとき
  {% endif %}

  <!-- ページネーションの出力 -->
  {% if paginate.pages > 1 %}
    <nav class="pagination-wrapper" role="navigation">
      <ol class="pagination__list">
        <!-- 前のページボタン -->
        {% if paginate.previous %}
          <li class="pagination__item--prev">
            <a href="{{ pagination.previous.url }}">Previous</a>
          </li>
        {% else %}
          <li class="disabled pagination__item--prev">
            Previous
          </li>
        {% endif %}

        <!-- ページ番号ボタン -->
        {% for part in paginate.parts %}
          {% if part.is_link %}
            <li class="pagination__item">
              <a href="{{ part.url }}">{{ part.title }}</a>
            </li>
          {% else %}
            {% if part.title == paginate.current_page %}
              <li class="pagination__item active" aria-current="page">
                {{ part.title }}
              </li>
            {% else %}
              <li class="pagination__item">
                {{ part.title }}
              </li>
            {% endif %}
          {% endif %}
        {% endfor %}

        <!-- 次のページボタン -->
        {% if paginate.next %}
          <li class="pagination__item--next">
            <a href="{{ pagination.next.url }}">Next</a>
          </li>
        {% else %}
          <li class="disabled pagination__item--next">
            Previous
          </li>
        {% endif %}
      </ol>
    </nav>
  {% endif %}
{% endpaginate %}

上記のコードを既存のmain-blog.liquidのような一覧ページに実装することで、ページネーションを実装することが可能になります。

今回CSSの部分は省略しますが、利用するテーマによっては既にページネーション用のCSSファイルが用意されている場合がありますので、各環境に合わせて適用してください。

解説

Shopifyのpaginateオブジェクトはblog.articlesのようなオブジェクトを指定数で分割してくれます。

{% paginate blog.articles by 5 %}

例えば、この書き方であればblog.articlesを1ページあたり5記事ずつに分割しています。

paginateオブジェクトにはページネーションに関する便利なプロパティが用意されています。

例えば、「前のページ」「次のページ」ボタンを実装したければ、paginate.previousとpaginate.nextを使うことができます。

ページネーションボタンの現在開いているページのliタグにcurrent_pageのようなクラス名を付けたければ、paginate.current_pageを利用します。

またページネーションボタンは上記のようにcurrent_pageの前後2個まで表示し、あとは自動的に「…」に置き換えられるようになっています。

注意点

ただこのpaginateオブジェクトの注意点として、ソートに対応できないということがあります。

{% assign sorted_articles = blog.articles | sort: 'published_at' %}
{% paginate sorted_articles by 5 %}
  <!-- 記事一覧の出力 -->
  {% if sorted_articles.size > 0 %}
    <ul class="articles">
      <li class="article">

例えば上記のようにブログ記事一覧をソートした配列を定義し、その配列をpaginateに分割すると「Liquid error (sections/main-blog line 14): Array ‘sorted_articles.articles’ is not paginateable.」というようなエラーが発生し、正しく処理が行えません。

paginateが受け付けられるのはオブジェクトのみで、sorted_articlesは配列になっているためpaginateが受け付けられない状態になってしまっています。

このようにソートをかけてページネーションを実装できないという問題点があるため、もしソートを使えるページネーションを実装する場合には既存のpaginateオブジェクトを利用せず、独自にページネーションを用意するか外部アプリを探すかになるかと思います。