Como podemos ajudar?

FC 15061 :: Como exibir o frete na página do carrinho de compras?

Veja como calcular o valor do frete na página que contém os produtos adicionados ao carrinho.

O frete costuma ser um dos fatores determinantes para o fechamento de um pedido. Se este é um dos diferenciais de sua loja, ative este recurso de acordo com as instruções deste artigo.

Veja abaixo como o cliente poderá obter o valor do frete na página do carrinho, antes do checkout:

1º Passo

Inclua o código abaixo no fim do arquivo Rodape.htm:

<script>
if(FC$.Page=="Cart" && (FC$.TypeFrt==3 || FC$.TypeFrt==4)){
  var iValorCesta=<ValorCesta>;
  fnCustomizeCart();
}
</script>

2º Passo

Inclua o código abaixo no fim do arquivo LojaLib.js:

// ############# Cálculo de frete na cesta #######################

function fnCustomizeCart(){
  //insere campo solicitando o CEP para cálculo do lado esquerdo
  var oFCCartSubtotals=document.getElementById("FCCartSubtotals");
  if(document.getElementById("idColPesoFC"))var sColspan=3; else var sColspan=2;
  if(oFCCartSubtotals){
    var oNewElement=document.createElement("tr");
    oNewElement.setAttribute("id","FCCartFreightCalc"); 
    oNewElement.setAttribute("class","not-on-small"); 
    var oTRFreightCalc=oFCCartSubtotals.parentNode.insertBefore(oNewElement,oFCCartSubtotals);
    oTRFreightCalc.innerHTML="<td>Digite o CEP para calcular o frete: <input type=text id=idZipC1 size=10 maxlength=9 class=InputText> <input type=button value='Calcular frete' class=idBut class=InputButton onclick='fnGetShippingValue(1)'></td><td colspan="+ sColspan +"><span id=idShippingObs1></span></td><td align=right><span id=idShippingValue1></span><img src='/images/loading.gif' vspace=3 style='display:none' id=idImgLoadingCEP1></td>";
  }
  //insere campo solicitando o CEP para cálculo do lado direito
  var oFCCartRight=document.getElementById("FCCartSmallSubtotalPrice");
  if(!oFCCartRight)oFCCartRight=document.getElementById("FCCartSmallSubtotals");
  if(oFCCartRight){
    var oNewElement=document.createElement("div");
    oNewElement.setAttribute("id","FCCartSmallFreightCalc"); 
    var oTRFreightCalc=oFCCartRight.parentNode.insertBefore(oNewElement,oFCCartRight);
    var sCEPCont="<div id='FCCartSmallFreight'>";
       sCEPCont+="  <div class='FCCartFreightInfo'>";
       sCEPCont+="    <span class='FCCartFreightLabel'>Digite o CEP para calcular o frete:</span>";
       sCEPCont+="    <input type=text id=idZipC2 size=10 maxlength=9 class=InputText>";
       sCEPCont+="    <div id='FCCartSmallFreightBut'>";
       sCEPCont+="      <input type=button value='Calcular frete' class=idBut class=InputButton onclick='fnGetShippingValue(2)'>";
       sCEPCont+="    </div>";
       sCEPCont+="    <img src='/images/loading.gif' vspace=3 style='display:none' id=idImgLoadingCEP2>";
       sCEPCont+="  </div>";
       sCEPCont+="</div>";
       sCEPCont+="<div id='FCCartSmallFreightPrice'>";
       sCEPCont+="  <ul>";
       sCEPCont+="    <li class='FCCartFreightPriceLabel' id=idShippingObs2>Frete:</li>";
       sCEPCont+="    <li class='FCCartFreightPriceValue' id=idShippingValue2>Calcule acima</li>";
       sCEPCont+="  </ul>";
       sCEPCont+="</div>";
    oTRFreightCalc.innerHTML=sCEPCont;
    fnGetCEP();
  }
}

function fnGetCEP(){
  //se já tem CEP em cookie já mosta cálculo
  var sNumCEP=FCLib$.GetCookie("CEP"+FC$.IDLoja);
  if(sNumCEP!=""){
    document.getElementById("idZipC1").value=sNumCEP;
    document.getElementById("idZipC2").value=sNumCEP;
    fnGetShippingValue(0);
  }
}

function fnGetShippingValue(iField){
  if(iField==0){
    var sCEP=document.getElementById("idZipC1").value;
    if(sCEP=="")sCEP=document.getElementById("idZipC2").value;
  }
  else{
    var sCEP=document.getElementById("idZipC"+iField).value;
  }
  document.getElementById("idZipC1").value=sCEP;
  document.getElementById("idZipC2").value=sCEP;   
  FCLib$.SetCookie("CEP"+FC$.IDLoja,sCEP);
  if(sCEP==""){
    document.getElementById("idShippingValue1").innerHTML="<span style=color:#990000;>Informe o CEP</span>";
    document.getElementById("idShippingValue2").innerHTML="<span style=color:#990000;>Informe o CEP</span>";
  }
  else{
    document.getElementById("idShippingValue1").innerHTML="";
    document.getElementById("idShippingValue2").innerHTML="";
    var oImgLoadingCEP1=document.getElementById("idImgLoadingCEP1");
    if(oImgLoadingCEP1){oImgLoadingCEP1.style.display="";}
    var oImgLoadingCEP2=document.getElementById("idImgLoadingCEP2");
    if(oImgLoadingCEP2){oImgLoadingCEP2.style.display="";}
    AjaxExecFC("/XMLShippingCEP.asp","IDLoja="+ FC$.IDLoja +"&cep="+ sCEP,false,fnprocessXMLCEPC);
  }
}

function fnprocessXMLCEPC(obj){
  var oShippingObs1=document.getElementById("idShippingObs1");
  var oShippingObs2=document.getElementById("idShippingObs2");
  var oShippingValue1=document.getElementById("idShippingValue1");
  var oShippingValue2=document.getElementById("idShippingValue2");
  var iErr=ReadXMLNode(obj,"err");if(iErr==null)return;
  if(iErr!="0"){
    var oImgLoadingCEP1=document.getElementById("idImgLoadingCEP1");
    if(oImgLoadingCEP1){oImgLoadingCEP1.style.display="none";}
    var oImgLoadingCEP2=document.getElementById("idImgLoadingCEP2");
    if(oImgLoadingCEP2){oImgLoadingCEP2.style.display="none";}
    oShippingValue1.innerHTML="<span id=idErrXMLCEPFC style=color:#990000;>"+ ReadXMLNode(obj,"msg") +"</span>";
    oShippingValue2.innerHTML="<span id=idErrXMLCEPFC style=color:#990000;>"+ ReadXMLNode(obj,"msg") +"</span>";
    return;
  }
  oShippingObs1.innerHTML="";oShippingObs2.innerHTML="";oShippingValue1.innerHTML="";oShippingValue2.innerHTML="";
  var OptName=ReadXMLNode(obj,"Opt1Name");
  var OptValue=ReadXMLNode(obj,"Opt1Value");
  var OptObs=ReadXMLNode(obj,"Opt1Obs");
  //oShippingObs1.innerHTML="<b>"+ OptName +"</b><br><span class=ObsFreightCalc>"+ OptObs +"</span>";
  //oShippingObs2.innerHTML="<b>"+ OptName +"</b><br><span class=ObsFreightCalc>"+ OptObs +"</span>";
  oShippingObs1.innerHTML="<b>Frete: </b>";
  oShippingObs2.innerHTML="<b>Frete: </b>";
  oShippingValue1.innerHTML=OptValue;oShippingValue1.style.display="block";
  oShippingValue2.innerHTML=OptValue;oShippingValue2.style.display="block";
  var oImgLoadingCEP1=document.getElementById("idImgLoadingCEP1");
  if(oImgLoadingCEP1){oImgLoadingCEP1.style.display="none";}
  var oImgLoadingCEP2=document.getElementById("idImgLoadingCEP2");
  if(oImgLoadingCEP2){oImgLoadingCEP2.style.display="none";}
  //remove elementos  
  var oFCCartTotalCalc=document.getElementById("FCCartTotalCalc");
  if(oFCCartTotalCalc){oFCCartTotalCalc.parentNode.removeChild(oFCCartTotalCalc);}
  var oFCCartSmallTotalPrice=document.getElementById("FCCartSmallTotalPrice");
  if(oFCCartSmallTotalPrice){oFCCartSmallTotalPrice.parentNode.removeChild(oFCCartSmallTotalPrice);}
  //exibe total com frete
  var iValFrete=OptValue.replace("R$ ","").replace(",",".");
  var iTotalCesta=parseFloat(iValorCesta)+parseFloat(iValFrete);
  //insere totais na tabela principal
  var oLocalInsert=document.getElementById("FCCartSubtotalPrice");
  if(!oLocalInsert)oLocalInsert=document.getElementById("FCCartSubtotals");
  if(oLocalInsert){
    var oNewElement=document.createElement("tr");
    oNewElement.setAttribute("id","FCCartTotalCalc");
    oNewElement.setAttribute("class","not-on-small");
    if(document.getElementById("idColPesoFC"))var sColspan=" colspan=2"; else var sColspan="";
    oNewElement.innerHTML="<td colspan=3 align=right><b>Total:</b></td><td align=right"+ sColspan +"><b>"+ FormatPrice(iTotalCesta,FC$.Currency) +"</b></td>";
    fnInsertAfter(oNewElement,oLocalInsert);
  }
  //insere totais na tabela small
  var oLocalInsert=document.getElementById("FCCartSmallSubtotalPrice");
  if(!oLocalInsert)oLocalInsert=document.getElementById("FCCartSmallSubtotals");
  if(oLocalInsert){
    var oNewElement=document.createElement("div");
    oNewElement.setAttribute("id","FCCartSmallTotalPrice");
    oNewElement.innerHTML="<ul><li class='FCCartSubtotalPriceLabel'>Total:</li><li class='FCCartSubtotalPriceValue'><b>"+ FormatPrice(iTotalCesta,FC$.Currency) +"</b></li></ul>";
    fnInsertAfter(oNewElement,oLocalInsert);
  }
}

function fnInsertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

// ############# Cálculo de frete na cesta #######################

3º Passo

Inclua o código abaixo no fim do arquivo LojaSite.css:

/* Para cálculo de frete no carrinho */
.FCCartRightCol{display:none;}
.FCCartLeftCol{width:100%;}
.ObsFreightCalc{font-size:11px;}
#FCCartFreightSimulation, #FCCartSmallFreightSimulationBut{display:none}
#FCCartFreightCalc .idBut, #FCCartSmallFreightCalc .idBut{margin-left:3px;transition: background-color .3s ease;background-color: #33a1ff;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-border-radius: 3px;border: none;padding: 5px 25px;color: #fff;cursor: pointer;}
#FCCartSmallFreight{margin-top:13px;}
#FCCartSmallFreightCalc .idBut{margin:6px 0}

#FCCartSmallFreightPrice{float:right; text-align:right; max-width: 500px; height: 100%; border-radius: 3px;white-space:nowrap;}
#FCCartSmallFreightPrice ul{margin: 0px; padding:0;}
#FCCartSmallFreightPrice ul li{list-style:none; float:left;}
#FCCartSmallFreightPrice .FCCartFreightPriceLabel{width:200px; padding:5px 2px;height:40px;}
#FCCartSmallFreightPrice .FCCartFreightPriceValue{width:80px; padding:5px 2px; font-weight:bold;height:40px;}

#FCCartSmallTotalPrice{float:right; text-align:right; max-width: 500px; height: 100%; border-radius: 3px;white-space:nowrap;}
#FCCartSmallTotalPrice ul{margin: 0px; padding:0;}
#FCCartSmallTotalPrice ul li{list-style:none; float:left;}
#FCCartSmallTotalPrice .FCCartSubtotalPriceLabel{width:200px; padding:5px 2px;}
#FCCartSmallTotalPrice .FCCartSubtotalPriceValue{width:80px; padding:5px 2px; font-weight:bold;}

#FCCartSmallFreightPrice ul li{width: 50% !important; float: left; border: 1px solid #e8e8e8; padding: 8px 10px !important; box-sizing: border-box;list-style:none}
#FCCartSmallFreightPrice ul li:first-child{border-right: 0;}
#FCCartSmallFreightPrice ul li:last-child{font-weight: bold;}
#FCCartSmallFreightPrice{width: 100%;}

#FCCartSmallTotalPrice ul li{width: 50% !important; float: left; border: 1px solid #e8e8e8; padding: 8px 10px !important; box-sizing: border-box;list-style:none}
#FCCartSmallTotalPrice ul li:first-child{border-right: 0;}
#FCCartSmallTotalPrice ul li:last-child{font-weight: bold;}
#FCCartSmallTotalPrice{width: 100%;}

/*Freight Small*/
#FCCartSmallFreightCalc{border: 1px solid #e8e8e8; display:table;border-radius: 0; margin-bottom: 10px;}
#FCCartSmallFreightCalc .FCCartFreightInfo{width:100%; border-bottom: 0px !important; text-align: center;}
#FCCartSmallFreightCalc .FCCartFreightValue{width:100%; text-align: right !important; border-top: 0px !important;}
#FCCartSmallFreightCalc .FCCartFreightPerc{text-align: right !important; display: block;border-top: 0px !important;}
#FCCartSmallFreightCalc .FCCartFreightInput{width: 80%;margin-bottom:10px;}
#FCCartSmallFreightCalc .FCCartFreightLabel{display: block; margin: 5px 0;}
#FCCartSmallFrFCCartSmallFreightCalceight .FCCartFreightError{display:block;margin-bottom:10px;}
#FCCartSmallFreightCalc ul li{width: 50% !important; float: left; border: 1px solid #e8e8e8; padding: 8px 10px !important; box-sizing: border-box;list-style:none}
#FCCartSmallFreightCalc ul li:first-child {border-right: 0;}
#FCCartSmallFreightCalc .FCCartFreightPerc {border-bottom: 0px;}
#FCCartSmallFreightCalc{width: 100%;}
/* Para cálculo de frete no carrinho */