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

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

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

用途

検索結果ページの表示設計を検討するとき、あるいは prettier-plugin-liquid のテストケースとして、異なるペジネーション設定の挙動を確認したいシーン。

設置場所

templates/search.liquid に配置し、search.results に対して paginate タグでループする。layout none により HTML 骨組みをスキップするため、カスタム JSON 出力やAjax 検索のバックエンド応答として機能させるときに用いる。

注意点

layout none を指定しているため、このテンプレート単独では HTML 骨組みが出力されず、管理画面のテーマカスタマイザーでは何も表示されない。通常の検索結果ページが必要なら layout none を削除するか、別ファイルで layout theme を指定する。paginate の window_size:1 は検索ボットのクローリング負荷を減らす設定で、ページネーションリンクを最小限にするため、ユーザー向けページ表示には不要な場合が多い。

タグ:searchpaginationproduct-itemliquid-syntax

コード

12 行 / liquid

{%- liquid
layout none

paginate search.results by 28
  render 'product-item', product: item
endpaginate

paginate search.results by 28 window_size:1
  render 'product-item', product: item
endpaginate
-%}

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/issue-154/index.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

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

コード

出典・ライセンス

関連項目

ページネーションの表示

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

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

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

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

paginate タグ（ページネーション）