{"section":"tracks","requestedLocale":"pt","requestedSlug":"implementar-a-busca-no-frontend-da-loja","locale":"pt","slug":"implementar-a-busca-no-frontend-da-loja","path":"docs/pt/tracks/vtex-io/vtex-intelligent-search/implementar-a-busca-no-frontend-da-loja.md","branch":"main","content":"Para começar a utilizar as funcionalidades da busca, é necessário adicionar os componentes do Intelligent Search no frontend da sua loja, de acordo com a tecnologia utilizada para criação da loja: Store Framework ou FastStore.\n\nEntre em contato com a equipe de desenvolvedores da sua loja para customizar o frontend utilizando os componentes específicos para cada tecnologia apresentados a seguir.\n\n> ℹ️ Esta etapa não se aplica a cenários de implementação headless, em que a tecnologia de frontend não é oferecida pela VTEX. Nesses casos, é necessário implementar o envio dos eventos de busca. Obtenha mais detalhes em [VTEX Intelligent Search Events API - Headless](https://developers.vtex.com/docs/api-reference/intelligent-search-events-api-headless).\n\n## Store Framework\n\nSe a sua loja foi desenvolvida no [Store Framework](https://developers.vtex.com/docs/guides/store-framework), utilize os componentes abaixo para implementar a busca:\n\n| Componente | Descrição |\n| :---- | :---- |\n| [Search Result](https://developers.vtex.com/docs/guides/vtex-search-result)  | Processa os resultados obtidos pela API do Intelligent Search e os exibe aos usuários. Esse componente exporta todos os blocos de loja esperados em uma página de resultados de busca, como filtros e a galeria de produtos. |\n| [Search Bar](https://developers.vtex.com/docs/apps/vtex.store-components/SearchBar) | Exibe uma barra de busca e apresenta os produtos correspondentes. |\n| [Search](https://developers.vtex.com/docs/apps/vtex.search) | Fornece elementos de interface que aprimoram a experiência de busca, como a funcionalidade de autocomplete e outros blocos opcionais. |\n| ↪ [Autocomplete](https://developers.vtex.com/docs/apps/vtex.search/Autocomplete) | Sugere resultados enquanto o usuário digita. Ele exibe resultados de busca anteriores com base nas buscas atuais e anteriores, apresentados em quatro listas: Últimas buscas efetuadas. Sugestão de busca. Sugestão de produtos. Termos mais buscados. Saiba mais sobre o comportamento desse componente no guia [Autocomplete](/pt/docs/tutorials/autocomplete). |\n| ↪ [Suggestions](https://developers.vtex.com/docs/apps/vtex.search/suggestions) | Sugere termos de busca semelhantes à consulta atual. |\n| ↪ [Banner](https://developers.vtex.com/docs/apps/vtex.search/banner) | Exibe banners na página de resultados de busca do cliente, dependendo do contexto da busca. |\n| ↪ [DidYouMean](https://developers.vtex.com/docs/apps/vtex.search/didyoumean) | Sugere uma possível correção de erro ortográfico para a consulta atual. |\n\nPara mais informações sobre os componentes disponíveis, acesse o [guia de primeiros passos para desenvolvedores sobre o Search](https://developers.vtex.com/docs/guides/search-overview).\n\n## FastStore\n\nSe a sua loja foi desenvolvida na [FastStore](https://developers.vtex.com/docs/guides/faststore), utilize os componentes descritos no guia [Search](https://developers.vtex.com/docs/guides/faststore/features-search) na documentação da FastStore para implementar o Intelligent Search."}