Como podemos ajudar?

FC 11675 :: Como utilizar as tags de refinamento de buscas?

Usando estas tags, o visitante poderá fazer buscas sobre o resultado da busca atual.

É possível refinar sobre as sub-categorias, termos de busca e descritores especiais da loja (ex: tamanho, fragrância, fabricante etc).

Veja exemplos de lojas que utilizam o refinamento de buscas:

• Busca na Perfumes.com.br: veja na barra esquerda os filtros de refinamento desta busca. Clique nos ícones [x] para remover filtros.
• Busca na SP Departamentos: veja no topo da página os filtros de refinamento desta busca. Clique no termo sony para alterar a busca.

Veja os detalhes para fazer esta personalização na seção Tags para contextualização e refinamento de buscas da página de tags especiais de produtos.

Exemplo de Personalização

É possível exibir o refinamento de busca na Barra Esquerda da loja virtual (no arquivo BarraEsquerda.htm).

Como implementar?

1° Passo

Realize o backup dos arquivo BarraEsquerda.htm, EstiloProduto.htm e LojaLib.js localizado dentro da pasta HTM da loja.

2° Passo

Edite o arquivo BarraEsquerda.htm. Inclua no código-fonte deste arquivo o código HTML abaixo.

<div id="idExibeFiltrosFC" class="EstExibeFiltrosFC" style="display:none"></div>

3° Passo

Edite o arquivo EstiloProduto.htm. Inclua no código-fonte deste arquivo o código abaixo entre as tags <ProdTop> e </ProdTop>.
Normalmente estas tags estão localizadas no começo do código-fonte do arquivo.

<script>
var iQtdProds=<QtProd>;
</script>
<style type="text/css">
/* Estilos Refinamento de busca Barra Esquerda*/
.EstExibeFiltrosFC{width: 180px; min-height: 50px; position: relative;}
.EstTabFiltros{background-color: #FFFFFF; border: 1px solid #CCCCCC}
.EstTabFiltros tr td, .EstTabFiltros ul, .EstTabFiltros a{font-family: arial, tahoma;}
.EstTitFiltroFC{ width: 100%; height: auto; position: relative; font-size: 14px; color: #3b3b3b; background-color:#E8E8E8}
.EstTitFiltroFC b{display: block; padding: 5px; font-weight: normal;}
.EstListaFiltroFC{width:100%; min-height: 30px; position: relative; display: block; padding: 5px 0;}
.EstListaFiltroFC ul{padding: 5px; position: relative; display: block;}
#idSelPathCatQtFC, #idSelAdic1QtFC, #idSelAdic2QtFC, #idSelAdic3QtFC {width:100%;}
#idUlPathCatQtFC a,#idUlAdic1QtFC a,#idUlAdic2QtFC a,#idUlAdic3QtFC a{text-decoration:none; color:#0e6cb0;}
#idUlPathCatQtFC a:hover,#idUlAdic1QtFC a:hover,#idUlAdic2QtFC a:hover,#idUlAdic3QtFC a:hover{text-decoration:underline; color:333333}
#idUlPathCatQtFC li,#idUlAdic1QtFC li,#idUlAdic2QtFC li,#idUlAdic3QtFC li{font-size:12px;list-style-type:none; margin:5px 10px 3px 5px; }
#idUlPathSearchFC input[type=text]{margin: 5px 0;border: 1px solid #cccccc;}
#idUlPathSearchFC, #idDivLinkAdvancedSearchFC{margin:5px}
#idLinkAdvancedSearchFC{font-size: 12px; color: #009900; text-decoration: none; display: block; padding: 5px 0}
#idLinkAdvancedSearchFC:hover{text-decoration:underline; color: #187095;}
.BotRemoveFiltros{text-align:center; text-decoration: none; display: block; width: 90%; padding:5px 0; margin:10px 0; font-weight: bold; border:1px solid #cccccc; background-color:#eeeeee; color:#254573}
.BotRemoveFiltros:hover{ text-decoration: underline; background-color: #009900; color: #ffffff;}
</style>
<div id="idFiltrosBusca" style="display:none">
<table class="EstTabFiltros" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="EstTitFiltroFC"><b>Filtrando por</b></td>
</tr>
<tr id="idFiltroResultadoFC">
<td><div id="idBuscaFiltro" class="EstListaFiltroFC"><ListPathSearch></div></td>
</tr>
<tr id="idFiltroCatFC">
<td><div class="EstTitFiltroFC"><b><LegendaCats></b></div><div class=EstListaFiltroFC><ListPathCatQt></div></td>
</tr>
<tr id="idFiltroAdic1FC">
<td><div class="EstTitFiltroFC"><b><NomeAdicional1></b></div><div class=EstListaFiltroFC><ListAdic1Qt></div></tr>
<tr id="idFiltroAdic2FC">
<td><div class="EstTitFiltroFC"><b><NomeAdicional2></b></div><div class=EstListaFiltroFC><ListAdic2Qt></div></td>
</tr>
<tr id="idFiltroAdic3FC">
<td><div class="EstTitFiltroFC"><b><NomeAdicional3></b></div><div class=EstListaFiltroFC><ListAdic3Qt></div></td>
</tr>
<tr>
<td><div id="idDivLinkAdvancedSearchFC"><LinkAdvancedSearch></div></td>
</tr>
<tr>
<td align="center"><a class="BotRemoveFiltros" href="/prod>Remover filtros</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
if(iQtdProds>1)exibeRefinamentoBusca();
</script>

4° Passo

Edite o arquivo LojaLib.js. No final do código-fonte deste arquivo inclua o código abaixo:

function exibeRefinamentoBusca(){
var deleteElement = function( sIdFiltro ) {
var el = document.getElementById(sIdFiltro);
el.parentNode.removeChild(el);
};
var oFiltroBusca = document.getElementById('idUlPathSearchFC');
var oFiltroCat = document.getElementById('idUlPathCatQtFC');
var oFiltroAdic1 = document.getElementById('idUlAdic1QtFC');
var oFiltroAdic2 = document.getElementById('idUlAdic2QtFC');
var oFiltroAdic3 = document.getElementById('idUlAdic3QtFC');
if(!oFiltroBusca)deleteElement('idFiltroResultadoFC');
if(!oFiltroCat)deleteElement('idFiltroCatFC');
if(!oFiltroAdic1)deleteElement('idFiltroAdic1FC');
if(!oFiltroAdic2)deleteElement('idFiltroAdic2FC');
if(!oFiltroAdic3)deleteElement('idFiltroAdic3FC');
var sTabFiltros = document.getElementById('idFiltrosBusca').innerHTML;
if(oFiltroBusca || oFiltroCat || oFiltroAdic1 || oFiltroAdic2 || oFiltroAdic3){
document.getElementById('idExibeFiltrosFC').style.display = 'block';
document.getElementById('idExibeFiltrosFC').innerHTML = sTabFiltros;
}
}

---

Avaliações dos clientes: Este produto ainda não recebeu avaliações de clientes. Clique aqui e seja o primeiro a avaliá-lo