Como podemos ajudar?

FC 10343 :: Como apresentar os dados da cesta utilizando AJAX?

Utilize javascript para ler o XML com os dados da cesta e exibí-lo com design personalizado.

Veja abaixo exemplo de histórico de uma visita, exibido através de AJAX (Asynchronous Javascript And XML):

Seguem instruções de implantação deste recurso:

1º Passo

Marque o campo Exibe dados da cesta na página Dados da loja do site administrativo.

2º Passo

Clique aqui com o botão direito do mouse e selecione a opção de Salvar. Envie o arquivo salvo para a pasta htm.

3º Passo

Adicione o código abaixo ao final do arquivo LojaSite.css:

/* Dados da cesta - ajax */
.Cart{display:none;border: 1px solid;border-color: #cecece;background-color: #FFFFFF;box-shadow: 2px 2px 2px 2px #ccc;padding: 0px 0px 10px 10px;position: absolute;text-align: left;}
.Cart a {color: #2E8B57;}
.CartAjax:hover .Cart{display: block;}
.ItemXML{font-size: 12px;margin-bottom: 10px;}
.EstTitXML {font-size: 11pt;text-decoration: none;margin-bottom: 8px;margin-top: 8px;border-bottom: 1px solid #cecece;}
.CartRes{display:block;padding:3px 2px 3px 2px;background:#F5F5F5;color:#333333;font-size:9pt;font-weight:bold;border-style:solid;border-width:1px;border-color:#cecece;max-width: 200px;}
.PrecoItem{color: #2E8B57;font-weight: bold;float: right;padding:0px 10px 0px 15px;}
.QtProd{font-weight: bold;}
#ShowCart{font-family: 'OpenSansRegular',verdana,arial;max-width: 480px;margin: 8px;}
.CartInfo{font-size: 15px;border-top: 1px solid #cecece;padding-top: 5px;}
.PrecoTotal{color: #2E8B57;font-weight: bold;float: right;padding-right: 6px;}
.PrecoTotal{color: #2E8B57;}

4º Passo

Adicione o código abaixo ao final do arquivo LojaLib.js:

// Carrinho
function fnShowCart(){AjaxExecFC("/xmlcart.asp","idloja="+ FC$.IDLoja,false,fnShowCartInfo);}

function fnShowCartInfo(oDocXML){
  var oShowCart=document.getElementById("ShowCart");
  if(oShowCart){
    var oProdsCart=oDocXML.getElementsByTagName("item");
    var oInfoCart=oDocXML.getElementsByTagName("cart");
    try{currencyProdCart=(oInfoCart[0].getElementsByTagName("currency")[0].childNodes[0].nodeValue);}
    catch(e){currencyProdCart=""}
    try{TotalQtyProdCart=(oInfoCart[0].getElementsByTagName("TotalQty")[0].childNodes[0].nodeValue);}
    catch(e){TotalQtyProdCart="0"}
    try{subtotalProdCart=(oInfoCart[0].getElementsByTagName("subtotal")[0].childNodes[0].nodeValue);}
    catch(e){subtotalProdCart="0"}
    var QtdCesta=TotalQtyProdCart;
    var sInfoCart="";
    if (QtdCesta>0){
      FCLib$.fnLoadScript(FC$.PathHtm+'MenuTopoAparecer.js',true);
      FCLib$.fnLoadScript(FC$.PathHtm+'MenuTopo.js',true);
            sInfoCart+="      <div class='CartAjax'>";
            sInfoCart+="        <span class='CartRes'>Carrinho: (<span class='EstPrecoProd'>"+ TotalQtyProdCart +"</span>) itens</span>";
            sInfoCart+="        </span>";
            sInfoCart+="      <div class='Cart'>";
            sInfoCart+="        <p class='EstTitXML'><a href='/addproduto.asp?idloja="+ FC$.IDLoja +"' title='Ver meu carrinho'>Meu carrinho:</a></p>";
          sInfoCart+="        <div class='CartItem'>";
      for (i=0;i<oProdsCart.length;i++)
      {
        var sCestaFC=document.getElementById("idMostraDadosCestaFC");
        var NomeProdCart=(oProdsCart[i].getElementsByTagName("prod")[0].childNodes[0].nodeValue);
        var qtyProdCart=(oProdsCart[i].getElementsByTagName("qty")[0].childNodes[0].nodeValue);
        var priceProdCart=(oProdsCart[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
        sInfoCart+="<p class='ItemXML'><span class='TitItem'>" + NomeProdCart + " <span class='QtProd'>(" + qtyProdCart + ") </span></span><span class='PrecoItem'>" + currencyProdCart + " " + priceProdCart + "</span></p>"; 
      }
      sInfoCart+="        </div>";
      sInfoCart+="        <div class='CartInfo'>";
      sInfoCart+="          <p><b>Sub-total:</b> <span class='PrecoTotal'>"+ currencyProdCart +" " + subtotalProdCart +" </span></p>";
      sInfoCart+="        </div>";
      sInfoCart+="      </div>";
      sInfoCart+="      </div>";
    }
    if(sInfoCart!="")oShowCart.innerHTML=sInfoCart;
  }
}

5º Passo

Adicione o código abaixo no local onde os dados da cesta serão exibidos (ex: BarraTopo.htm):

<div id="ShowCart"></div>
<script>fnShowCart();</script>

Obs: O XML do carrinho lista somente os 5 primeiros produtos existentes no carrinho, além do valor total de todos produtos adicionados e a quantidade de itens.