Filtros de Produto

O Filtros de Produto é o componente que atende as necessidades de filtrar os produtos de um dado conjunto, definido por uma Tag. Na grande maioria dos casos esse componente é implementado na página de listagem de produtos. Nesse artigo você confere como adicionar esse componente na sua loja, e como adaptar os parâmetros para seu negócio.

📘 Demonstração do componente

Visualize como é o componente acessando o Filtros de Produto Demo. Recomendamos utilizar a versão mais atualizada do componente: (v18).

Tipos de filtro

Por padrão, na Olist Ecommerce, à medida que vamos selecionando os filtros, as opções vão se mantendo mesmo que no momento não tenhamos produtos em determinada tag/atributo.

Temos a opção de ir “afunilando” os filtros conforme as opções vão sendo selecionadas. Para isso em admin/config/gerais/configuracoes-adicionais inserir o seguinte comando search_use_api: true.

Para desativar, no mesmo local inserir search_use_api: false.

Mostrar apenas os produtos disponíveis

Por padrão na plataforma sempre ao fazer a chamada de produtos, o {% load_products %} serão trazidos também os produtos indisponíveis.

Para excluir os produtos indisponíveis do front do site em /admin/config/gerais/extrasmarque a opção Listar somente produtos disponíveis?.

Implementação

Os filtros de produtos, como todos os outros componentes, já vem implementados nos templates da Olist Ecommerce. Caso você precise fazer esta implementação manualmente, ou alterar o seu funcionamento, deve-se, primeiro, dar atenção a importação dos arquivos Javascript e CSS do componente. Junto a isso, você deve adicionar o objeto {{ aggregations }}. Usando o template 1 como exemplo, a chamada dos arquivos é feita da seguinte forma:

{% assign component_version = '17' %}
{% if current_shop.settings contains 'component_version_products_filter' %}
  {% assign settings_version = current_shop.settings.component_version_products_filter %}
  {% if settings_version != blank %}
    {% assign component_version = settings_version %}
  {% endif %}
{% endif %}

{% unless has_sort %}
  {% assign has_sort = false %}
{% endunless %}

<script>
  window.filterSettings = {
    script: "{{ 'products-filter.v[version].js' | replace: '[version]', component_version | component_path }}",
    styles: "{{ 'products-filter.v[version].css' | replace: '[version]', component_version | component_path }}",
    aggregations: {{ aggregations | to_json }},
    patterns: {{ patterns_list | to_json }},
    has_sort: {{ has_sort }},
    prices_range: [
      {% if ranges %}
        {% for range in ranges %}
          {% assign values = range | strip | split: '-' %}
          [{{ values[0] | times: 1.00 }}, {{ values[1] | times: 1.00 }}],
        {% endfor %}
      {% endif %}
    ]
  }
</script>

🚧 Objeto {{ aggregations }}

Para que o filtro de produtos comporte-se de forma dinâmica, utilizamos o objeto {{ aggregations }}. Os atributos types e properties desse objeto serão utilizados no código JavaScript de declaração do componente.

Entre todos os componentes, os filtros são os que possuem maior diversidade de formas, de acordo com as escolhas selecionadas nos seus parâmetros. O parâmetro mode é responsável por grande parte desta variação, pois controla a forma de exibição do filtro, podendo variar entre horizontal, vertical, popup ou aba lateral.

Para cada uma dessas opções do parâmetro mode, os templates contam com um conjunto especifico de configurações no seu arquivo SCSS (assets\sass\content\tag\_filters.scss). Ao escolher uma das opções para usar, aconselha-se buscar em qual dos templates ela já foi implementada e utilizar o seu arquivo _filters.scss como ponto de partida do processo de personalização.

Caso opte-se por usar a aba lateral (drawer) no parâmetro mode, deve-se incluir um botão para controlar a exibição do componente, semelhante ao exemplo abaixo.

<button aria-label="Abrir filtro" class="button-default -outlined" id="open-filter-mobile">
  <svg class="icon">
    <use xlink:href="#icon-filter"/>
  </svg>
  FILTROS
</button>

const mobileButton = document.querySelector('#open-filter-mobile')

if (mobileButton) mobileButton.addEventListener('click', () => {
  FilterComponent.show()
})

Além do mode, há uma serie de outros parametros que podem ser configurados de acordo com as necessidades da loja. Essas configurações se concentram na função setFilters do arquivo filters.js (assets\javascripts\pages\tag\filters.js).

    setFilters: function() {
      const { root } = FilterComponent;
      const tags = FilterComponent.setTagTypes()
      const properties = FilterComponent.setPropeties()
      const priceSettings = FilterComponent.setPricesRanges()
      const mode = (window.innerWidth <= 1024) ? 'drawer' : 'vertical'

      const componentFilters = new Vnda.Component.ProductsFilter({
        mode,
        filtersStartOpen: false,
        showAppliedFilters: false,
        hasSort: true,
        filterOnClick: false,
        resetMode: 'all',
        tags,
        properties,
        price: priceSettings.price,
        priceProps: priceSettings.priceProps
      });

      // Renderiza o componente
      componentFilters.render(root);
      FilterComponent.instance = componentFilters
      root.dispatchEvent(new Event('vnda:filter-component-loaded'))
    },

Todas as outras funções necessarias para o funcionamento do componente de filtros também se encontram no arquivo filters.js (assets\javascripts\pages\tag\filters.js). Sem aprofundar muito em cada uma delas, deve-se ter atenção a função setPropeties, que trata dos atributos dos produtos contidos na variável aggregations.

Parâmetros do componente

Os parâmetros define as características dos Filtros de Produto. Veja na tabela abaixo os parâmetros e o que eles determinam no componente. Note que os parâmetros que possuem valores padrões estão sinalizados na coluna Default, e as opções de entrada que o parâmetro pode receber estão apresentados na coluna Tipos/Opções de entrada.

Parâmetro	Descrição	Tipos/Opções	Default	Obrigatório
`mode`	Define como o componente é exibido.	`drawer`, `horizontal` ou `vertical`	`drawer`	Não
`filtersStartOpen`	Define se as opções de filtro iniciarão abertas. Aplica-se aos modos `drawer` e `vertical`.	`true` ou `false`	`false`	Não
`showAppliedFilters`	Define se a seção de filtros aplicados será exibida.	`true` ou `false`	`false`	Não
`sideDrawer`	Define a posição do componente quando o modo for `drawer`.	`right` ou `left`	`right`	Não
`hasInputSearch`	Habilita o campo de busca.	`true` ou `false`	`false`	Não
`hasSort`	Habilita a ordenação dos resultados.	`true` ou `false`	`false`	Não
`filterOnClick`	Carregamento automático ao clicar em uma opção do filtro.	`true` ou `false`	`false`	Não
`resetMode`	Define como limpar os filtros: um botão para tudo (`all`), para cada (`each`) ou nenhum (`none`).	`all`, `each` ou `none`	`none`	Não
`tags`	Define o filtro de categorias (tags). Veja parâmetro tags.	*	*	Não
`properties`	Define o filtro de propriedades (permite múltiplos tipos).	*	*	Não
`sort`	Forma de ordenação (requer `hasSort` ativo). Veja parâmetro sort.	`grid` ou `list`	*	Não
`price`	Carrega valores de limite inferior e superior para o filtro de preço.	*	*	Não
`priceProps`	Define opções de valores para o filtro de preço. Veja parâmetro priceProps.	*	*	Não
`patterns`	URLs que definem estampas para filtros de propriedade. Veja parâmetro patterns.	*	*	Não

Parâmetro `tags`:

tags = aggregations.types.categoria && [{
      title: "Categoria",
      type: "categoria",
      style: "list",
      options: aggregations.types.categoria
    }];

Parâmetro `sort`:

sort: {
  style: "grid", // estilo de como as opções são mostradas ( 'grid' ou 'list')
  };
}

Parâmetro `priceProps`:

priceProps: {
  mode: 'options',
  options: [
    [0, 99.99],
    [100, 199.99],
    [200, 299.99]
  ]
}

Parâmetro `patterns`:

patterns: [
  {
    "value": "Xadrez | estampa-xadrez",
    "pattern": "http://via.placeholder.com/30x30"
  }
],

Eventos

A partir da versão 15, os filtros disparam eventos toda vez que: o filtro for carregado, uma opção de filtro for aberta, uma opção de filtro for fechada ou quando o filtro for fechado (caso o mode seja drawer). O trecho abaixo indica os eventos:

// Evento disparado sempre que uma opção de filtro for aberta
window.addEventListener('vnda:filter-component-item-open', (event) => {
 console.log(event)
})

// Evento disparado sempre que uma opção de filtro for aberta
window.addEventListener('vnda:filter-component-item-close', (event) => {
 console.log(event)
})

// Evento disparado quando o filtro for carregado
window.addEventListener('vnda:filter-component-loaded', (event) => {
  console.log(event)
})

// Evento disparado quando o filtro for fechado. Somente para o mode drawer
window.addEventListener('vnda:filter-component-closed', (event) => {
  console.log(event)
})

Método

O método disponível para esse componente é o toggle(). Ele abre o filtro se ele estiver fechado e fecha o drawer se ele estiver aberto (para os casos de mode drawer).

Exemplo de implementação

Confira foi feita a implementação do filtro de produtos no Template1 acessando os arquivos:

_filters.liquid,

filters.js,

_filters.scss