Pagination breaks when collections list gets sorted

Online Store and Theme Development
,
1

(Cross post: Shopify Community)

I’m seeing some weird behavior on the /collections page.

This was tested on the Dawn theme (version 15.2.0). If I select anything other than ‘alphabetical’, the pagination fails, and all the collections are rendered at once.

Snippet from the Dawn theme code:

  {%- liquid
    case section.settings.sort
      when 'products_high', 'products_low'
        assign collections = collections | sort: 'all_products_count'
      when 'date', 'date_reversed'
        assign collections = collections | sort: 'published_at'
    endcase

    if section.settings.sort == 'products_high' or section.settings.sort == 'date_reversed' or section.settings.sort == 'alphabetical_reversed'
      assign collections = collections | reverse
    endif

    assign moduloResult = 28 | modulo: section.settings.columns_desktop
    assign paginate_by = 30
    if moduloResult == 0
      assign paginate_by = 28
    endif
  -%}
  {%- paginate collections by paginate_by -%}
    <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 -%}
        <li
          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>
      {%- endfor -%}
    </ul>
    {% render 'pagination', paginate: paginate %}
  {%- endpaginate -%}

As a side note, my store uses the Impulse theme (version 5.5.1). In this theme, the sorting logic is placed inside the paginate tag, presumably as a workaround. The pagination does work in this case, but with a different unexpected behavior: it paginates the same way as alphabetical sorting, but then each page is individually sorted by date, product count, etc.

I can’t imagine this as something that can be fixed easily on the front end, but I’d appreciate any help.

1 Like
2

Hey @AttaC - thanks for flagging this and for the replication steps - I believe I was able to replicate this on my end. I’ll do some more digging into this to confirm expected behaviour or if this is a possible issue on our end. I’ll loop back with you once I have a bit more info to share.

4

Hi @AttaC - I was able to chat with the team and just wanted to confirm that this is a known issue with Dawn. I can’t guarantee a turnaround time for a fix, but did want to let you know this is something the team is aware of and we do have it tracked as an open issue internally.

If you’d ever like an update, please feel free to ping me here in this thread and I can take a look. I’ll mark this as “solved” for now, but if I can help with anything else, just let me know :slight_smile:

1 Like