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:
Atributos | Função | Exemplo de aplicação |
---|---|---|
count | Retorna 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_page | Retorna 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_url | Retorna 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> |
pages | Retorna 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_url | Retorna 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_pages | Retorna 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.
Updated about 1 year ago