filtros-complexos v1.0.1

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

Configuração por filtro:

Configuração por valor de filtro:

Slots

Eventos

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>

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.