# ページネーションのループ処理で空白が生まれる

**URL:** <https://community.shopify.com/t/topic/243622>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [August 24, 2023, 7:02am UTC](https://community.shopify.com/t/topic/243622 "2023-08-24T07:02:02Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

コレクション一覧でLiquidのpaginateを使いながら、ループ内でmetafield条件（collection.metafields.custom.end == true）で絞り込んだ結果、グリッドに空白が出てページネーションの挙動が乱れる問題。

原因・背景:
- paginate by 3は「ページごとに3件だけ先に取得」する仕様。
- 取得後にループ内条件で出力を絞ると、表示件数だけが減り、空白や想定外のページ数になる（仕様通りの動作）。
- 「フィルタ後の件数に基づくページング」をLiquid単体で実現するのは困難。

提案された対処案:
- グローバルオブジェクトを書き換えるハック手法の可否を調査。
- コレクションリストに対応するアプリを導入するか、自作する。
- 件数が50件以下なら、全件を出力してからJavaScriptで擬似ページネーションを実装。

補足:
- 画像は挙動（空白・想定外のページ分割）の例示。技術的核心はpaginateの仕様に起因。

現状・結論:
- 公式仕様上の制約であり、明確な解決は未確定。上記の代替アプローチ検討が推奨。

<div class="post-metadata">

**Author:** ![hdm](https://avatars.discourse-cdn.com/v4/letter/h/8797f3/32.png) [@hdm](https://community.shopify.com/u/hdm)\
**Post date:** [August 24, 2023, 7:02am UTC](https://community.shopify.com/t/topic/243622/1 "2023-08-24T07:02:02Z")

</div>

コレクション一覧にページネーションを実装し、条件分岐にて表示する内容を絞り込もうとした結果謎の空白が生まれてページネーションの挙動がおかしくなってしまいました。

こちらの対処方法などご存じの方がいましたらご教授いただけると助かります。

```auto
  {%- paginate collections by 3 -%}
    <ul
      class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
      role="list"
    >
      {%- for collection in collections -%}
        {% if collection.metafields.custom.end == true %}
        <li {{ forloop.index }}
          class="collection-list __item grid__ item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
        >
          {% render 'card-collection',
            card_collection: collection,
            media_aspect_ratio: section.settings.image_ratio,
            columns: 3
          %}
        </li>
      {% endif %}
      {%- endfor -%}
    </ul>
    {% render 'pagination', paginate: paginate %}
  {%- endpaginate -%}

```

 ![sample1.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/a/abba0ce4b75d9c42d493cb5db990129a3a98dd57.jpeg)

 ![sample2.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/6/362b1201585274011844745f8953ea7032363e26.jpeg)

 ![sample3.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/f/bfb9fd4351a6e97c7cf50ab69a0b003ebd58d28a.jpeg)

要素の数が4つなので本来はページネーションが2ページまでで、一ページ目に3つ表示されると思っていたのですが全然違う挙動になってしまいました。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [August 28, 2023, 10:09am UTC](https://community.shopify.com/t/topic/243622/2 "2023-08-28T10:09:16Z")

</div>

仕様に沿った状態だと思います。

paginateのby 3によって1ページに3つデータが読み込まれるため、そこからループ内で何らかの条件により出力を制限すれば、その分だけ表示が減るためです。

基本的にpaginateを使う場合は記載されたような操作では対応できないので、liquidで要望を満たすのは困難だと思います。

(※URLは覚えていませんが、以前にコレクションページでグローバルオブジェクトを無理やり書き換える方法を提案している回答があったと思いますので、それが実行可能かどうか調査してみるのもよいかもしれません)

コレクションリストページに作用するアプリがあるのか把握していませんが、アプリ探すか自作するになると思います。

または全部で50件以下なら、全て取得してからJSで擬似的にページネーションを実装できるような仕組みを作ることも検討できるかもしれません。