Liquid Snippets by ALSEL
📘 公式リファレンス🏷️ リファレンス/タグ中級

paginate タグ(配列を複数ページに分割)

50件を超える配列を複数ページに分割して表示する Liquid タグ。for ループの 50イテレーション制限を回避し、ページネーション対応で大量の商品やコメントを効率的に処理する。

用途
コレクションページで 50件以上の商品を表示する、ブログのコメント一覧をページネーション付きで出す、顧客の過去注文履歴を分割表示するなど。
設置場所
collection.liquid や product.liquid 内など、ページネーション対象の配列をループする前後を `{% paginate array by page_size %}...{% endpaginate %}` で囲む。内部で `{% for item in array %}` を使い、ページ下部に `{{ paginate | default_pagination }}` でページリンクを表示。
注意点
page_size は 1~250 の範囲で指定し、25,000 件目を超えるアイテムには到達できないため、必要に応じ paginate 前に配列をフィルタする。article_list / collection_list / product_list の設定タイプのページネーションは自動的に独立した query パラメータ(paginate.page_param)を持つので、同じページで複数ページネーション実装する場合は Section Rendering API 活用を検討するとよい。
タグ:paginationiterationarrayfor-loopperformance

仕様

80 行 / json
{
  "category": "iteration",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "Because [`for` loops](/docs/api/liquid/tags/for) are limited to 50 iterations per page, you need to use the `paginate` tag to\niterate over an array that has more than 50 items. The following arrays can be paginated:\n\n- [`article.comments`](/docs/api/liquid/objects/article#article-comments)\n- [`blog.articles`](/docs/api/liquid/objects/blog#blog-articles)\n- [`collections`](/docs/api/liquid/objects/collections)\n- [`collection.products`](/docs/api/liquid/objects/collection#collection-products)\n- [`customer.addresses`](/docs/api/liquid/objects/customer#customer-addresses)\n- [`customer.orders`](/docs/api/liquid/objects/customer#customer-orders)\n- [`metaobject_definition.values`](/docs/api/liquid/objects/metaobject_definition#metaobject_definition-values)\n- [`pages`](/docs/api/liquid/objects/pages)\n- [`product.variants`](/docs/api/liquid/objects/product#variants)\n- [`search.results`](/docs/api/liquid/objects/search#search-results)\n- [`article_list` settings](/themes/architecture/settings/input-settings#article_list)\n- [`collection_list` settings](/themes/architecture/settings/input-settings#collection_list)\n- [`product_list` settings](/themes/architecture/settings/input-settings#product_list)\n\nWithin the `paginate` tag, you have access to the [`paginate` object](/docs/api/liquid/objects/paginate). You can use this\nobject, or the [`default_pagination` filter](/docs/api/liquid/filters/default_pagination), to build page navigation.\n\n> Note:\n> The `paginate` tag allows the user to paginate to the 25,000th item in the array and no further. To reach items further in\n> the array the array should be filtered further before paginating. See\n> [Pagination Limits](/themes/best-practices/performance/platform#pagination-limits) for more information.",
  "parameters": [
    {
      "description": "The number of pages to display in the pagination.",
      "name": "window_size",
      "positional": false,
      "required": false,
      "types": [
        "string"
      ]
    }
  ],
  "summary": "Splits an array's items across multiple pages.",
  "name": "paginate",
  "syntax": "{% paginate array by page_size %}\n  {% for item in array %}\n    forloop_content\n  {% endfor %}\n{% endpaginate %}",
  "syntax_keywords": [
    {
      "keyword": "array",
      "description": "The array to be looped over."
    },
    {
      "keyword": "page_size",
      "description": "The number of array items to include per page, between 1 and 250."
    },
    {
      "keyword": "item",
      "description": "An item in the array being looped."
    },
    {
      "keyword": "forloop_content",
      "description": "Content for each loop iteration."
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/collections/all",
      "raw_liquid": "{% paginate collection.products by 5 %}\n  {% for product in collection.products -%}\n    {{ product.title }}\n  {%- endfor %}\n\n  {{- paginate | default_pagination }}\n{% endpaginate %}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "Paginating setting arrays",
      "description": "To allow the pagination of `article_list`, `collection_list` and `product_list` settings to operate independently from other paginated lists on a page, these lists use a pagination query parameter with a unique key. The key is automatically assigned by the `paginate` tag, and you don't need to reference the key in your code. However, you can access the key using [`paginate.page_param`](/docs/api/liquid/objects/paginate#paginate-page_param).\n\n> Tip:\n> To paginate two arrays independently without refreshing the entire page, you can use the [Section Rendering API](/docs/api/ajax/section-rendering).\n",
      "syntax": "",
      "path": "/",
      "raw_liquid": "",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "Limit data fetching",
      "description": "The [`limit` parameter](/docs/api/liquid/tags/for#for-limit) of the `for` tag controls the number of iterations, but not the amount of information fetched. Using the `paginate` tag with a matching `page_size` can reduce the data queried, leading to faster server response times. \n\nFor example, referencing `collection.products` will fetch up to 50 products by default, regardless of the forloop's `limit` parameter. Use `paginate` and set a `page_size` to limit the amount of data fetched, and opt not to display any pagination controls.\n\nMore data than requested in a specific section may be returned. Because of this, make sure to include both `paginate` and `limit` when using this technique.\n",
      "syntax": "",
      "path": "/collections/all",
      "raw_liquid": "{% paginate collection.products by 4 %}\n  {% for product in collection.products limit: 4 -%}\n    {{ product.title }}\n  {%- endfor %}\n{% endpaginate -%}\n\n<!-- Less performant method -->\n{% for product in collection.products limit: 4 -%}\n  {{ product.title }}\n{%- endfor -%}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "window_size",
      "description": "Set the window size of the pagination. The window size is the number of pages that should be visible in the pagination navigation.\n",
      "syntax": "{% paginate collection.products by 3, window_size: 1 %}",
      "path": "/collections/all",
      "raw_liquid": "{% paginate collection.products by 3, window_size: 1 %}\n  {% for product in collection.products -%}\n    {{ product.title }}\n  {%- endfor %}\n\n  {{- paginate | default_pagination }}\n{% endpaginate %}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    }
  ]
}

出典・ライセンス

License:
MIT

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

関連項目

📘 公式リファレンス🏷️ リファレンス/タグ中級

doc タグ(テンプレートの注釈・ドキュメント)

Liquid テンプレート内にドキュメンテーションコメントを埋め込むタグ。`{% doc %}` ~ `{% enddoc %}` に囲まれたコンテンツは画面に出力されず、内部の Liquid コードは解析されるが実行されない。コード補完、リンティング、インラインドキュメント機能の実装を支援する。

📁 theme-liquid-docs·MIT·12
📘 公式リファレンス🏷️ リファレンス/タグ初級

include タグ(スニペットを埋め込む)

スニペットファイルを Liquid テンプレート内に埋め込んでレンダリングする。埋め込み先の変数にアクセス・変更できるため、親テンプレートと子スニペット間でデータを直接共有する。

📁 theme-liquid-docs·MIT·17
📘 公式リファレンス🏷️ リファレンス/タグ中級

javascript タグ(セクション・ブロック内のコード)

セクション、ブロック、スニペット内に JavaScript コードを記述するタグ。このタグ内に書いた JavaScript は Shopify のテーマビルドシステムにより自動的に読み込まれて実行される。

📁 theme-liquid-docs·MIT·17
📘 公式リファレンス🏷️ リファレンス/タグ初級

sections タグ(セクショングループを描画)

セクショングループをテーマのレイアウト内で描画するタグ。レイアウトファイル内に配置して、複数のセクションをグループ化した内容を出力する。

📁 theme-liquid-docs·MIT·17
📘 公式リファレンス🏷️ リファレンス/タグ初級

stylesheet タグ(CSS定義)

セクション、ブロック、スニペット内で CSS スタイルを定義するタグ。各ファイルにつき1つだけ記述でき、定義した CSS はそのコンポーネント固有の外側スコープで読み込まれて実行される。

📁 theme-liquid-docs·MIT·17
📘 公式リファレンス🏷️ リファレンス/タグ初級

break タグ(ループの中断)

for ループの反復処理を途中で停止するタグ。指定した条件に達したら以降の反復をスキップして、ループを抜ける。

📁 theme-liquid-docs·MIT·23