Why is my metaobject pagination not working?

[Jeff1843]

My pagination suddenly doesn't work on metaobject, an array of products. 
It used to paginate correctly, where when I click on a page, the url parameter page_ca99c4e5=2, the render will render correctly.

{% paginate collection by numberOfProducts %}

{{- paginate | default_pagination }}

{% endpaginate %}

[KaristonStefane]

I have the same problem, has anyone managed to find a solution?

[niku0911]

Same error on my theme also

[nikunjDev]

For Pagination you can try below code to solve your issue,

{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '' %}
{%- endif -%}

add "pagination.liquid" file in your Snippets and add below code

{%- if paginate.parts.size > 0 -%}
<div class="pagination-wrapper">
<nav class="pagination" role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
<ul class="pagination__list list-unstyled" role="list">
{%- if paginate.previous -%}
{% assign original_string = paginate.previous.url %}
{% assign specific_string = "page" %}
{% assign specific_string2 = "=" %}
{% assign content_after_specific_string = original_string | split: specific_string | last %}
{% assign content_after_specific_string2 = original_string | split: specific_string2 | last %}
{% assign new_url = original_string | replace: content_after_specific_string, specific_string2 | append: content_after_specific_string2 %}
<li>
<a
href="{{ new_url }}{{ anchor }}"
class="pagination__item pagination__item--next pagination__item-arrow link motion-reduce"
aria-label="{{ 'general.pagination.previous' | t }}"
>
{% render 'icon-caret' %}
</a>
</li>
{%- endif -%}

{%- for part in paginate.parts -%}
<li>
{%- if part.is_link -%}
{% assign original_string = part.url %}
{% assign specific_string = "page" %}
{% assign specific_string2 = "=" %}
{% assign content_after_specific_string = original_string | split: specific_string | last %}
{% assign content_after_specific_string2 = original_string | split: specific_string2 | last %}
{% assign new_url = original_string | replace: content_after_specific_string, specific_string2 | append: content_after_specific_string2 %}
<a
href="{{ new_url }}{{ anchor }}"
class="pagination__item link"
aria-label="{{ 'general.pagination.page' | t: number: part.title }}"
>
{{- part.title -}}
</a>
{%- else -%}
{%- if part.title == paginate.current_page -%}
<a
role="link"
aria-disabled="true"
class="pagination__item pagination__item--current light"
aria-current="page"
aria-label="{{ 'general.pagination.page' | t: number: part.title }}"
>
{{- part.title -}}
</a>
{%- else -%}
<span class="pagination__item">{{ part.title }}</span>
{%- endif -%}
{%- endif -%}
</li>
{%- endfor -%}

{%- if paginate.next -%}
{% assign original_string = paginate.next.url %}
{% assign specific_string = "page" %}
{% assign specific_string2 = "=" %}
{% assign content_after_specific_string = original_string | split: specific_string | last %}
{% assign content_after_specific_string2 = original_string | split: specific_string2 | last %}
{% assign new_url = original_string | replace: content_after_specific_string, specific_string2 | append: content_after_specific_string2 %}
<li>
<a
href="{{ new_url }}{{ anchor }}"
class="pagination__item pagination__item--prev pagination__item-arrow link motion-reduce"
aria-label="{{ 'general.pagination.next' | t }}"
>
{%- render 'icon-caret' -%}
</a>
</li>
{%- endif -%}
</ul>
</nav>
</div>
{%- endif -%}

[allisonfoley]

THANK YOU SO MUCH! This was exactly the solution I needed today. Bless you!

[StuartDFC]

This is the solution to the MetaObject pagination with unique key added to the page query problem, I came up with:
The theme uses Tailwind and custom CSS.

<section class="border--t-width pt-4">
<div class="text-center">
{{ 'general.pagination.show' | t }}
{{ paginate.current_offset | plus: 1 }}-
{%- if paginate.next -%}
{{-paginate.current_offset | plus: paginate.page_size -}}
{%- else -%}
{{- paginate.items -}}
{%- endif %}
{{'general.pagination.of' | t }} {{ paginate.items }} {{ itemsName }}.
</div>

<div class="flex justify-center mt-2 mb-4">
<ul class="flex space-x-2 list-none !p-0">
{% comment %} Previous Arrow {% endcomment %}
{% if paginate.previous.is_link %}
{% assign previous_page_number = paginate.previous.url | split: '=' | last %}
{% assign previous_url = page.url | append: '?page=' | append: previous_page_number %}
<li>
<a href="{{ previous_url }}" class="btn--pagination inline-flex items-center justify-center">
{% render 'component__icon', icon: 'arrow-left', size: '20', class: '' %}
</a>
</li>
{% endif %}

{% comment %} Numbers {% endcomment %}
{% for part in paginate.parts %}
{% if part.is_link %}
<li>
<a href="?page={{ part.title }}" class="btn btn--pagination"> {{ part.title }} </a>
{% comment %} {{ part.title | link_to: part.url, class: 'btn btn--pagination' }} {% endcomment %}
</li>
{% else %}
{% if part.title == '&hellip;' %}
<li>{{ part.title }}</li>
{% else %}
<li>
<span class="btn btn--pagination btn--pagination__active">{{ part.title }}</span>
</li>
{% endif %}
{% endif %}
{% endfor %}

{% comment %} Next Arrow {% endcomment %}
{% if paginate.next.is_link %}
{% assign next_page_number = paginate.next.url | split: '=' | last %}
{% assign next_url = page.url | append: '?page=' | append: next_page_number %}
<li>
<a href="{{ next_url }}" class="btn--pagination inline-flex items-center justify-center">
{% render 'component__icon', icon: 'arrow-right', size: '20', class: '' %}
</a>
</li>
{% endif %}
</ul>
</div>
</section>