- Seção
FC 12104 :: Como implantar recurso de arraste-solte de produtos para a cesta?
Este recurso facilita muito as compras, principalmente para quem utiliza dispositivos touch como celulares e tablets.
Também conhecido como drag'n'drop, é um recurso muito importante para facilitar a rápida inclusão de produtos na cesta, sem sair da página atual.
Veja este recurso em funcionamento na loja flores.lojavirtualfc.com.br. Para adicionar rapidamente um produto à cesta, passe o mouse sobre este produto e mantenha o botão do mouse apertado para "arrastar" (drag) o produto para a cesta, que fica na parte superior direita da página. Quando estiver sobre a cesta, solte o botão do mouse (drop).
ATENÇÃO: A implantação deste recurso requer CONHECIMENTOS AVANÇADOS de html e JavaScript.
O conteúdo mencionado neste exemplo é apenas uma sugestão. A Rumo Informática não se responsabiliza por apresentar mais detalhes a respeito
de alterações e implantações.
Para mais informações, solicite recomendações de webdesigner ou entre em contato com o de sua preferência.
1º Passo
Envie o arquivo arraste_htm.zip para a pasta htm da loja:
Download: arraste_htm.zip
2º Passo
Envie o arquivo arraste_img.zip para a pasta images da loja:
Download: arraste_img.zip
3º Passo
Insira as linhas abaixo no inicio do arquivo BarraTopo.htm:
<script>
IDLoja='<IDLoja>' //Obtém IDLoja para montar links
</script>
<script language="JavaScript" src="../sistema/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<BaseLoja>htm/jquery_ui_min.js"></script>
<script type="text/javascript" src="<BaseLoja>htm/arraste.js"></script>
<!--Cesta-->
<div class="cesta">
<div id="carrinho-info">
<div id="x1"></div>
<div id="x2"></div>
</div>
<div id="carrinho-top">
<div id="carrinho-container">
<ul id="carrinho-produtos">
<li class="adicione"></li>
</ul>
<div style="width:100%; height:21px; display:block">
<div id="result-adicao"></div>
</div>
<div id="bot-cesta"><a href="AddProduto.asp?IDLoja=<IDLoja>"><img src="<BaseLoja>images/BtnCesta.png" width="298" height="21"></a></div>
</div>
</div>
</div>
4º Passo
Adicione o script abaixo no final do arquivo Rodape.htm
<script type="text/javascript">AtualizaCarrinho();</script>
5º Passo
Adicione o script abaixo no final do arquivo LojaLib.js
function ShowCartOnPage(IDLoja,iErr,sMsg,sCartText,sCheckoutText,este){
if(iErr==0)AtualizaCarrinho();
if(sMsg=="Produto adicionado ao carrinho.")
document.getElementById("result-adicao").innerHTML="<div style='font-size:8pt; margin-left:65px'><img src='<BaseLoja>images/BtnOK.png' width='21' height='21'>"+ sMsg +"</div>";
else
document.getElementById("result-adicao").innerHTML="<div style='font-size:8pt; margin-left:9px'><img src='<BaseLoja>images/BtnNotOK.png' width='21' height='21'>"+ sMsg +"</div>";
}
function AtualizaCarrinho(){
if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.open("GET",'XMLCart.asp?IDLoja='+IDLoja,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("item");
var z=xmlDoc.getElementsByTagName("cart");
try{currencyProdCart=(z[0].getElementsByTagName("currency")[0].childNodes[0].nodeValue);}
catch(e){currencyProdCart="R$"}
try{TotalQtyProdCart=(z[0].getElementsByTagName("TotalQty")[0].childNodes[0].nodeValue);}
catch(e){TotalQtyProdCart="0"}
try{subtotalProdCart=(z[0].getElementsByTagName("subtotal")[0].childNodes[0].nodeValue);}
catch(e){subtotalProdCart="0,00"}
var iItensCesta=TotalQtyProdCart;
var sProdutosNaCesta="";
for (i=0;i<x.length;i++)
{
var ImgProdCart=(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
var NomeProdCart=(x[i].getElementsByTagName("prod")[0].childNodes[0].nodeValue);
var qtyProdCart=(x[i].getElementsByTagName("qty")[0].childNodes[0].nodeValue);
var priceProdCart=(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
var idProdCart=(x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue);
if(i>0)sProdutosNaCesta+="<tr height=1><td colspan=4 align=center><img src='images/shim.gif'
style='background: #d1d0d0' width=300 height=1></td></tr>";
sProdutosNaCesta+="<tr><td class=ImgProdCart><a
href='listaprodutos.asp?idloja="+IDLoja+"&idproduto="+ idProdCart +"'><img
src='"+ImgProdCart+"' border='0'></a></td><td class=NomeProdCart width=130><a
href='listaprodutos.asp?idloja="+IDLoja+"&idproduto="+ idProdCart +"'
style='text-decoration:none;'>"+ NomeProdCart.substring(0,22) + "</a></td><td
class=QtdProdCart>(" + qtyProdCart + ")</td><td align=right class=PrecoProdCart nowrap>" +
currencyProdCart + " " + priceProdCart + "</td></tr>";
}
if(sProdutosNaCesta==""){sProdutosNaCesta+="<tr height=40><td width=300 height=180 align=center
class=ImgProdCartVazio></td></tr>";}
try{document.getElementById("carrinho-produtos").innerHTML="<table width=300>"+
sProdutosNaCesta +"</table>";}catch(e){}
try{document.getElementById("x1").innerHTML="<b>Item(s):</b> "+iItensCesta;}catch(e){}
try{document.getElementById("x2").innerHTML="<b>SubTotal:</b> "+currencyProdCart + " " +
subtotalProdCart;}catch(e){}
}
6º Passo
Adicione as linhas abaixo no final do arquivo LojaSite.css
ul#produtos{ list-style:none; }
ul#produtos li{float: left;background-color:#fff; }
div#carrinho-top{position:relative;z-index: 9999;}
div#carrinho-info{position:relative; display: block; background: url(../images/BgCart.png) no-repeat; height:42px; width: 250px; left: 20px; top:auto; z-index: 9999; }
div#carrinho-container{position:absolute;background: url(../images/BgContainer.png) no-repeat; width:327px; height:280px; display:none; z-index: 9999}
div#carrinho-container ul{ overflow:auto; height:206px; padding: 14 0 0 8; margin:0px;list-style:none; z-index: 9999}
div#carrinho-container ul li{ color:#333; font-size:12px; text-align:center; margin:0px;z-index: 9999}
#result-adicao{font: 12px "Arial"; color: #000; display: none; float: left}
#bot-cesta{ margin: 0 0 5 14; display: block}
#carrinho-produtos{ height: 100%;z-index:9999}
#x1, #x2{color: #000;font-family:tahoma,Arial;font-size:8pt;float: left; padding-top: 13px; padding-left: 7px;}
#sMsg{font-size:8pt;}
.produto-drag{ background: url(../images/BgDrag.png) no-repeat; padding:10px;margin:0;width:131px;height:143px;text-align: center; z-index: 9999}
.ui-state-hover{background: url(../images/BgContainerHover.png) no-repeat; font-weight: bold;}
.ImgProdCartVazio{ background: url(../images/ImgProdCartVazio.png) no-repeat;}
.ImgProdCart img{width:30px;height:30px; }
.NomeProdCart a{font-family:tahoma,Arial;font-size:8pt;color:#000}
.QtdProdCart{font-family:tahoma,Arial;font-size:8pt;color:#000}
.PrecoProdCart{font-family:tahoma,Arial;font-size:8pt;color:#000;font-weight:bold}
.Cesta{width: 241px; height:42px; float:right; margin: 0; display: block}
7º Passo
Incluindo a funcionalidade de arraste na home da loja
O arquivo Home.htm entre as tags <prod> deve conter a tag <ul id="produtos">. Exemplo:
<table>
<tr>
<td>
<ul id="produtos">
<div style="float:left"><prod out="p5" em="rand"></div>
<div style="float:left"><prod out="p5" em="rand"></div>
<div style="float:left"><prod out="p5" em="rand"></div>
<div style="float:left"><prod out="p5" em="rand"></div>
</ul>
</td>
</tr>
</table>
O arquivo EstiloProdutoOut.htm entre as tags <p> deve conter a tag <li class="produto"> e dentro dela os inputs e form. Exemplo:
<p255>
<table>
<tr><td class="EstNomeProd"><NomeProd></td></tr>
<tr><td>
<li class="produto">
<input type="hidden" class="produto-id" value="<IDProduto>"/>
<input type="hidden" class="produto-id-loja" value="<IDLoja>"/>
<form name="Form<IDProduto>">
<div><a href='/prod,idloja,<idlojanum>,idproduto,<IDProduto>,<NomeProdUA>' rel="<IDProduto>"><ImagemProd></a></div>
</form>
</li>
</td></tr>
<tr><td class="EstPrecoProd"><PrecoSimples></td></tr>
</table>
</p255>
8º Passo
Adicionando arraste na listagem e na página de detalhe do produto
O arquivo EstiloProduto.htm entre as tags <ProdTop> e </ProdTop> deve conter a tag <ul id="produtos">. Exemplo:
<ProdTop>
<ul id="produtos">
</ProdTop>
O arquivo EstiloProduto.htm entre as tags <ProdBottom> e </ProdBottom> deve conter a tag </ul>. Exemplo:
<ProdBottom>
</ul>
</ProdBottom>
Adicionando arraste no detalhe de produto
O arquivo EstiloProduto.htm entre as tags <ProdDet> e </ProdDet> deve conter a tag <li class="produto"> e dentro
dela os inputs. Exemplo:
<ProdDet>
<table>
<tr> <td> <li class="produto"> <input type="hidden" class="produto-id" value="<IDProduto>"/> <input type="hidden" class="produto-id-loja" value="<IDLoja>"/> <img class="EstImgFC" src="<ImagemProdDet>"/> </li> </td> </tr> </table> </ProdDet>
Adicionando arraste na listagem de produtos
O arquivo EstiloProduto.htm entre as tags <ProdLista> e </ProdLista> deve conter a tag <li class="produto"> e dentro
dela os inputs. Exemplo:
<ProdLista>
<table>
<tr>
<td>
<li class="produto">
<input type="hidden" class="produto-id" value="<IDProduto>"/>
<input type="hidden" class="produto-id-loja" value="<IDLoja>"/>
<div class="EstImgFC"><ImagemProd></div>
</li>
</td>
</tr>
</table>
</ProdLista>
|
