Menu
Feedback
Comece aqui


Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Storefront
Layout
Como funciona o controle Search Navigator

Atenção: existem duas formas de configurar coleções, por meio do CMS ou utilizando o módulo de Coleções Beta. Este artigo, refere-se à configuração de coleções por meio do CMS.

O controle <vtex.cmc:searchNavigator/> renderiza um menu de filtros relacionados ao resultado de uma busca.

Esse controle funciona apenas em páginas com contexto de busca, ou seja, páginas onde os resultados exibidos foram trazidos por uma busca do usuário.

Quando o usuário faz uma busca na loja, o sistema da VTEX tenta trazer resultados de acordo com uma ordem de prioridade de filtros. Entenda como funciona a busca aqui.

Digamos, por exemplo que o resultado seja um contexto de categoria. Ou seja, o usuário buscou, por exemplo, pelo termo "Camisas", o sistema identificou que existe uma categoria com o nome "Camisas" e carregou a página dessa categoria - usando, portanto, o template de categoria. Se o controle Search Navigator está no código desse template, ele vai renderizar um menu com filtros na página.

Por padrão, os filtros que podem ser exibidos pelo Search Navigator são os seguintes, nesta ordem:

  • Coleções.
  • Categorias.
  • Marcas.
  • Especificações.
  • Faixas de preço.

Mas para cada um desses filtros há algumas condições de exibição. Ou seja, você pode definir se eles devem ou não aparecer como filtro em contextos de busca.

Coleções

Para que uma coleção seja exibida no menu pelo controle Search Navigator, ela deve estar com a flag Searchable marcada.

Essa flag fica nas configurações da própria coleção, dentro do CMS.

{"base64":"  ","img":{"width":1034,"height":430,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":39791,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/controle-search-navigator_1.jpg"}}

Categorias

Para uma categoria ser exibida por ação desse controle, ela deve estar com a flag Menu marcada.

Essa flag fica na tela de cadastro da categoria.

{"base64":"  ","img":{"width":989,"height":1024,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":69293,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/controle-search-navigator_2.jpg"}}

Importante: O controle &lt;vtex.cmc:searchNavigator/&gt; exibe, por padrão, apenas a categoria raiz (primeiro nível) e a subcategoria mais específica (último nível) dentro do contexto atual. Desdobramentos intermediários da árvore de categorias são omitidos. Além disso, o controle só funciona nos três primeiros níveis, que são tradicionalmente Departamento, Categoria e Subcategoria. Caso sua arquitetura de catálogo contenha subdivisões além do 3º nível, estas não serão exibidas usando o controle nativo.

Marcas

Em páginas de categoria:

A página de cadastro de marca não tem uma flag de exibição no menu renderizado pelo Search Navigator.

Então, por padrão, marcas sempre são exibidas.

No entanto, em páginas de departamento ou categoria, as marcas somente serão exibidas pelo controle Search Navigator se, no cadastro da categoria, a flag Filtro de Marca estiver marcada.

Em outras páginas:

Em páginas que não carregam templates de departamento ou categoria, o filtro por marcas sempre será exibido.

Se quiser escondê-lo, você deve fazer isso por CSS.

Especificações

Para que um campo de produto ou um campo de SKU seja exibido no menu pelo controle Search Navigator, ele precisa ter duas flags marcadas:

  • Filtro
  • Link no Menu Lateral

Ambas se encontram na tela de cadastro do campo.

{"base64":"  ","img":{"width":991,"height":683,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":67064,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/controle-search-navigator_3.jpg"}}

Faixas de preço

Se você tem alguma faixa de preço configurada na loja, ela também funciona como filtro e, por padrão, é exibida no menu pelo controle Search Navigator.

Por serem filtros cadastrados nas categorias, as faixas de preço somente são exibidas em páginas de departamento ou categoria.


Os filtros sempre são renderizados com base nos atributos dos produtos do contexto de busca. Ou seja, com base na categoria, especificação (cor, tamanho), marca, coleção etc.

Portanto, além das condições listadas acima para que esses atributos apareçam como filtros no menu, é necessário antes de mais nada que o termo buscado retorne um contexto com produtos que tenham esses atributos.

Se o usuário fizer, por exemplo, uma busca por "celular" e a categoria Camisas não contiver nenhum celular, ela não será exibida no menu, ainda que no cadastro dessa categoria a flag de exibição esteja marcada.

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Como funciona o campo Score?
« Previous
Como usar o controle Search Result
Next »
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback