🔍 コレクション/検索中級
paginate タグの複数属性対応
Liquid の paginate タグでコレクション商品をページング処理する実装例。pageSize 単一属性のほか、window_size やカスタム属性を複数指定した場合のコード整形パターンを示す。
用途
コレクションページで大量商品をページ分割表示するとき。ページサイズやウィンドウサイズを柔軟に指定する必要がある場合。
設置場所
templates/collection.liquid または sections/main-collection.liquid 内でコレクション商品をループする際に、`{% paginate collection by pageSize %}` で囲んで利用する。
注意点
paginate タグは Online Store 2.0 では非推奨で、Pagination API への移行が公式推奨。ページングリンク(前へ・次へ)の表示は `paginate.prev.url` と `paginate.next.url` を別途指定する必要があり、タグ内だけではリンク生成されない。window_size やカスタム属性は Shopify 公式ドキュメントに記載されていないため、テーマ更新時に動作が変わる可能性がある。
コード
27 行 / liquidIt takes a collection and a pageSize
{% paginate collection by pageSize %}{% endpaginate %}
It breaks on by pageSize when printWidth is hit
printWidth: 1
{% paginate collection
by pageSize
%}
{{ collection }}
{% endpaginate %}
It is undocumented, but it also accepts named attributes (window_size). Those are comma separated.
printWidth: 80
{% paginate collection by pageSize, window_size: 50, attr: (0..2) %}
{{ collection }}
{% endpaginate %}
It is undocumented, but it also accepts named attributes (window_size). We print
those comma separated and on a new line when it breaks.
printWidth: 1
{% paginate collection
by pageSize,
window_size: 50
%}
{{ collection }}
{% endpaginate %}
出典・ライセンス
- Source:
- Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/liquid-tag-paginate/fixed.liquid
- Repository:
- https://github.com/Shopify/theme-tools
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は 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 行