Produtos
Filtros da busca:
Filtrando por:
FC 11873 :: Como personalizar os produtos da página inicial da loja?
Veja exemplos responsivos dos produtos listados na página principal.
Seguem abaixo alguns modelos de "out" para a página principal da loja virtual, para incluir novas funcionalidades e informações nos produtos exibidos nesta página.
Para fazer esta personalização, o código ao lado direito da imagem deve ser copiado ao final do arquivo EstiloProdutoOut.htm e a tag prod deve ser utilizada no arquivo Home.htm:
Exemplo de utilização:
No arquivo Home.htm insira a tag: <prod out="p194" em="rand">
ATENÇÃO: Após escolher o modelo desejado, veja ao final do artigo as instruções finais.
<prod out="p194">
<p194>
<div class="DivProdHome">
<div class="ProdImgHome"><a href="/prod,idloja,<IDLojaNum>,idproduto,<IDProduto>,<NomeProdUA>"><ImagemProd><a/></div>
<div class="ProdNomeHome"><a href="/prod,idloja,<idlojanum>,idproduto,<IDProduto>,<NomeProdUA>"><NomeProd></a></div>
<div class="ProdPriceHome"><Preco></div>
<div class="ProdCompraHome"><center><FormProd><LinkComprar></FormProd></center></div>
<div class="ProdEstoqueHome">Quantidade disponível: <b><Estoque></b></div>
<a href="/prod,idloja,<IDLojaNum>,idproduto,<IDProduto>,<NomeProdUA>"><div class="ProdDetHome"><b>Detalhes</b></div></a>
</div>
</p194>
LojaSite.css
.DivProdHome{max-width: 220px;}
.ProdImgHome img{max-width: 200px; max-height:200px;}
.DivProdHome:hover{border-radius:5px 5px 5px 5px;border:1px dashed; border-color:#4682B4;box-shadow:5px 5px 5px 5px #ccc}
.ProdPriceHome{color:#3CB371;}
.ProdPriceHome .FCCurrencyLabel{color:#3CB371;font-weight:bold;}
.ProdPriceHome strike{color:#DC143C;font-weight:bold;}
.ProdDetHome{background-color:#E6E6FA;margin:3px;font-family: Arial,verdana,tahoma;font-size: 15px;color:#008B8B;}
.ProdDetHome:hover{background-color:#E0FFFF;}
.ProdNomeHome a{font-family: Arial,verdana,tahoma;font-size: 15px;color:#4682B4;}
.ProdNomeHome{min-height:60px;}
.ProdCompraHome img{width:150px;padding:5px 5px 5px 5px;}
.ProdEstoqueHome{font-family: Arial,verdana,tahoma;font-size: 15px;color:#4682B4;padding:5px 5px 5px 5px;}
<prod out="p195">
<p195>
<div class="DivProdHomeR">
<div class="ProdImgHomeR"><a href="/prod,idloja,<IDLojaNum>,idproduto,<IDProduto>,<NomeProdUA>"><ImagemProd><a/></div>
<div class="ProdNomeHomeR"><a href="/prod,idloja,<idlojanum>,idproduto,<IDProduto>,<NomeProdUA>"><NomeProd></a></div>
<div class="ProdPriceHomeR"><Preco></div>
<div class="ProdCompraHomeR"><center><FormProd><LinkComprar></FormProd></center></div>
<a href="#Spy" onclick='bCascate=true;FCLib$.OpenRWD("/listaprodutos.asp?idloja=<IDLoja>&sty=9&int=1&idproduto=<IDProduto>","Disp","width=700,height=700")'><div class="ProdSpyHomeR"><b>Espiar</b></div></a>
</div>
</p195>
LojaSite.css
.DivProdHomeR{min-width: 350px;min-height:200px}
.ProdImgHomeR img{max-width: 190px; max-height:190px;float:left;}
.DivProdHomeR:hover{border-radius:5px 5px 5px 5px;border:1px dashed; border-color:#4682B4;box-shadow:5px 5px 5px 5px #ccc}
.ProdPriceHomeR{color:#3CB371;}
.ProdPriceHomeR .FCCurrencyLabel{color:#3CB371;font-weight:bold;}
.ProdPriceHomeR strike{color:#DC143C;font-weight:bold;}
.ProdSpyHomeR{background-color:#DCDCDC;margin:3px;font-family: Arial,verdana,tahoma;font-size: 15px;color:#3CB371;}
.ProdSpyHomeR:hover{background-color:#696969;}
.ProdNomeHomeR a{font-family: Arial,verdana,tahoma;font-size: 15px;color:#4682B4;}
.ProdNomeHomeR{min-height:60px;padding-top:5px}
.ProdCompraHomeR img{width:150px;padding:5px 5px 5px 5px;}
<prod out="p196">
<p196>
<div class="DivProdHomeL">
<div class="ProdImgHomeL"><a href="/prod,idloja,<IDLojaNum>,idproduto,<IDProduto>,<NomeProdUA>"><ImagemProd><a/></div>
<div class="ProdNomeHomeL"><a href="/prod,idloja,<idlojanum>,idproduto,<IDProduto>,<NomeProdUA>"><NomeProd></a></div>
<div class="ProdPriceHomeL"><Preco></div>
<div class="ProdCompraHomeL"><center><FormProd><LinkComprar></FormProd></center></div>
<div class="ProdEstoqueHomeL">Quantidade disponível: <b><Estoque></b></div>
<a href="/prod,idloja,<IDLojaNum>,idproduto,<IDProduto>,<NomeProdUA>"><div class="ProdDetHomeL"><b>Detalhes</b></div></a>
</div>
</p196>
LojaSite.css
.DivProdHomeL{min-width: 350px;min-height:200px}
.ProdImgHomeL img{max-width: 190px; max-height:190px;float:left;min-height:190px;}
.DivProdHomeL:hover{border-radius:5px 5px 5px 5px;border:1px dashed; border-color:#4682B4;box-shadow:5px 5px 5px 5px #ccc}
.ProdPriceHomeL{color:#3CB371;}
.ProdPriceHomeL .FCCurrencyLabel{color:#3CB371;font-weight:bold;}
.ProdPriceHomeL strike{color:#DC143C;font-weight:bold;}
.ProdDetHomeL{background-color:#E6E6FA;margin:3px;font-family: Arial,verdana,tahoma;font-size: 15px;color:#008B8B;}
.ProdDetHomeL:hover{background-color:#E0FFFF;}
.ProdNomeHomeL a{font-family: Arial,verdana,tahoma;font-size: 15px;color:#4682B4;}
.ProdNomeHomeL{min-height:60px;padding-top:5px}
.ProdCompraHomeL img{width:150px;padding:5px 5px 5px 5px;}
.ProdEstoqueHomeL{font-family: Arial,verdana,tahoma;font-size: 15px;color:#4682B4;padding:5px 5px 5px 5px;}
Se as funções MostraMaxParcela, MostraEconomia e FormatNum não existirem no arquivo LojaLib.js ou no arquivo EstiloProduto.htm, insira as funções abaixo ao final do arquivo LojaLib.js.
//Função que mostra o máximo de parcela na home e na listagem principal de produtos
function MostraMaxParcela(PrecoProd,MaxParcelas){
var ComSem;
if(PrecoProd==0||MaxParcelas==1||Juros.length==0)return;
if(MaxParcelas==0||MaxParcelas>Juros.length)MaxParcelas=Juros.length;
if(Juros[MaxParcelas-1]>0)ComSem=""; else ComSem="<font color=#990000> sem juros</font>";
document.write(" ou <b>"+MaxParcelas+"x</b>"+ComSem+" de <b>"+FormatPrecoReais(CalculaParcelaJurosCompostos(PrecoProd,MaxParcelas))+"</b>");
}
//Função para mostrar valor economizado em produtos em promoção
function MostraEconomia(PrecoProd,PrecoOri){
if(PrecoProd!=PrecoOri)document.write("<br><font color=#6f9e45>Economize <b>"+FormatPrice(PrecoOri-PrecoProd,'R$')+"</b> ("+FormatNum(((PrecoOri-PrecoProd)/PrecoOri)*100)+"%)</font>");
}
function FormatNum(num){
num=num.toString().replace(/\$|\,/g,'');
if(isNaN(num))num="0";
sign=(num==(num=Math.abs(num)));
num=Math.floor(num*100+0.50000000001);
num=Math.floor(num/100).toString();
for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+'.'+num.substring(num.length-(4*i+3));
return ((sign)?'':'-')+num;
}
// Mostrar desconto à vista na página inicial
// (utilizado no OUT que apresenta o preço À vista)
// (altere o "15%" e o "0.85" para o desconto utilizado em sua loja)
function MostraDescontoHome(PrecoProd){
if(PrecoProd==0)return;
document.write("<br><table bgcolor=white cellspacing=0 cellpadding=0><tr class=EstParcPar><td colspan=3 height= 22 bgcolor=white> <center>À vista com <font color=#ff0000><b>15%</font> de desconto. <br>por <b><font color=#ff0000>"+FormatPrecoReais(PrecoProd*0.85)+"</font></b></center></td></tr>");
document.write("</table><br>");
}
|
