Filters - Yampi Developer Portal

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

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`showBrand`	`Boolean`	❌	`true`	Exibe o filtro de marcas.
`showPrice`	`Boolean`	❌	`true`	Exibe o filtro de faixa de preço.
`showCategories`	`Boolean`	❌	`true`	Exibe o filtro de categorias.
`showPromotions`	`Boolean`	❌	`false`	Exibe o filtro de promoções.
`activeCategory`	`String`	❌	`''`	Slug da categoria atualmente ativa (usado para pré-selecionar no filtro de categorias).
`activePromotion`	`String`	❌	`''`	Slug da promoção atualmente ativa.
`productsPerPage`	`Number \| String`	❌	`10`	Nú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.

⌘I