Skip to content

Consultar produtos pelo Liquid ​

Use este arquivo como conteúdo de uma section de busca ou categoria. A tag consulta a seleção da página com stock: 'available': inclui saldo positivo e produtos que permitem venda sem estoque. O servidor filtra antes de contar e paginar; nenhum card é descartado depois para simular disponibilidade.

liquid
{% query_products resultado, source: 'listing', stock: 'available' %}
<section aria-label="Produtos disponíveis">
  <p>{{ resultado.total }} produtos</p>
  {% for product in resultado.items %}
    <article>
      <a href="{{ product.url | storefront_url }}">{{ product.name }}</a>
      {% if product.priceVisible and product.price %}
        <p>{{ product.price | money }}</p>
      {% else %}
        <p>Consulte as condições deste produto.</p>
      {% endif %}
    </article>
  {% else %}
    <p>Nenhum produto nesta seleção.</p>
  {% endfor %}
  {% if resultado.pagination.hasNextPage %}
    <a href="{{ resultado.pagination.nextUrl }}">Próxima página</a>
  {% endif %}
</section>

O exemplo usa o mesmo resultado para itens, total e próximo link. Preços continuam dependendo da autorização; a prévia não autentica compradores. Para incluir somente estoque físico, troque o valor de stock por in_stock. O valor all remove a restrição definida pelo tema, preservando os filtros da URL.

As URLs de paginação já vêm prontas e preservam o termo, os filtros e o caminho da prévia. Não aplique storefront_url novamente ao próximo link. Uma mudança de seleção normalmente deve começar na primeira página; uma página fora do total filtrado recebe 404.

Para uma vitrine da home ou da página de produto, use source: 'catalog' ou source: 'home', com limit em vez de paginação. O exemplo acima não pode ser usado sem adaptação nessas páginas: listing exige busca ou categoria.

A tag não substitui listas de outras sections. Para ocultar esgotados em toda a loja, ajuste todas as consultas usadas pelos templates. Veja argumentos, limites e política de preços na referência de consultas.

O arquivo incluído é executado pelos testes com catálogo fictício. Publique uma nova revisão do tema para aplicar a alteração na loja.

Temas V3 · Liquid estrutura, CSS desenha, JSON compõe.