Built on WIX Headless

Blog / how-to

Como adicionar filtros de categoria a um Wix Repeater

· filtros de categoria Wix Repeater

Como adicionar filtros de categoria a um Wix Repeater

Filtros de categoria são como os visitantes estreitam um grid de cards sem sair da página: “Mostre só Marketing”, “só Austin”, “só workshops”. No Wix, isso costuma significar uma collection CMS alimentando um Repeater, mais controles que filtram o mesmo dataset ou widget.

Abaixo: um exemplo concreto, o que o Studio faz de forma nativa, onde o Harmony difere e como configurar com CMS for Harmony (funciona no Editor, Studio e Harmony). Nesse app, “cards” significa o layout Repeater—não um widget separado.

Mais contexto: Guia Wix CMS.

O que você vai construir

Uma collection Programs com Name, Category, Summary e Image. Um Repeater mostra os cards. Visitantes escolhem uma categoria e o grid atualiza.

Caminho nativo (Studio / Editor)

A documentação CMS da Wix cobre conectar dropdowns, radio buttons ou selection tags a um dataset para visitantes filtrarem um repeater, gallery ou table—muitas vezes sem código. Cada input conecta a um campo; escolher um valor mostra só itens correspondentes. Você pode adicionar botões de reset ou “apply filter” se quiser esse comportamento.

Esse caminho é um default sólido quando o time já constrói com datasets no Studio.

Harmony

Repeaters conectados nativos não expõem hoje a mesma UI de filtro de categoria para visitantes numa única lista. Builders ou mantêm um Repeater por categoria (filtros do lado do editor) ou usam um app. Detalhes: Limitações do CMS no Harmony.

Repeater do CMS for Harmony

  1. Crie a collection e adicione itens em pelo menos duas categorias (categorias vazias fazem os filtros parecerem quebrados).
  2. Adicione o Repeater, conecte a collection e mapeie Name, Image e Summary.
  3. Abra Search & filters → ligue Show filters.
  4. Adicione um filtro em Category:
    • Combine com equals (ou contains, conforme você guarda tags)
    • Use Show filter para visitantes escolherem o valor
  5. Defina Filters display como Top (acima do grid) ou Side (sidebar; empilha em telas pequenas).
  6. Publique e clique em cada categoria como visitante.

Opcional: o modo Choose value aplica uma regra fixa sem UI de visitante (por exemplo, só itens marcados Published).

Referência de painel: Search & filters. How-to mais amplo: Visão geral de search and filters.

Comparação rápida

Native HarmonyCMS for Harmony
Controle de categoria do visitante num RepeaterLimited hojeShow filter em Category
Evitar Repeaters duplicados por categoriaDifícilUm Repeater + filter
EditorsHarmonyEditor, Studio, Harmony

Casos-limite que valem conhecer

SituaçãoTip
Categoria vaziaSemear itens de amostra antes de demonstrar filtros
Dezenas de categoriasPrefira layout Side; adicione busca também
Categorias numa collection relacionadaUse reference filters e um Display field—veja docs
Cor é a “categoria”Use Color swatches

Próximos passos

Relacionado

Atualizado:

Pronto para experimentar no Harmony? Criar um site inicial grátis CMS for Harmony