Skip to main content
Componente container que renderiza automaticamente os filtros disponíveis para a categoria ou busca atual: faixa de preço, marcas, categorias, promoções e atributos customizados (como cor, tamanho, etc.). Os filtros ativos são aplicados via Vuex.

​
Uso

<Filters
  :show-brand="true"
  :show-price="true"
  :show-categories="true"
  :show-promotions="false"
  active-category="camisetas"
  :products-per-page="24"
/>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
showBrandBoolean❌trueExibe o filtro de marcas.
showPriceBoolean❌trueExibe o filtro de faixa de preço.
showCategoriesBoolean❌trueExibe o filtro de categorias.
showPromotionsBoolean❌falseExibe o filtro de promoções.
activeCategoryString❌''Slug da categoria atualmente ativa (usado para pré-selecionar no filtro de categorias).
activePromotionString❌''Slug da promoção atualmente ativa.
productsPerPageNumber | String❌10Número de produtos por página (afeta a paginação após filtrar).

​
Comportamentos automáticos

  • Os filtros disponíveis são carregados automaticamente a partir dos dados da busca/categoria via Vuex.
  • Ao selecionar um filtro, os produtos da página são atualizados automaticamente sem recarregar a página.
  • Atributos customizados (variações do produto como “Cor”, “Tamanho”) são exibidos automaticamente quando disponíveis.