pagination

Como utilizar o objeto pagination

O objeto {{ pagination }} é usado nos templates de tag.liquid e search.liquid para renderizar links de navegação entre páginas de uma lista de produtos.

{% load_products q:params.q per_page: 15 %}

{% for product in products %}
  {% include "partials/components/_product_block.liquid %}
{% else %}
  <p>Não há produtos que correspondem à sua pesquisa.</p>
{% endfor %}

{% if pagination.total_pages > 1 %}

  <form method="get">
  
    {% unless pagination.prev_url == current_url %}
      <a href="{{ pagination.prev_url }}" rel="prev">« Anterior</a>
    {% endunless %}
    
    <span>
      Página
      <input 
        type="number" 
        name="p" 
        max="{{ pagination.total_pages }}" 
        value="{{ params.q | default: pagination.current_page }}" /> 
        
      de {{ pagination.total_pages }}
    </span>
    
    {% unless pagination.next_url == current_url %}
      <a href="{{ pagination.next_url }}" rel="next">Próxima »</a>
    {% endunless %}
  
  </form>

{% endif %}

Os atributos desse objeto estão na tabela a seguir:

AtributosFunçãoExemplo de aplicação
countRetorna a contagem total de produtos na lista.input:
Você está vendo {{ per_page }} de {{ pagination.count }} produtos.

output:
Você está vendo 20 de 45 produtos.
current_pageRetorna o número da página sendo visualizado no momento.input:
Página {{ pagination.current_page }} de {{ pagination.total_pages }}.
output:
Página 2 de 2.
next_urlRetorna a URL da próxima página da lista.input:
{% if current_url == pagination.next_url %}
<a href="{{ pagination.next_url }}" rel="next">Próxima página</a>
{% else %}
<span class="no-more-pages">Próxima página</span>
{% endif %}

output:
<a href="https://demo.vnda.com.br/camisetas/?p=3" rel="next">Próxima página</a>
pagesRetorna uma lista de URLs para cada página. Cada item da lista possui:
- url: a URL para a página.
- number: o número da página.
input:
{% for page in pagination.pages %}
<a href="{{ page.url }}"
{% if page.url == current_url %}class="current-page"{% endunless %}>
[{{ page.number }}]
</a>
{% endfor %}

output:
<a href="https://demo.vnda.com.br/camisetas/?p=1">1</a>
<a href="https://demo.vnda.com.br/camisetas/?p=2" class="current-page">2</a>
<a href="https://demo.vnda.com.br/camisetas/?p=3">3</a>
prev_urlRetorna a URL da página anterior da lista.input:
{% if current_url == pagination.prev_url %}
<a href="{{ pagination.prev_url }}" rel="prev">Página anterior</a>
{% else %}
<span class="no-more-pages">Página anterior</span>
{% endif %}

output:
<a href="https://demo.vnda.com.br/camisetas/?p=1">Página anterior</a>
total_pagesRetorna o número total de páginas da lista.input:
{% if pagination.total_pages > 0 %}
<!-- Vamos ter que criar uma paginação! -->
{% else %}
<!-- Não precisamos criar uma paginação… -->
{% endif %}

output:
<!-- Vamos ter que criar uma paginação! -->

📘

Esse objeto é utilizado na tag load_products.