Built on WIX Headless

Blog / how-to

Como adicionar uma barra de busca ao conteúdo Wix CMS

· barra de busca Wix CMS

Como adicionar uma barra de busca ao conteúdo Wix CMS

Uma barra de busca CMS deixa alguém digitar algumas letras e ver a lista encolher—achar “Maria” num diretório de equipe, “Austin” numa página de listings ou “brochure” numa biblioteca de recursos. Isso é diferente da site search, que procura páginas no site inteiro.

Este guia cobre o caminho nativo (principalmente Studio / Editor) e o caminho de widgets sem código com CMS for Harmony, que funciona no Editor, Studio e Harmony.

Veja também o Guia Wix CMS.

Site searchCMS search
PercorrePáginas e conteúdo do siteItens numa exibição de collection
UI típicaCaixa de busca do site todoCampo de busca acima de um Repeater, Table ou gallery
Use quandoVisitantes caçam páginasVisitantes caçam dentro de um diretório ou catálogo

Se o problema é “ajudar a navegar 80 membros da equipe”, você quer CMS search.

Opções nativas (Studio e Editor)

No Studio (e em muitos setups CMS do Editor), você conecta um Repeater a um dataset e depois anexa inputs para os visitantes filtrarem. Dropdowns e controles parecidos para campos de estilo categoria são um caminho sem código bem documentado na ajuda CMS da Wix.

Uma caixa de busca por keyword ao vivo—digitar e filtrar na hora—costuma precisar de um pouco de Velo (filtrar o dataset com algo como contains num campo de texto simples). Campos rich text combinam mal com esse tipo de busca.

Se você não quer manter código, um widget de app com search bar embutida costuma ser mais rápido.

Harmony

O CMS integrado do Harmony pode mostrar listas conectadas, mas não dá o mesmo chrome de busca de visitante numa lista que builders de Studio esperam. Workarounds comuns: listas separadas por categoria, ou instalar o CMS for Harmony e ligar Show search bar. Mais contexto: Limitações do CMS no Harmony.

CMS for Harmony (os três editores)

  1. Instale o CMS for Harmony.
  2. Adicione um Table, Repeater, Calendar, Media Gallery ou Slideshow e conecte uma collection.
  3. Abra Search & filters e ative Show search bar.
  4. Publique e teste como visitante com um nome ou palavra que você sabe que existe.

A busca olha os campos tipo texto mapeados para aquele widget (por exemplo, Calendar usa Title e Details). Comportamento exato: docs Search & filters.

Lado a lado

Native HarmonyCMS for Harmony
Busca por keyword de visitante numa listaNão disponível da mesma forma hojeToggle Show search bar
EditorsHarmonyEditor, Studio, Harmony
Modelo de bindingCampos nativos do RepeaterSó widgets do app

Um exemplo simples

Collection: Directory (Name, Role, City, Bio)
Display: cards de Repeater
Goal: Digitar “Austin” ou o nome de uma pessoa filtra os cards

Ligue a busca. Quando quiser botões de Role ou City, adicione filtros de categoria.

Próximos passos

Relacionado

Atualizado:

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