- Seção
FC 12479 :: Como facilitar a busca por produtos, hotsites e notícias da loja?
Com o AutoSuggest avançado, é possível exibir uma lista de produtos e termos sugeridos, à medida que se digita no campo de buscas.
As buscas ficarão mais assertivas e o cliente encontrará mais rapidamente o que deseja. O potencial deste recurso para aumentar as vendas da loja é enorme!
Com o recurso de AutoSuggest avançado, os resultados serão exibidos rapidamente a partir do 3º caractere digitado, incluindo as imagens dos produtos sugeridos.
São quatro grupos de resultados:
- Termos sugeridos
- Produtos sugeridos
- Páginas relacionadas (Hotsites)
- Notícias
Veja este recurso em funcionamento na loja http://flores.lojavirtualfc.com.br, digitando cra no campo de busca:
ATENÇÃO: A personalização deste recurso requer CONHECIMENTOS AVANÇADOS de HTML, CSS e JavaScript.
Seguem os passos para a implantação do AutoSuggest avançado:
1º Passo
Envie o arquivo AutoSuggest_v1.zip para a pasta htm da loja.
2º Passo
Insira as linhas abaixo no início do arquivo BarraTopo.htm:
<link rel="stylesheet" href="<BaseLoja>htm/jquery_ui.css">
<script language="JavaScript" src="/jquery-1.8.2.min.js"></script>
<script language="JavaScript" src="/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="<BaseLoja>htm/autosuggest.js"></script>
<!--[if IE]>
<style type="text/css">.ui-autocomplete-category{margin-top: -2px}</style>
<![endif]-->
3º Passo
Insira no form do campo de busca id="autocomplete-form":
Ex:
<form name=buscaprod method=GET id="autocomplete-form" action=/listaProdutos.asp onSubmit="return VerTexto(this)">
4º Passo
Insira no input text o id="autocomplete":
Ex:
<input type=text class=InputTextBusca value="<SearchText>" name=Texto id="autocomplete" maxlength=35 value="">
Variáveis
As variáveis abaixo definem a quantidade de resultados que serão exibidos em cada grupo (o máximo é 9):
Customização
As classes e ids indicadas na imagem estão ao final do arquivo jquery_ui.css.
Obs: Para alterar a cor do efeito zebra, edite a linha abaixo no arquivo AutoSuggest.js:
jQuery('li.active:even').css('background-color', '#f1efef');
|
