LogoLogo
Documentação de Temas
Documentação de Temas
  • 🚀COMECE POR AQUI
    • Temas Tray
    • Entenda o Tema
    • Meu primeiro tema
  • 💻Tray CLI
    • Instalação
    • Comandos
      • Erros Retornados
    • API para integrações Tray CLI
  • 🧱Construindo seu Template
    • Twig
      • O que é o Twig
      • Como ele é utilizado nos temas
      • Possibilidades de uso
      • Documentação para consulta
    • Visão Geral
      • Estrutura do Tema
      • Arquivo de configuração
      • Extensões de arquivos
      • Codificação de Arquivos
      • Avisos e Recomendações
      • Flags
    • Editor do Tema
      • Antigo
        • Como criar um Editor
        • Settings.html
      • Novo
        • Estrutura
          • Seções
          • Ícones
          • Componentes
            • Text
            • Textarea
            • Email
            • Number
            • Color
            • Checkbox
            • Radio
            • Select
            • Toggle
            • Upload
            • Tab
            • Alert
          • Exemplo de utilização
        • Thumb preview do tema
        • Imagens padrões
        • Como desabilitar e reabilitar?
      • Settings.json
    • Desenvolver
      • Atributo Google Analytics 4
      • Como adicionar o botão comprar na listagem dos produtos
      • Como criar um carrossel de produtos
      • Como inserir um vídeo na home da loja
      • Como manipular as variações de produtos
      • Como saber se o usuário está logado
      • Descontinuação do carrinho.php
      • Exibindo as formas de pagamento de um produto
      • Informação de preço com tempo de cache menor
      • Order Bump - Produtos Relacionados
      • Páginas Institucionais
      • Página de recuperação de senha
      • Página Live Shop
      • Recursos extras
      • Personalização das paginas de carrinho e checkout
    • Core Web Vitals
      • Desempenho
        • Lazyload
        • Primeira dobra
        • Fontes
        • Definição largura e altura
        • Sprite formas de pagamentos
      • Boas Práticas
        • Origem cruzada
      • Acessibilidade
        • Atributo Lang
        • Nome discernível
        • Atributo ALT
        • Contraste
        • IDs únicos
        • ARIA Labelled By
        • Tabindex
    • Otimizar e Medir
      • Carregamento na home
      • Layout AMP
      • Utilizando PWA na loja
    • Referências
      • Objetos
        • banner
        • breadcrumb
        • category
        • categories
        • filters
        • filter_options
        • links
        • pages
        • paginate
        • paymentMethods
        • product
        • productTabs
        • products
        • productFeatured
        • seals
        • search
        • settings
        • store
        • tags
        • tray
        • themePath
        • utils
      • Funções
        • asset()
        • Brands()
        • Categories()
        • Image()
        • Products()
        • Translation()
      • Data Attributes
        • Banners
        • Cart
        • Compare
        • Filter
        • Logged User
        • Search (Suggestion)
      • Componentes
        • Adicionar ao carrinho sem sair da página
        • Banner Desconto Progressivo
        • Banner extra com contagem de cliques
        • Banner Régua
        • Banner Rotativo
        • Botão "Voltar para o topo"
        • Botões Quantidade
        • Carrinho Lateral
        • Exibir a segunda imagem ao passar o mouse
        • Filtro Inteligente
        • Link flutuante para Whatsapp
        • Menu de Categorias
        • Menu de Categorias em 3 Níveis
        • Menu de Categorias com ver mais categorias
        • Menu de Categorias com Imagens
        • Menu de Categorias com Imagens - Hover
        • Menu de Categorias com produto
        • Menu de Marcas
        • Modal de Ofertas
        • Notícias com imagem na home
        • Novo Filtro Inteligente
        • Paginação
        • Porcentagem Desconto
        • Popup de Newsletter
        • Star Ranking
        • Selos da Loja
        • Selos do produto
        • Showcase ( List / Grid )
        • Topo Flutuante
        • Tray Login
        • Whatsapp flutuante
    • APIs Disponíveis
      • Busca
      • Carrinho de Compra
      • Categorias
      • Produtos
      • Variações de Produto
  • ✔️Homologação
    • Loja de Temas Tray
    • Requerimentos
      • Exclusividade
      • Identidade única
      • Estrutura necessária
      • Funcionalidades
      • Nova Busca e Filtro inteligente
      • Selos de produtos
      • Google Lighthouse
      • Consistência e funcionalidade
      • Compatibilidade com navegadores
      • Assets
      • Otimização para buscadores (SEO)
      • Acessibilidade
      • Configurações
      • Sistema de cores
      • Imagens responsivas
      • Nomes dos temas
      • Versionamento e notas de lançamento
      • Lojas demonstrativas
      • Documentação e suporte
    • Checklist obrigatório
    • Templates
    • Homologando o tema
    • Atualizando o tema
    • FAQ
  • 📣NOVIDADES
    • Tray CLI
    • Checklist
    • Tema Draft
    • Novo Editor
Powered by GitBook
On this page

Was this helpful?

  1. Construindo seu Template
  2. Referências
  3. Componentes

Novo Filtro Inteligente

PreviousNotícias com imagem na homeNextPaginação

Last updated 1 year ago

Was this helpful?

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

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

<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|convert_encoding('UTF-8', 'ISO-8859-1') }}"
                        {{ 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|convert_encoding('UTF-8', 'ISO-8859-1')}}"
                        {{ 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|convert_encoding('UTF-8', 'ISO-8859-1') }}"
                        {{ 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|convert_encoding('UTF-8', 'ISO-8859-1') in filtered_options.variant ? true : false %}
                        {% else %}
                          {% set prop_applied = filter_prop|convert_encoding('UTF-8', 'ISO-8859-1') 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|convert_encoding('UTF-8', 'ISO-8859-1') }}"
                                {{ 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

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

Faça a chamada desse arquivo onde desejar:

{% element('snippets/smart_filter') %}
🧱
filter_options