Paginate not recognizing when page number changes

Shopify Discussion
1

I have the website here:

https://thelittlegifthive.co.uk/

When you go through to collections:

https://thelittlegifthive.co.uk/collections/christmas

and try to use the footer navigation to navigate to the next page it works for the numbers however when you click previous or next it fails to recognize that the page number has changed.

For example:

If I am on page 2 of the christmas collections:

https://thelittlegifthive.co.uk/collections/christmas?page=2

and I then click “next” it just scrolls to the top of the page but doesn’t load a different page.

The link in the footer when you hover over the “next” button is the same as the page you are currently on (https://thelittlegifthive.co.uk/collections/christmas?page=2)

If I refresh the page then it recognizes that the page has changed and the “next” or “prev” button will work but then if I try to click it twice, it will again still think I’m on the previous page.

It’s like it doesn’t recognize that the page has changed? Is this something I am missing? Or is it something that the page loader is missing when the “next” button is clicked and the new page is loaded?

MY code for the navigation is below:

{% if paginate.pages > 1 %}
    
      

        {% comment %}{% include 'collection-sorting' %}{% endcomment %}
      

      
	{%- paginate collection.products by 5 -%}
  {%- for article in collection.products -%}
    
  {%- endfor -%}

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

I also have the following css:

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
  
.pagination li {
  display: inline; 
  margin: 0 5px;
}
1 Like
2

I am having the same issue. Has anyone else worked this out?

3

I found a quick fix for my situation which may be different to yours. In my theme I found a collection.js.liquid file with an “initPaging: function()” I commented out everything in this function which disabled the scroll to top animation and reinstated the default reload page approach and fixed the navigation issue.