filtros-complexos

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.