Pagination customer orders not working on account page

Pagination customer orders not working on account page

EddieBui
Shopify Partner
3 0 1

Pagination not working right:

{%- paginate customer.orders by 5 -%}
          <div class="account__block-list">            
                  .....
                {%- when 'orders' -%}
                  <div class="v-stack gap-5" {{ block.shopify_attributes }}>
                    <div class="order-grid-list">
                      {%- for order in customer.orders -%}
                        <div class="order-grid-item rounded-sm">
....
{{ paginate | default_pagination }}
                    {%- render 'pagination', paginate: paginate -%}
                  </div>
              {%- endcase -%}
            {%- endfor -%}
          </div>
        {%- endpaginate -%}
 
I'm trying to use default and a coding liquid pagination but still not working. I have check the
paginate.pages = 1 while I have more than 20 orders.
 
Replies 6 (6)

Liam
Shopify Staff
2846 311 811

Hi EddieBui,

 

 

What are you seeing when this code runs - are you seeing any pagination elements appearing at all, and are you still seeing the orders appear? According to our docs, the paginate tag does work with `customer.orders` so you should be able to get default pagination working with these orders. 

 

For an example of how pagination can be implemented on an account page, you can check out how it's working on Dawn here

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

EddieBui
Shopify Partner
3 0 1

Hi Liam,

there is no pagination elements appearing at all, I just can only see 5 orders per 7 in total. I have found that 'paginate customer.orders by 5' in this paginate object: paginate.pages = 1 although the customer.orders over than 5

Liam
Shopify Staff
2846 311 811

In Dawn there's extra pagination and page rules being set up that you can see here, can you follow that method to display next/ previous buttons?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

rpbiwer
Shopify Partner
19 0 6

I'm having the same problem as EddieBui and modeled my code after the example from Dawn that you linked to. In my case, paginate.parts.size is 0. The default_pagination liquid tag also outputs nothing.

 

If I do {{ paginate | json }}, I get the following:

{"current_offset":0,"current_page":1,"items":0,"page_size":2,"parts":[],"pages":1}

 

Edit: also, in my case I'm paginating by 2 and have a total of 3 orders.

rpbiwer
Shopify Partner
19 0 6

I just found this GitHub issue: https://github.com/Shopify/dawn/issues/2230

Looks like it's related to test orders. I'm not sure how a theme developer is supposed to test pagination if test orders don't count.

EddieBui
Shopify Partner
3 0 1

Hi, I agree with this, maybe the paginate does not count the test orders or the test bogus/test card payment. I have the same question how can we test the pagination with orders before we push it to the current storefront