Filtros Complexos

Sobre

Componente usado para os filtros da listagem de produtos complexo, contem campo para busca do filtro, pode possuir filtros selecionados, toggle, etc.

Dependências

Não há.

Instalação

• Instale o app através do seu terminal

npm install @wapstore/filtros-complexo

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/filtros-complexo": "^0.1.4"
}

Agora a loja está apta para o uso da aplicação.

Uso

O componente de Filtros Complexos pode ser inserido em qualquer lugar da pasta "components". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para a filtros no departamento:

<template>
  <filtros :key="JSON.stringify(pageData.conteudo)" :pageData="pageData" />
</template>
<script>
  ...
  [
    {
      "nome":"Categoria",
      "pesquisaFiltro":false,
      "showStatus":true,
      "type":"categoria",
      "valores": [
        {
          "id":16,
          "nome":"Almofadas",
          "rota":{
            "name":"product/listing/category",
            "route":"/decoracao/almofadas",
            "params":{
              "categoriaNivel2":"decoracao",
              "categoriaNivel3":"almofadas"
            },
            "query":{
              "order":"Popularidade"
            }
          },
          "url":"https://lojateste.wapstore.com.br/demo/equipe/decoracao/almofadas?order=Popularidade",
          "ativo":true
        }
      ]
    },
    {
      "nome":"Marcas",
      type":"marca",
      "pesquisaFiltro":true,
      "showStatus":true,
      "valores":[
        {
          "id":8,
          "nome":"Riachuelo",
          "imagem":"",
          "imagemOriginal":"",
          "ativo":false,
          "rota":{
            "name":"product/listing/category",
            "route":"/decoracao/almofadas",
            "params":{
              "categoriaNivel2":"decoracao",
              "categoriaNivel3":"almofadas"
            },
            "query":{
              "order":"Popularidade",
              "marca":"8"
            }
          },
          "url":"https://lojateste.wapstore.com.br/demo/equipe/decoracao/almofadas?order=Popularidade&marca=8"
        }
        /*...etc*/
      ]
    }
    /*...etc*/
  ]
  ...
</script>
<style>
  ...
</style>

Recursos

Props

| Prop | Descrição | Tipo | |---|---|---| | filtros 0.1.4 | Array dos filtros desejado. | Array | | preventNavigation 0.1.4 | Define se a navegação será ao clicar no filtro ou apenas na chamada do método "aplicarFiltro", por padrão o valor é falso. | Boolean | | showFilter 0.1.4 | Para ativar o slider range para filtro de preço. Por padrão é desativado. | Boolean | | isRangePrice 0.1.4 | Para ativar o slider range para filtro de preço. Por padrão é desativado. | Boolean | | mergeRangePrice 0.1.4 | Define quando deve mesclar a tooltip. Conforme a documentação do range slider | Number |

Configuração por filtro:

| Prop | Descrição | Tipo | Valores | |---|---|---|---| | nome 0.1.4 | Nome do conjunto de filtro. | String | - | | pesquisaFiltro 0.1.4 | Define se deve ou não exibir o input de pesquisa do filtro. | Boolean | - | | showStatus 0.1.4 | Define se o filtro deve iniciar o toggle aberto ou fechado. | Boolean | - | | type 0.1.4 | Define o tipo de filtro, o tipo deve ser um dos seguinte valores: categoria, marca, preco, atributo ou filtro. | String | categoria, marca, preco, atributo ou filtro | | valores 0.1.4 | Opções do conjunto de filtro. | Array | - |

Configuração por valor de filtro:

| Configuração | Descrição | Tipo | Campos | |---|---|---|---| | id 0.1.4 | Id do filtro, conforme retornado pela API. | Number | - | | imagem 0.1.4 | Caso seja um filtro com o tipo diferente de categoria e preço, esse campo é obrigatório. | String | - | | imagemOriginal 0.1.4 | Caso seja um filtro com o tipo diferente de categoria e preço, esse campo é obrigatório. | String | - | | ate 0.1.4 | Valores retornado pela API para o filtro do tipo preço. | Number | - | | de 0.1.4 | Valores retornado pela API para o filtro do tipo preço. | Number | - | | label ou nome 0.1.4 | Texto a ser exibido na opção de filtro. | String | - | | url 0.1.4 | Url retornado pela API. | String | - | | ativo 0.1.4 | Obrigatório para saber se o filtro está ativado ou desativado, por padrão a api wapstore já retorna corretamente. | Boolean | - | | rota 0.1.4 | Objeto rota padrão Vue Router, formato retornado pela api wapstore. Usado para criar o link para o filtro. | Objeto | name, params, query ou route |

Slots

| Slot | Descrição | Name | Props do slot | Exemplo de uso | |---|---|---|---|---| | Topo do filtro 0.1.4 | Campo para inserção de topo personalizado no filtro, por padrão já possui um. É recomandado inserir aqui a funcionalidade de "Filtros Selecionados" caso seu projeto necessite. | topoFiltro | filtrosAtivos Descrição: Todos os filtros ativos no momento. Tipo: Array | <filtros><template #topoFiltro={ filtrosAtivos }><div>/*...*/</div></template></filtros> | | Titulo no topo do filtro 0.1.4 | Caso opte por apenas alterar o texto no topo padrão do filtro. | tituloCabecalho | - | <filtros><template #tituloCabecalho>/*...*/</template></filtros> | | Titulo limpar filtro 0.1.4 | Caso queira apenas alterar o texto referente a limpar filtros. | tituloLimparFiltros | - | <filtros><template #tituloLimparFiltros>/*...*/</template></filtros> | | Icone seta 0.1.4 | Icone exibido no toggle do filtro. | iconeToggle | - | <filtros><template #iconeToggle>/*...*/</template></filtros> | | Icone de visto 0.1.4 | Icone exibido no checkbox na opção do filtro. | iconeCheckbox | - | <filtros><template #iconeCheckbox>/*...*/</template></filtros> | | Icone de lupa 0.1.4 | Icone exibido no input de pesquisa no conjunto de filtros. | iconeSearch | - | <filtros><template #iconeSearch>/*...*/</template></filtros> | | Conjunto de filtro opcional 0.1.4 | Caso tenha necessidade pode ser incluso um conjunto de filtros utilizando esse slot, ele é renderizado abaixo do conjunto de filtro padrão. | filtroOpcaoAdicional | - | <filtros><template #filtroOpcaoAdicional>/*...*/</template></filtros> | | Botão aplicar filtro 0.1.4 | Caso tenha necessidade de adicionar um botão "Aplicar Filtro". | btnAplicarFiltro | - | <filtros><template #btnAplicarFiltro>/*...*/</template></filtros> | | Titulo para o Range slider 0.1.4 | Caso tenha necessidade de adicionar um texto para o RangePrice use esse slot para inserir. | titleRangePrice | - | <filtros><template #titleRangePrice><p>Isso é o titulo do RangePrice</p></template></filtros> |

Eventos

| Slot | Descrição | Argumentos | |---|---|---| | changeFiltro 0.1.4 | Quando é clicado em algum filtro. | filtro Descrição: Filtro que recebeu o clique. Tipo: Objeto | | clearFiltro 0.1.4 | Após todos os filtros selecionados ser resetado. | - | | initFiltros 0.1.4 | Primeira inicialização do componente no DOM. | element Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement | | updateFiltros 0.1.4 | Toda atualização no DOM. | element Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement |

Métodos

-Exemplo genérico da chamada de um método:

<template>
  <filtros ref="refFiltro">
    /*...*/
  </filtros>
</template>
<script>
  export default {
    methods: {
      handleAplicarFiltro() {
        this.$refs.refFiltro.aplicaFiltro();
      },
    },
  }
</script>

| Método | Descrição | Exemplo de uso | |---|---|---| | aplicaFiltro 0.1.4 | Método usado quando a propriedade preventNavigation esta definida como true. Com esse método é realizado a navegação conforme todos os filtros selecionado pelo usuário. | <template><filtros ref="refFiltro">/*...*/</filtros></template><script>export default { methods: { handleAplicarFiltro() { this.$refs.refFiltro.aplicaFiltro(); } } }</script> | | limparFiltro 0.1.4 | Método usado para limpar os filtros selecionado. | <template><filtros ref="refFiltro">/*...*/</filtros></template><script>export default { methods: { handleLimparFiltro() { this.$refs.refFiltro.limparFiltro(); } } }</script> |

Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.