Liquid Snippets by ALSEL
🔍 コレクション/検索初級

ページネーション

複数ページに分割されたコレクションや検索結果に対して、前後ページへのリンクとページ番号を表示するナビゲーション。Bootstrap のページネーションクラスを使用し、アクセシビリティに対応している。

用途
コレクションページや検索結果で、商品一覧を複数ページに分割して表示するとき。ユーザーが任意のページに移動できるようにする。
設置場所
snippets/pagination.liquid に配置し、collection.liquid や search.liquid のメインコンテンツ下部で `{% render 'pagination', paginate: paginate %}` で呼び出す。ページネーション対象は Liquid タグの `{% paginate collection.products by 12 %}...{% endpaginate %}` で囲む必要がある。
注意点
このスニペットは `paginate` オブジェクトに依存するため、呼び出し元テンプレートが paginate タグで囲まれていることが前提。aria-label の 'general.accessibility.pagination' は翻訳キーであり、theme/locales/ja.json に該当する日本語訳を定義しておく。Bootstrap CSS(pagination、page-item、page-link クラス)が読み込まれていないと表示が崩れるため、theme.liquid の <head> で確認する。
タグ:paginationcollectionsearchaccessibilitybootstrap

コード

48 行 / liquid
{% if paginate.pages > 1 %}
  <nav aria-label="{{ 'general.accessibility.pagination' | t }}">
    <ul class="pagination justify-content-center my-6">
      {% if paginate.previous %}
        <li class="page-item">
          <a 
            class="page-link" 
            href="{{ paginate.previous.url }}" 
            aria-label="{{ paginate.next.title }}"
            data-new-page="{{ paginate.current_page | minus: 1 }}">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
      {% endif %}
      {% for part in paginate.parts -%}
        {% if part.is_link %}
          <li class="page-item">
            <a 
              class="page-link" 
              href="{{ part.url }}"
              data-new-page="{{ part.title }}">
              {{ part.title }}
            </a>
          </li>
        {% else %}
          <li 
            class="page-item {% if paginate.current_page == part.title %}active{% endif %}"
            aria-current="{% if paginate.current_page == part.title %}page{% endif %}">
            <span class="page-link">
              {{ part.title }}
            </span>
          </li>
        {% endif %}
      {% endfor %}
      {% if paginate.next %}
        <li class="page-item">
          <a 
            class="page-link" 
            href="{{ paginate.next.url }}" 
            aria-label="{{ paginate.next.title }}"
            data-new-page="{{ paginate.current_page | plus: 1 }}">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endif %}

出典・ライセンス

License:
MIT

このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。

関連項目

🔍 コレクション/検索初級

ページネーションの表示

ページネーションUI(前へ・次へ、ページ番号)を paginate オブジェクトから描画するスニペット。デフォルトのページネーション形式で複数ページに分割したコンテンツをナビゲートできる。

📁 shopify-code-snippets·MIT·6
🔍 コレクション/検索初級

ページネーションの現在位置表示

コレクションや検索結果の一覧ページで、現在のページ番号と全ページ数を表示する。Shopify の多言語対応翻訳キーを使用して、言語ごとに自動で表記を切り替える。

📁 shopify-code-snippets·MIT·6
🔍 コレクション/検索中級

検索結果のペジネーション比較

検索結果を paginate タグで複数パターン分割して表示するテンプレート。デフォルトペジネーションと window_size:1 オプション指定の両方の書き方を示しており、ページネーション動作の違いを検証するサンプルコード。

📁 theme-tools·MIT·12
🔍 コレクション/検索初級

検索結果のページネーション設定

検索結果を paginate タグでページ分割し、複数の window_size 設定を並べて出力する方法。28件単位のペーグネーションと、ウィンドウサイズを明示的に指定した設定の2パターンを示している。

📁 theme-tools·MIT·12
🔍 コレクション/検索初級

コレクションページの商品ギャラリー

コレクション内の商品を3列のテーブルレイアウトで表示するテンプレート。各商品にサムネイル、タイトル、価格(セール時は定価を取消線)を表示し、ページネーションに対応する。

📁 liquid·MIT·20
🔍 コレクション/検索初級

コレクションページの商品一覧

コレクション内の商品を一覧表示し、商品画像・タイトル・説明文・価格帯をカード状に並べる。ページネーション機能で20件ごとに分割表示する。

📁 liquid·MIT·23