> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/referencias/data-attributes/filter.md).

# Filter

{% hint style="danger" %}
**Disponível para uso somente nas páginas:** catalog | search
{% endhint %}

Com o data-attribute `filter` é possível filtrar os produtos exibidos e ordená-los.

Os filtros padrões utilizados pela plataforma são os de Marcas, Classificar Por (que englobam os filtros por nome do produto, menor preço, maior preço, mais vendido, destaque e lançamento) e o de subcategorias.

Quando adicionado o atributo `data-form="filter"` em um formulário, ele iniciará o módulo filter. Esse módulo fará com que sempre que um `<select>` for alterado (onchange), o formulário seja submetido e recarregue os produtos.

Abaixo um exemplo de utilização do data-attribute `filter`.

**Input:**

```html
<form data-form="filter">
  <h5>Filtrar por Categorias:</h5>
  {% set categories = Categories() %}
  <select name="filtrar_categorias">
      {% for categorie in categories %}
      <option value="{{ categorie.name }}">{{ categorie.name }}</option>
      {% endfor %}
  </select>
</form>
```

**Output:**

```html
<form data-form="filter">
	<h5>Filtrar por Categorias:</h5>
	<select name="filtrar_categorias">
		<option value="categoria_1">Categoria 1</option>
		<option value="categoria_2">Categoria 2</option>
		<option value="categoria_3">Categoria 3</option>
	</select>
</form>
```