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

[hdm]

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

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

  {%- 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 -%}

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

[Jizo_Inagaki]

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

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

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

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

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

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