Diretórios de verdade raramente precisam de um controle só. As pessoas digitam um nome e escolhem um departamento; filtram por cidade e uma faixa de preço. Este guia mostra como colocar essas peças numa página sem mandar visitantes por três listas separadas.
Formato do projeto de ponta a ponta: Diretório pesquisável. Mais tutoriais: Guia Wix CMS.
A UI que você mira
| Control | Campo de exemplo | Job |
|---|---|---|
| Search bar | Name, summary | Busca em texto livre |
| Category filter | Category / Type | Navegar |
| Range filter | Price ou Date | Limites min / max |
Notas nativas
No Studio / Editor, você pode empilhar vários inputs conectados ao dataset (dropdown + selection tags etc.). Busca por keyword que filtra ao digitar costuma precisar de Velo—ou de um app. Mantenha os filtros no mesmo dataset do repeater para as condições combinarem limpas.
No Harmony, o chrome de multi-filtro de visitante numa única lista nativa é limitado hoje. Planeje widgets do app ou Repeaters separados (limitações do CMS).
Uma exibição, muitos controles (CMS for Harmony)
Funciona no Editor, Studio e Harmony.
- Conecte um Table ou Repeater a uma collection com Name, Category e um campo numérico ou de data.
- Ative Show search bar.
- Adicione um Show filter em Category (equals).
- Adicione um filtro apto a range em Price ou Date (greater/less than ou between).
- Escolha Filters display: Top para um set curto; Side para diretórios mais densos.
- Publique e teste combinações—só busca, só filtro, depois os dois juntos.
Condições de match e Show filter vs Choose value: docs Search & filters.
Guias focados
| Peça | Artigo |
|---|---|
| Só busca | Adicionar uma barra de busca |
| Só categoria | Filtros de categoria |
| Todas as opções de painel | Visão geral de search and filters |
| Colunas densas | Tabela pesquisável |
Por que times usam o app para isso
| Task | Native Harmony | CMS for Harmony |
|---|---|---|
| Keyword + categoria + range numa lista | Desajeitado / limited hoje | Configure em Search & filters |
| Mesma UI no Studio e Harmony | Stacks nativos diferentes | Mesmos widgets |
| Evitar manter código de filtros | Velo muitas vezes necessário para live search | Toggles de painel |
Para Color swatches, campos reference e particularidades de Calendar/Slideshow, use a docs do produto—esses detalhes mudam com os releases.