🔍 コレクション/検索初級
ページネーション
複数ページに分割されたコレクションや検索結果に対して、前後ページへのリンクとページ番号を表示するナビゲーション。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> で確認する。
コード
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">«</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">»</span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- 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 行