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

hdm · ‎05-06-2021

{% paginate collections by 3 %}
  <ul class="collection-list-box">
{% for collection in collections reversed %}
　{% if collection.template_suffix == 'hoge' %}
    <li class="item-{{ collection.id }} collection-list-item">
    <a href="{{ collection.url }}"><img src="{{ collection.image | img_url: 'medium' }}">
    <span>{{ collection.title }}</span></a>
    </li>
          {% endif %}
          {% endfor %}
  </ul>

  {%- if paginate.pages > 1 -%}
<ul class="list--inline pagination">
  {% unless paginate.previous.is_link %}
    <li aria-hidden="true">
      <button class="btn btn--tertiary btn--narrow" disabled>
        {% include 'icon-arrow-left' %}
        <span class="icon__fallback-text">{{ 'general.pagination.previous' | t }}</span>
      </button>
    </li>
    {% else %}
    <li>
      <a href="{{ paginate.previous.url }}" class="btn btn--tertiary btn--narrow">
        {% include 'icon-arrow-left' %}
        <span class="icon__fallback-text">{{ 'general.pagination.previous' | t }}</span>
      </a>
    </li>
  {% endunless %}
  <li class="pagination__text">
    {{ 'general.pagination.current_page' | t: current: paginate.current_page, total: paginate.pages }}
  </li>
  {% unless paginate.next.is_link %}
    <li aria-hidden="true">
      <button class="btn btn--tertiary btn--narrow" disabled>
        {% include 'icon-arrow-right' %}
        <span class="icon__fallback-text">{{ 'general.pagination.next' | t }}</span>
      </button>
    </li>
  {% else %}
    <li>
      <a href="{{ paginate.next.url }}" class="btn btn--tertiary btn--narrow">
        {% include 'icon-arrow-right' %}
        <span class="icon__fallback-text">{{ 'general.pagination.next' | t }}</span>
      </a>
    </li>
  {% endunless %}
</ul>
  {%- endif -%}
{%- endpaginate -%}
{% endcomment %}

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

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

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

Jizo_Inagaki · ‎05-14-2021

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

https://community.shopify.com/c/Shopify-Discussion/Sort-collection-order-by-Published-or-Last-Modifi...

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

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

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

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAQ-A/%E7%89%B9%E5%AE%9A%E3%81%AE%...

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

hdm · ‎05-18-2021

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

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

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

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