load_products

Essa tag lista produtos da loja.

Para utilizá-la você deve passar uma série de parâmetros como input.

O output da tag é uma lista de produtos na array {{ products }} com os objetos {{ product }} com as informações de cada produto.

Os produtos do array de output podem ser acessados através de um loop for.

Essa tag pode ser usada em qualquer template de página.

input:

{% load_products tag:tag.name %}

{% for product in products %}
  {{ product.name }}
{% endfor %}

output:

Camiseta Verão
Casaco Outono
Blusão Inverno
Saia Primavera

Parâmetros

A tag load_products possui parâmetros obrigatórios e parâmetros que dependem do tipo de aplicação. Veja a seguir os parâmetros possíveis para essa tag.

• tag: recebe o [nome identificador]({%- link docs/liquid4/objetos/tag.md -%}#name) da tag.

{% load_products tag:tag.name %}

• q: recebe os termos de busca informados pelo cliente.

<form action="{{ search_url }}" method="get">
  <input type="search" name="search_query" />
</form>

{% getparam "search_query" as params_search_query %}

{% load_products q: params_search_query %}

📘

É obrigatório o uso parâmetro tag ou q dependendo da lista de produtos.

Saiba mais sobre como ter acesso aos parâmetros de URL no artigo Objetos e como criar um formulário de busca no artigo search.liquid

• id: carrega produtos específicos. Para isso utilize de input os ids dos produtos separados por vírgula.

{% load_products: ids: '1,2,3,4,5' %}

• parent_tag: A tag “pai” da lista de produtos.

Considere que o cliente está acessando o seguinte endereço:

https://demo.vnda.com.br/camisetas/algodao/

Ele está vendo uma lista de produtos que tenham a tag camisetas e, desses, os que possuem a tag algodao. Para respeitar ambas as tags, é preciso usar o parâmetro parent_tag.

{% load_products tag:tag.name parent_tag:parent_tag.name %}

• per_page:

O parâmetro per_page controla a quantidade de produtos exibidos por página na lista de produtos. A quantidade padrão de produtos por página é 25.

É possível permitir que o cliente delimite quantos produtos devem ser exibidos por página usando a tag {% raw %}{{ getparam }}{% endraw %}.

{% getparam 'per_page' as per_page %}

{% load_products q:search_query per_page:per_page %}

• sort

O parâmetro sort define a ordenação dos produtos na lista.

Veja a documentação do objeto {% raw %}{{ sort_options }}{% endraw %} para mais informações sobre como criar opções de ordenação de produtos para o cliente.

{% getparam "sort_by" as params_sort_by %}

{% load_products q: params_search_query sort: params_sort_by %}

Parâmetros de filtro

Você pode criar filtros para que os clientes selecionem os parâmetros que devem delimitar exibição da lista de produtos.

Filtros são feitos com as informações agregadas de todos os produtos da lista, disponíveis através do objeto {% raw %}{{ aggregations }}{% endraw %}. Para permitir que o cliente tenha acesso às opções de filtro, é necessário criar um formulário HTML no tag.liquid e de search.liquid:

<form action="{{ current_url }}" method="get">
  <h3>Filtro de materiais:</h3>
  
  {% for material in aggregations.types.material %}
    <p>
      <input id="material_{{ forloop.index }}" type="checkbox" name="type_tags[material][]" value="{{ material.name }}" />
      <label for="material_{{ forloop.index }}">{{ material.title }}</label>
    </p>
  {% endfor %}
</form>

Nesse caso criamos uma lista com todas as tags do tipo material que são relacionadas aos produtos na lista de produtos atual.

Para filtros de tipos de tag, o name do input deve ser type_tags[tipodatag][]. E para filtros de propriedades, o name do input deve ser property1_values[] ou property2_values[] ou property3_values[]

Existem vários filtros que podem ser usados, seja de maneira dinâmica (com o cliente definindo seus valores) ou de maneira estática, com o desenvolvedor definindo-os no código.

Para facilitar a implementação dos filtros, os templates possuem já configurado o Componente de Filtros, que pode ser expandido para exibir mais opções de filtro do que os templates adicionam por padrão.

• min_price: delimita um filtro de preço mínimo para a lista de produtos.

{% load_products tag:tag.name min_price:params.min_price %}

• max_price: delimita um filtro de preço máximo para a lista de produtos.

{% load_products tag:tag.name max_price:params.max_price %}

• type_tags_operator: define o operador lógico que filtra as tags do mesmo tipo, se aplica a todos os tipos de tags. Possui dois valores possíveis:

• OR (padrão) — o produto precisa ter qualquer uma das tags selecionadas para ser exibido.

• AND — o produto precisa ter todas as tags selecionadas para ser exibido.

{% load_products tag: tag.name type_tags_operator: "and" %}