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: (v12).

Tipos de filtro

Por padrão na Vnda à 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 VNDA. 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:

<script>
  window.filterSettings = {
    script: "{{ 'products-filter.v12.js' | component_path }}",
    styles: "{{ 'products-filter.v12.css' | component_path }}",
    aggregations: {{ aggregations | to_json }},
    patterns: {{ patterns_list | to_json }},
    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âmentro 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 asw opção de popup (balloon) ou aba lateral (drawer) no parametro 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,
        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 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')
    columns: 3, // quantidade de colunas, no caso de style 'grid' 
  };
}

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"
  }
],

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