# コレクション一覧のループ処理にページネーションを付ける

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

## AI-generated summary

Shopifyのコレクション一覧にページネーション（1ページ最大3件表示）を実装した際、空白要素が発生し正常に動作しない問題が報告されています。

**問題の詳細:**
- `{%- paginate collections by 3 -%}` でループ処理を実装
- `collection.metafields.custom.end == true` の条件でフィルタリング
- true以外のコレクションもカウントに含まれてしまう
- 実際の表示要素数は4件だが、2ページ目に3つの要素が表示される想定のところ、ページネーションの挙動が不正

**技術的背景:**
Liquidテンプレートでのpaginateタグとif文の組み合わせにより、フィルタリング前の総数でページ分割が行われているため、表示される実際のアイテム数とページネーションの計算が一致していない状態です。

現在、解決策は提示されておらず、質問は未解決のままです。

<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, 8:43am UTC](https://community.shopify.com/t/topic/243659/1 "2023-08-24T08:43:53Z")

</div>

最大3つまで表示するようにページネーションを作成し、コレクションをループ処理させたところ空白？の要素が生まれて（true以外のコレクションも数に含めれている）ページネーションの挙動がおかしくなってしまいました。

```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ページで1ページ目に3つの要素が表示されると思っていました。

こちらの解決策などお分かりになる方がいましたらご教授いただきたいです。

よろしくお願い致します。