- Seção
FC 13495 :: Como implantar o Fast Preview (espiadinha) na home e nas listas de produtos?
É possível inserir link em cada produto para o cliente espiar os seus detalhes, sem sair da página em que se encontra.
Este recurso facilita a navegação e consequentemente traz mais vendas:
Pode-se consultar rapidamente os detalhes de um produto, incluindo suas variações de tamanho e cor
Em uma lista extensa de produtos com autopaginação, o cliente pode facilmente espiar vários produtos e adicioná-los ao carrinho, sem sair da lista.
Clique aqui para ver exemplo deste recurso em funcionamento.
Seguem os passos de implantação:
1º Passo
Dentro da pasta htm, crie uma pasta chamada fancybox.
Clique aqui para baixar o arquivo que deve ser enviado para a pasta fancybox que acabou de ser criada.
2º Passo
Dentro da pasta images, crie uma pasta chamada fancybox.
Clique aqui para baixar o arquivo que deve ser enviado para a pasta fancybox que acabou de ser criada.
3º Passo
Adicione o código abaixo no começo do arquivo home.htm:
<script src="/jquery-1.8.2.min.js"></script>
<!-- fancybox -->
<script src="<BaseLoja>htm/fancybox/fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" href="<BaseLoja>htm/fancybox/fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.fancybox').fancybox({maxWidth:700,maxHeight: 500});
});
</script>
4º Passo
Clique aqui para baixar o arquivo que deve ser enviado para a pasta htm com um modelo de Fast Preview (espiadinha).
Obs ¹: Neste exemplo foi criado um arquivo chamado EstiloProduto9.htm que aceita as mesmas tags utilizadas no arquivo padrão EstiloProduto.htm.
Obs ²: Quando seu próprio modelo for criado, os includes de arquivos js e css já utilizados pela loja também deverão ser declarados neste arquivo.
5º Passo
No arquivo EstiloProdutoOut.htm deve ser adicionado o link para a espiadinha na tag prod out que está definida no arquivo Home.htm.
Segue código do link:
<a class="fancybox fancybox.iframe" href="ListaProdutos.asp?IDLoja=<IDLoja>&Sty=9&Int=1&IDProduto=<IDProduto>"> <img src="<BaseLoja>images/fancybox/QuickView.png" border="0" title="Espiar"> </a>
Segue exemplo de uma tag prod out completa:
<p234>
<br>
<table border="0" width="180" height="250" cellspacing="0" cellpadding="0" style="border-style:solid;border-width:1px;border-color:#dedede;">
<tr height="50">
<td align="center" class="EstNomeProdCapa">
<a href="/prod,idloja,<idlojanum>,idproduto,<IDProduto>,<NomeProdUA>"><NomeProd></a>
</td>
</tr>
<tr height="120">
<td align="center">
<a href="/prod,idloja,<idlojanum>,idproduto,<IDProduto>,<NomeProdUA>"><div class="ProdCapaDiv"><ImagemProd></div></a>
</td>
</tr>
<tr height="50">
<td align="center" class="MainStyPrice"><PrecoSimples></td>
</tr>
<tr>
<td align="center">
<a class="fancybox fancybox.iframe" href="ListaProdutos.asp?IDLoja=<IDLoja>&Sty=9&Int=1&IDProduto=<IDProduto>"><img src="<BaseLoja>images/fancybox/QuickView.png" border="0" title="Espiar"></a>
</td>
</tr>
</table>
<br>
</p234>
6º Passo
Marque o campo Adiciona produto à cesta sem sair da página que fica na página "Dados da loja" do site administrativo.
|
