Controle de Busca - fulltextSearchBox

Aparência da Loja

VTEX Team

VTEX Team

Última atualização

O controle <vtex.cmc:fullTextSearchBox /> é responsável por gerar a caixa de busca. Além do campo de pesquisa o controle renderiza um combo para restringir uma busca em um departamento. Abaixo temos um exemplo do controle sem nenhuma aplicação de css:

A busca é uma funcionalidade que deve estar disponível em todas as páginas de uma loja e por isso é sugerido que o controle seja inserido dentro de um subtemplate. Normalmente o controle de busca é usado dentro do subtemplate do header da loja.

HTML renderizado pelo controle:

<fieldset class="busca"> <legend>Buscar no site</legend> <label>Buscar</label> <select id="ftDept4aceafb578de4c7caf31e06bcc8d45b9"> <option value="">Todo o site</option> <option value="1000000">Integracao</option> <option value="1">Eletrodomésticos</option> <option value="3">Moda</option> </select> <input type="hidden" id=ftIdx4aceafb578de4c7caf31e06bcc8d45b9 value="" /> <input id="ftBox4aceafb578de4c7caf31e06bcc8d45b9" class="fulltext-search-box" type="text" size="20" accesskey="b" /> <input id="ftBtn4aceafb578de4c7caf31e06bcc8d45b9" type="button" value="Buscar" class="btn-buscar" /> </fieldset>

A funcionalidade de autocomplete já está prevista neste controle e é necessário apenas customizar o seu css. O autocomplete é ativado assim que um cliente digitar 3 caracteres no campo de busca. Abaixo o html que é gerado pelo auto complete:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 10; top: -3334px; left: 667.5px; display: none; position: relative; width: 507px;"> <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">adidas em Modelos</a></li> <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">adidas em Tênis</a></li> <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">adidas em Lançamentos</a></li> <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">adidas em Masculino</a></li> <li class="ui-menu-item" role="menuitem"> <a class="ui-corner-all" tabindex="-1"> <img src="http://www.authenticfeet.com.br/arquivos/ids/188460-25-25/Mini-Bola-Brazuca-WC-14-Glider.jpg" width="25" height="25" alt="Mini-Bola-Brazuca-WC-14-Glider"> minibola adidas brazuca glider - copa do mundo </a> </li> <li class="ui-menu-item" role="menuitem"> <a class="ui-corner-all" tabindex="-1"> <img src="http://www.authenticfeet.com.br/arquivos/ids/189014-25-25/Tenis-adidas-Springblade-Feminino.jpg" width="25" height="25" alt="Tenis-adidas-Springblade-Feminino"> tênis adidas springblade feminino </a> </li> <li class="ui-menu-item" role="menuitem"> <a class="ui-corner-all" tabindex="-1"> <img src="http://www.authenticfeet.com.br/arquivos/ids/188855-25-25/Tenis-adidas-Dynamic-Fusion-50-Feminino.jpg" width="25" height="25" alt="Tenis-adidas-Dynamic-Fusion-50-Feminino"> tênis adidas dynamic fusion 50 feminino </a> </li> </ul>

Exemplos

Alguns exemplos de como pode ser customizado o controle: