FC 10340 :: Como apresentar o histórico da visita utilizando AJAX?
Utilize javascript para ler o XML do histórico da visita 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 histórico da visita na página Dados da loja do site administrativo.
2º Passo
Adicione o código abaixo ao final do arquivo LojaLib.js:
// Histórico de navegação
function fnShowPageHistory(){AjaxExecFC("/xmlpagehistory.asp","idloja="+ FC$.IDLoja,false,fnExibeHistoricoNaveg);} function fnExibeHistoricoNaveg(oDocXML){ var oXML=oDocXML.getElementsByTagName("item"); var oPageHistory=document.getElementById("PageHistory"); if(oPageHistory){ var sPageHistory=""; for(i=0;i<oXML.length;i++){ var TitleProd=oXML[i].getElementsByTagName("title")[0].childNodes[0].nodeValue; var LinkProd=oXML[i].getElementsByTagName("link")[0].childNodes[0].nodeValue; try{ImageProd=oXML[i].getElementsByTagName("image")[0].childNodes[0].nodeValue;} catch(e){ImageProd="/images/shim.gif";} try{PriceProd=(oXML[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);} catch(e){PriceProd="";} TitleProd=TitleProd.substring(0,20); sPageHistory+="<div class='BoxHist'><div class='TitHist'><a href='"+ LinkProd +"'>"+ TitleProd +"</a></div><div class='ImgHist'><a href='"+ LinkProd +"'><img src='" + ImageProd + "' title='"+ TitleProd +"'></a></div><div class='PricHist'> "+ PriceProd +"</div></div></div>"; } if(sPageHistory!=""){ sPageHistory="<div class='histBorder'><div class='pageHist'>Histórico de navegação</div><div class='pageHistMain'>"+sPageHistory+"</div></div>"; oPageHistory.innerHTML=sPageHistory; } } }
3º Passo
Adicione o código abaixo ao final do arquivo LojaSite.css:
/* Paginas visitadas Ajax */
.BoxHist{max-width: 180px;float:left;margin: 7px 15px 5px 15px;text-align: center;font-family: 'OpenSansRegular',verdana,arial;} .BoxHist a{text-decoration: none;} .BoxHist:hover{border-radius:5px 5px 5px 5px;box-shadow:5px 5px 5px 5px #ccc} .ImgHist img{max-width: 140px;padding:10px;max-height: 140px;} .TitHist{font-size: 14px;overflow: hidden;white-space: nowrap;min-height: 15px;margin: 5px;} .TitHist a{color:#515967;} .PricHist{font-weight: bold;color:#2E8B57;margin: 5px;} .histBorder{text-align: center;font-family: 'OpenSansRegular',verdana,arial;} .pageHist{color: #4169E1;font-weight: bold;font-size: 18px;} #PageHistory{margin: 0 auto;width: 50%;}
@media only screen and (max-width: 480px){ #PageHistory{display: none;} }
4º Passo
Adicione o código abaixo no arquivo Rodape.htm, na posição desejada:
<div id="PageHistory"></div>
<script>fnShowPageHistory();</script>
Obs: O histórico só registra as visitas às seguintes páginas:
Página detalhada ou ampliada dos produtos
Categorias dos produtos
Acesse a ficha de cada categoria para cadastrar a imagem que representará esta página no histórico da visita.Páginas personalizadas apresentadas pela Custom.asp
Nestas páginas são obrigatórios o title e a tag especial <PageImage> entre o <head> e </head> do arquivo html
Ex.:<head><title>Quem somos</title><PageImage>QuemSomos.gif</PageImage></head>
A imagem que está entre as tags <PageImage> e </PageImage> deve ser enviada para a pasta prod.
Esta é a imagem que representará esta página no histórico da visita.
|
