# コレクション一覧ページにページネーションを設置し、新着順に表示したい。

**URL:** <https://community.shopify.com/t/topic/45736>\
**Category:** 技術的なQ＆A\
**Created:** [May 6, 2021, 10:36am UTC](https://community.shopify.com/t/topic/45736 "2021-05-06T10:36:51Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

- 目的: コレクション一覧にページネーションを設置し、「新着順」で表示しつつ、template_suffix が "hoge" のコレクションのみを表示したい（Liquid＝Shopifyのテンプレート言語）。

- 現状/課題: paginate collections の後に if で絞っているため、条件外のコレクションもページ総数に含まれ、空白ブロックや余分なページが発生。表示順も「新着順」にできず困っている。

- 回答: 「新着順」を「更新日順（last modified）」と解釈すると、Liquid でコレクションをその基準で並べ替えることは現状不可能との指摘。未検証の回避策に関する参考リンクが提示されたが、確実な解は示されていない。

- 解決策（部分）: 空白とページ数過多は、ページネーション前にコレクションを where で絞り込むことで解消可能。例: assign collections = collections | where: "template_suffix", "hoge" を行ってから paginate/for を適用。

- 状態: 並び順の要件は未解決。フィルタリングに関する対処は提示され、部分的に収束。コード断片が理解の中心。

<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:** [May 6, 2021, 10:36am UTC](https://community.shopify.com/t/topic/45736/1 "2021-05-06T10:36:51Z")

</div>

```markup
{% paginate collections by 3 %}
  

{% for collection in collections reversed %}
　{% if collection.template_suffix == 'hoge' %}
    - {{ collection.title }}
    
          {% endif %}
          {% endfor %}
  

  {%- if paginate.pages > 1 -%}

  {% unless paginate.previous.is_link %}
    - 

    {% else %}
    - {% include 'icon-arrow-left' %}
          {{ 'general.pagination.previous' | t }}
      
    

  {% endunless %}
  - {{ 'general.pagination.current_page' | t: current: paginate.current_page, total: paginate.pages }}
  

  {% unless paginate.next.is_link %}
    - 

  {% else %}
    - {% include 'icon-arrow-right' %}
          {{ 'general.pagination.next' | t }}
      
    
  {% endunless %}

  {%- endif -%}
{%- endpaginate -%}
{% endcomment %}

```

上記の方法でコードでページネーションはできたのですが表示順を新着順にする方法がわからず困っています。

また、テンプレートhoge以外のものも数に含まれており、空白のブロックができてしまいます。

原因がわからずに困っています。

---

<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:** [May 14, 2021, 6:42pm UTC](https://community.shopify.com/t/topic/45736/2 "2021-05-14T18:42:16Z")

</div>

「新着順」が「更新日順」という意味でしたら、現状ではLiquidを用いた並び替えでは不可能だと思われます。

[https://community.shopify.com/c/Shopify-Discussion/Sort-collection-order-by-Published-or-Last-Modified-Date/m-p/770285](https://community.shopify.com/c/Shopify-Discussion/Sort-collection-order-by-Published-or-Last-Modified-Date/m-p/770285)

[https://community.shopify.com/c/Shopify-Discussion/Sort-collection-order-by-Published-or-Last-Modified-Date/m-p/770285/highlight/true#M176416](https://community.shopify.com/c/Shopify-Discussion/Sort-collection-order-by-Published-or-Last-Modified-Date/m-p/770285/highlight/true#M176416)

少し古い上未検証ですが以下などは対応策検討の参考になるかもしれません。

[https://community.shopify.com/c/Shopify-Design/Music-store-need-to-sort-by-release-date/td-p/261447](https://community.shopify.com/c/Shopify-Design/Music-store-need-to-sort-by-release-date/td-p/261447)

空白のブロックというのはわかりかねますが、想定したよりも多い数のページネーションが表示されるということでしたら以下のスレッドを参照ください。

[https://community.shopify.com/post/556580](https://community.shopify.com/post/556580)

---

<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:** [May 19, 2021, 2:58am UTC](https://community.shopify.com/t/topic/45736/3 "2021-05-19T02:58:59Z")

</div>

現状新着順というのは難しいのですね・・・

空白というのはコレクションを{% paginate collections by 6 %}をつかいページネーションを付けた場合にすべてのコレクションが表示されてしまうので

{% if collection.template\_suffix == ‘hoge’ %}で特定の条件のコレクションを表示したのですが、ページネーションですべてのコレクションを一度取得しているみたいで

条件分岐にはじかれたコレクションが表示自体はされないのですが、すべてのコレクションの数に合うようにページネーションが生成さ、余分な空白とページネーションができてしまっています。

---

<div class="post-metadata">

**Author:** ![yapp](https://avatars.discourse-cdn.com/v4/letter/y/49beb7/32.png) [@yapp](https://community.shopify.com/u/yapp)\
**Post date:** [July 31, 2022, 11:11am UTC](https://community.shopify.com/t/topic/45736/4 "2022-07-31T11:11:37Z")

</div>

assign collections = collections | where: “template\_suffix”, “hoge”

とすることで最初にcollectionsを絞り込めます