# Novo Filtro Inteligente

{% hint style="info" %}
**Disponível nas páginas:** catalog | search\
**Para saber mais com relação as informações retornadas pela plataforma, veja a documentação do objeto**[ **filter\_options** ](/themes/construindo-seu-template/referencias/objetos/filter_options.md)
{% endhint %}

Recurso disponível apenas para lojas que possuem a nova busca habilitada. Para informações, contate nossa equipe de atendimento.

Snippet para criar um filtro esquerdo

```php
<aside class="filter">
    <form class="filter__form" method="get">
        <input type="hidden" name="loja" value="{{ store.id }}">
        {% if search.word %}
        <input name="palavra_busca" type="hidden" value="{{ search.word }}">
        {% endif %}

        {% if category.id %}
        <input type="hidden" name="categoria" value="{{ category.id }}">
        {% endif %}


        {% if filter_options.categories %}
        <section class="filter__block filter__block--categories">
            <h4 class="filter__title">Categorias</h4>
            <ul class="filter__list">
                {% for category in filter_options.categories %}
                {% set category_applied = category.key in filtered_options.categories ? true : false %}

                <li class="filter__item">
                    <input id="{{ category.key }}" class="filter__input filter__input--category" type="checkbox"
                        name="categories[]" value="{{ category.key }}"
                        {{ category_applied ? 'checked' }}>
                    <label class="filter__label" for="{{ category.key }}">
                        <span class="filter__name filter__name--category"> {{ category.key }}</span>
                        <span class="filter__text filter__text--count">({{ category.doc_count }})</span>
                    </label>
                </li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}

        {% if filter_options.prices %}
        <section class="filter__block filter__block--prices">
            <h4 class="filter__title">Preço</h4>
            <ul class="filter__list">
                {% for price in filter_options.prices.buckets %}
                {% set price_applied = false %}

                <li class="filter__item">
                    {% for price_apply in filtered_options.price %}
                    {% set price_applied = price.from and price.to in price_apply ? true : false %}
                    {% endfor %}

                    <input id="{{ price.from }}-{{ price.to }}" class="filter__input filter__input--price"
                        type="checkbox" name="prices[]" value="{{ price.from }},{{ price.to }}"
                        {{ price_applied ? 'checked' }}>
                    <label class="filter__label" for="{{ price.from }}-{{ price.to }}">
                        <span class="filter__name filter__name--price">
                            {% if loop.index == 1 %}
                            Até {{ settings.currency }} {{ price.to|currency }}
                            {% elseif loop.index == filter_options.prices.buckets|length  %}
                            Acima de {{ settings.currency }} {{ price.from|currency }}
                            {% else %}
                            De {{ settings.currency }} {{ price.from|currency }} à {{ settings.currency }}
                            {{ price.to|currency }}
                            {% endif %}
                        </span>
                    </label>
                </li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}

        {% if filter_options.availability %}
        <section class="filter__block filter__block--availability">
            <h4 class="filter__title">Disponibilidade</h4>

            <ul class="filter__list">
                {% for availability in filter_options.availability %}
                {% set availability_applied = availability.key in filtered_options.availability ? true : false %}

                <li class="filter__item">
                    <input id="{{ availability.key }}" class="filter__input filter__input--availability" type="checkbox"
                        name="availability[]" value="{{ availability.key}}"
                        {{ availability_applied ? 'checked' }}>
                    <label class="filter__label" for="{{ availability.key }}">
                        <span class="filter__name filter__name--availability">{{ availability.key }}</span>
                        <span class="filter__text filter__text--count">({{ availability.doc_count }})</span>
                    </label>
                </li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}

        {% if filter_options.brands %}
        <section class="filter__block filter__block--brands">
            <h4 class="filter__title">Marcas</h4>

            <ul class="filter__list">
                {% for brand in filter_options.brands %}
                {% set brands_applied = brand.key in filtered_options.brand ? true : false %}

                <li class="filter__item">
                    <input id="{{ brand.key }}" class="filter__input filter__input--brand" type="checkbox"
                        name="brands[]" value="{{ brand.key }}"
                        {{ brands_applied ? 'checked'}}>
                    <label class="filter__label" for="{{ brand.key }}">
                        <span class="filter__name filter__name--brand">{{ brand.key }}</span>
                        <span class="filter__text filter__text--count">({{ brand.doc_count }})</span>
                    </label>
                </li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}

        {% if filter_options.properties %}
            {% for properties in filter_options.properties %}
                {% for prop in properties %}
                <section class="filter__block filter__block--properties">
                    <ul class="filter__list">
                        <h4 class="filter__title">{{ prop.key }}</h4>
                        {% for item in prop.values %}

                        {% set filter_prop = prop.key ~'||'~ item.key %}
                        {% if item.entity == 'variants' %}
                          {% set prop_applied = filter_prop in filtered_options.variant ? true : false %}
                        {% else %}
                          {% set prop_applied = filter_prop in filtered_options.propertie ? true : false %}
                        {% endif %}

                        <li class="filter__item">
                            <input id="{{ item.key }}" class="filter__input filter__input--propertie" type="checkbox"
                                name="{{item.entity}}[]" value="{{ filter_prop }}"
                                {{ prop_applied ? 'checked'}}>
                            <label class="filter__label" for="{{ item.key }}">
                                <span class="filter__name filter__name--propertie">{{ item.key }}</span>
                                <span class="filter__text filter__text--count">({{ item.doc_count }})</span>
                            </label>
                        </li>
                        {% endfor %}
                    </ul>
                </section>

                {% endfor %}

            {% endfor %}
        {% endif %}


        <button type="submit" class="filter__button">{{ Translation('filtrar') }}</button>
    </form>
</aside>
```

### Como usar <a href="#como-usar" id="como-usar"></a>

Copie o código acima e crie um arquivo separado, ex: `elements/snippets/smart_filter.html`

Faça a chamada desse arquivo onde desejar:

```twig
{% element('snippets/smart_filter') %}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/novo-filtro-inteligente.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.