Why is my pagination code not working properly?

Why is my pagination code not working properly?

harukajmickey
Shopify Partner
119 0 9

Hi I am working on liquid code of the pagination.

https://u20fo1fsqriynysh-57309069474.shopifypreview.com/blogs/news

 

5 articles  are assigned per page.

When I clicked on page 2 or next page, they link to 404 page or stay the current page.

Could anyone help with the code to work properly?

 

Thank you in advance!

 

 

 

<ul class="w-full px-4 d-flex justify-between m-auto">
                    {% assign articles_per_page = 5 %}
                    {% for article in blog.articles limit: articles_per_page %}
                      <li class="py-6 border-b border-gray-400 group">
                        <a href="{{ article.url }}" class="hover:opacity-70 flex justify-between items-center relative">
                          <div class="w-10/12">
                            <p class="text-xs">{{ article.published_at | date:'%Y.%m.%d' }}</p>
                            <p class="mt-2">{{ article.title }}</p>
                          </div>
                          <div class="w-1/12 absolute right-0 transform transition-transform ease-in-out duration-300 group-hover:translate-x-2 group-hover:duration-500">
                            <img src="{{ 'news-arrow.svg' | file_url }}" alt="お知らせの矢印アイコン">
                          </div>
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                  
                  <!-- ページネーション -->
                  {% assign total_pages = blog.articles.size | divided_by: articles_per_page | plus: 1 %}
                  {% if total_pages > 1 %}
                    <nav aria-label="Page navigation example">
                      <ul class="list-style-none flex justify-center mt-10">
                        {%- if $currentPage > 1 -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300 transform rotate-180" href="{{ paginate.previous.url }}"
                              aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.previous.url }}" aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                        {% for page in (1..total_pages) %}
                          <li>
                            <a class="relative block rounded mx-4 text-lg transition-all duration-300 underline"
                              href="{{ blog.url }}{{ '/page' }}{{ page == 1 ? '' : page }}">{{ page }}</a>
                          </li>
                        {% endfor %}
                        {%- if $currentPage < total_pages -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}"
                              aria-label="Next"><img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}" aria-label="Next">
                              <img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                      </ul>
                    </nav>
                  {% endif %}
Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
8566 1690 1700

Hi @harukajmickey 

Please try to update code like this and check if it works

<ul class="w-full px-4 d-flex justify-between m-auto">
                    {% assign articles_per_page = 5 %}
                    {% for article in blog.articles limit: articles_per_page %}
                      <li class="py-6 border-b border-gray-400 group">
                        <a href="{{ article.url }}" class="hover:opacity-70 flex justify-between items-center relative">
                          <div class="w-10/12">
                            <p class="text-xs">{{ article.published_at | date:'%Y.%m.%d' }}</p>
                            <p class="mt-2">{{ article.title }}</p>
                          </div>
                          <div class="w-1/12 absolute right-0 transform transition-transform ease-in-out duration-300 group-hover:translate-x-2 group-hover:duration-500">
                            <img src="{{ 'news-arrow.svg' | file_url }}" alt="お知らせの矢印アイコン">
                          </div>
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                  
                  <!-- ページネーション -->
                  {% assign total_pages = blog.articles.size | divided_by: articles_per_page | plus: 1 %}
                  {% if total_pages > 1 %}
                    <nav aria-label="Page navigation example">
                      <ul class="list-style-none flex justify-center mt-10">
                        {%- if $currentPage > 1 -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300 transform rotate-180" href="{{ paginate.previous.url }}"
                              aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.previous.url }}" aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                        {% for page in (1..total_pages) %}
                          <li>
                            <a class="relative block rounded mx-4 text-lg transition-all duration-300 underline"
                              href="{{ blog.url }}{{ '?page=' }}{{ page == 1 ? '' : page }}">{{ page }}</a>
                          </li>
                        {% endfor %}
                        {%- if $currentPage < total_pages -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}"
                              aria-label="Next"><img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}" aria-label="Next">
                              <img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                      </ul>
                    </nav>
                  {% endif %}

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

harukajmickey
Shopify Partner
119 0 9

Hi @Dan-From-Ryviu 

 

Thank you for your reply.

 

All the pages show the same 5 articles. How can I go to next or previous 5 articles?