- Seção
FC 15086 :: Como personalizar páginas de produtos com javascript e JSON?
Utilize este recurso para criar homepages, hotsites e landing pages com personalizações extremas.
As possibilidades de personalização são praticamente ilimitadas. Pode-se criar uma home com filtros, paginação, opções de ordenação e até mostrar os subprodutos da grade como produtos individuais.
Clique aqui para ver principais vantagens das páginas com personalização extrema.
ATENÇÃO: Os procedimentos deste artigo consideram que loja utiliza o modelo 2 atualizado e requer conhecimentos avançados em HTML e Javascript. Fale com nossa equipe de suporte se sua loja utiliza outro modelo ou tem design personalizado.
Através desse artigo vamos criar uma nova home e uma nova lista de produtos que utilizam objetos JSON enviados pelo webserver contendo um array dos produtos. Siga os passos abaixo para implantar:
Antes de iniciar, faça backup da pasta HTM.
1º Passo
Clique aqui para baixar um ZIP com os arquivos HTM. Em seguida, envie este arquivo ZIP para a pasta HTM da loja.
Dentro da pasta existem 3 arquivos. O arquivo estiloproduto2.htm e o home-banner.htm são referentes à nova home. O arquivo estiloproduto3.htm refere-se à nova lista de produtos.
2º Passo
No topo do site administrativo, clique em Arquivos > pasta HTM > pasta JS. Localize o arquivo store-lib.js e clique no ícone do lápis verde ao seu lado para editar.
Dividimos este passo em várias etapas para facilitar as alterações dos scripts:
No fim do arquivo insira o código abaixo:
/* Product Template functions */
var pt$=(function(){
"use strict";
var aProdTags=[],bListHasSubprod=false,aSubProdTags,sProdListTemplate="",sProdCustomTemplate="",sCustomTemplate="",iStartPos=0,iStartScript=0,
oCurrentProd,oProdListContainer,oCustomContainer,sAttrName,sAttrParam,sDescLabel,sDescFld,
bGridShow,bGridUseMainPrice,bGridSoldoutShow,bGridSingleOpt,bGridFromPrice,
oStoreTags={
pathImg:FC$.PathImg
};
function init(){
var sKey,oRegExp,
oProdListTemplate=document.getElementById("prodListTemplate"),
oProdCustomTemplate=document.getElementById("prodCustomTemplate"),
oCustomTemplate=document.getElementById("customTemplate");
if((oProdListTemplate && oProdListTemplate.value!="") || (oCustomTemplate && oCustomTemplate.value!="")){
oProdListContainer=document.getElementById("prodListContainer");
if(oCustomTemplate){
sCustomTemplate=oCustomTemplate.value;
removeFromDom(oCustomTemplate);
if(sCustomTemplate!="")oCustomContainer=document.getElementById("customContainer");
}
if(oProdListTemplate){
sProdListTemplate=oProdListTemplate.value;
removeFromDom(oProdListTemplate);
}
if(oProdCustomTemplate){
sProdCustomTemplate=oProdCustomTemplate.value;
removeFromDom(oProdCustomTemplate);
}
if(sProdListTemplate!="" || sProdCustomTemplate!=""){
fnGetAllConfig();
for(sKey in oStoreTags){
oRegExp=new RegExp("<"+ sKey +">","gi");
if(sProdListTemplate!="")sProdListTemplate=sProdListTemplate.replace(oRegExp,oStoreTags[sKey]);
if(sProdCustomTemplate!="")sProdCustomTemplate=sProdCustomTemplate.replace(oRegExp,oStoreTags[sKey]);
if(sCustomTemplate!="")sCustomTemplate=sCustomTemplate.replace(oRegExp,oStoreTags[sKey]);
}
FCLib$.onLoaded(function(){fnExecProdList();});
}
}
else console.log("Product template not defined!");
}
function fnGetAllConfig(){
bGridShow=sF$.fnGetConfig("Product_List_Grid_Show");
bGridUseMainPrice=sF$.fnGetConfig("Product_List_Grid_Use_Main_Price");
bGridSoldoutShow=sF$.fnGetConfig("Product_List_Grid_Soldout_Show");
bGridSingleOpt=sF$.fnGetConfig("Product_List_Grid_Single_Option");
bGridFromPrice=sF$.fnGetConfig("Product_List_Grid_FromPrice_Label_Show");
sDescLabel=sF$.fnGetConfig("Product_List_Grid_Main_Descriptor_Label");
if(sDescLabel && sDescLabel.length>0)sDescLabel+=" ";else sDescLabel="";
sDescFld=sF$.fnGetConfig("Product_List_Grid_Main_Descriptor_Field");
if(sDescFld=="color" || sDescFld=="desc1" || sDescFld=="desc2" || sDescFld=="desc3" || sDescFld=="descD1" || sDescFld=="descD2" || sDescFld=="descD3")
sAttrName=sDescFld +"Val";
else sAttrName="colorVal";
if(sAttrName=="colorVal")sAttrParam="colorRGB";else sAttrParam=sAttrName;
}
function fnExecProdList(){
sF$.iLazyProds=0;
fnShowProds();
pt$.bListHasSubprod=false;
}
function fnShowProds(){
var i,iProdTags,sListBuf="";
fnDefineDataAttributes();
if(pt$.bListHasSubprod && bGridShow)fnExpandGrid();
if(sCustomTemplate!="" && oCustomContainer && iStartPos==0)fnExecCustom();
if(oProdListContainer){
iProdTags=pt$.aProdTags.length;
if(iProdTags>0){
for(i=iStartPos;i<iProdTags;i++)sListBuf+=fnReplaceProdTags(pt$.aProdTags[i],sProdListTemplate);
oProdListContainer.innerHTML+=sListBuf;
execScripts(oProdListContainer);
}
else hideObj(FCLib$.GetID("idLoadWaitFC1"));
if(iStartPos==0)oProdListContainer.classList.remove("prodListContainer");
iStartPos=iProdTags;
}
else hideObj(FCLib$.GetID("idLoadWaitFC1"));
FCLib$.useLangResource(oResources);
}
function fnDefineDataAttributes(){
var oProdTags,iProdTags=pt$.aProdTags.length,iSubProds,iSubAtual,oSubProdTags;
for(var i=iStartPos;i<iProdTags;i++){
oProdTags=pt$.aProdTags[i];
oProdTags["release"]=(oProdTags.dataattribute.indexOf("data-release=true")>-1);
oProdTags["sale"]=(oProdTags.dataattribute.indexOf("data-sale=true")>-1);
oProdTags["highlight"]=(oProdTags.dataattribute.indexOf("data-highlight=true")>-1);
oProdTags["soldout"]=(oProdTags.dataattribute.indexOf("data-soldout=true")>-1);
if(oProdTags.bHasSubprod){
iSubProds=oProdTags.aSubProdTags.length;
for(iSubAtual=0;iSubAtual<iSubProds;iSubAtual++){
oSubProdTags=oProdTags.aSubProdTags[iSubAtual];
oSubProdTags["release"]=(oSubProdTags.dataattribute.indexOf("data-release=true")>-1);
oSubProdTags["sale"]=(oSubProdTags.dataattribute.indexOf("data-sale=true")>-1);
oSubProdTags["highlight"]=(oSubProdTags.dataattribute.indexOf("data-highlight=true")>-1);
oSubProdTags["soldout"]=(oSubProdTags.dataattribute.indexOf("data-soldout=true")>-1);
}
}
}
}
function fnExecCustom(){
var oTagProd,oNew,oSearchProd,iFoundPos,sOut,oOuts={},aMatch,oRegExp,sOutTemplate,oDiv=document.createElement("div");
oDiv.innerHTML=sCustomTemplate.replace(/(<prod("[^"]*"|[^\/">])*)>/gi,"$1></prod>"); /* add closing </prod> to all <prod> tags */
var aTagsProd=oDiv.querySelectorAll("prod"),iTagsProd=aTagsProd.length;
for(var i=0;i<iTagsProd && pt$.aProdTags.length>0;i++){
oTagProd=aTagsProd[i];
oSearchProd=searchProd(oTagProd);
iFoundPos=oSearchProd.iFoundPos;
sOut=oSearchProd.sOut;
if(iFoundPos>=0 && sOut){
if(oOuts[sOut]==undefined){
oRegExp=new RegExp("<"+ sOut +">((.|\n|\r\n)*?)</"+ sOut +">","gi");
aMatch=oRegExp.exec(sProdCustomTemplate);
oOuts[sOut]=(aMatch && aMatch.length>1?aMatch[1]:"");
}
sOutTemplate=oOuts[sOut];
if(sOutTemplate!=""){
var oNew=document.createElement("div");oNew.innerHTML=fnReplaceProdTags(pt$.aProdTags[iFoundPos],sOutTemplate);
insertDomAfter(oNew,oTagProd);
pt$.aProdTags.splice(iFoundPos,1); /* Remove item from array */
}
}
removeFromDom(oTagProd);
}
oCustomContainer.innerHTML=oDiv.innerHTML;
execScripts(oCustomContainer);iStartScript=0;
}
function searchProd(oTagProd){
var i,sAtual,bAchei=false,iProdTags=pt$.aProdTags.length,oProdTags,iPos,
sEm=oTagProd.getAttribute("em"),
sIDs=oTagProd.getAttribute("id"),
sCods=oTagProd.getAttribute("cod"),
sCats=oTagProd.getAttribute("cat"),
sOut=oTagProd.getAttribute("out"),
oParam={
lanc:false,prom:false,capa:false,rand:false,
aIDs:{},aCods:{},aCats:{}
};
if(sEm){
var aEm=sEm.toLowerCase().split(","),iEm=aEm.length;
for(i=0;i<iEm;i++){
sAtual=aEm[i];
if(sAtual=="lanc" || sAtual=="new")oParam.lanc=true;
if(sAtual=="capa" || sAtual=="high")oParam.capa=true;
if(sAtual=="prom")oParam.prom=true;
if(sAtual=="rand")oParam.rand=true;
}
if(oParam.rand)var aRnd=randomizeArray(iProdTags)
}
if(sIDs)oParam.aIDs=getParam(sIDs);
if(sCods)oParam.aCods=getParam(sCods);
if(sCats)oParam.aCats=getParam(sCats);
for(i=0;i<iProdTags && !bAchei;i++){
iPos=(oParam.rand?aRnd[i]:i);
oProdTags=pt$.aProdTags[iPos];
bAchei=(!oParam.prom || oProdTags.sale)
&& (!oParam.lanc || oProdTags.release)
&& (!oParam.capa || oProdTags.highlight)
&& (Object.keys(oParam.aIDs).length==0 || oParam.aIDs[oProdTags.prodId])
&& (Object.keys(oParam.aCods).length==0 || oParam.aCods[oProdTags.prodRef.toLowerCase()])
&& (Object.keys(oParam.aCats).length==0 || oParam.aCats[oProdTags.catName.toLowerCase()]);
}
return{
iFoundPos:(bAchei?iPos:-1),
sOut:sOut
};
}
function getParam(sValues){
var oValues={},aValues=sValues.split(","),iValues=aValues.length;
for(var i=0;i<iValues;i++)oValues[aValues[i].toLowerCase()]=true;
return oValues;
}
function fnReplaceProdTags(oProdTags,sProdTemplate){
var sKey,oRegExp,sProdBuf=sProdTemplate;
for(sKey in oProdTags){
oRegExp=new RegExp("<"+ sKey +">","gi");
sProdBuf=sProdBuf.replace(oRegExp,oProdTags[sKey]);
}
return sProdBuf;
}
function fnExpandGrid(){
var i,iProdTags=pt$.aProdTags.length,oProdTags,aNewList=[];
for(i=iStartPos;i<iProdTags;i++){
oProdTags=pt$.aProdTags[i];
if(oProdTags.bHasSubprod)fnGetGrid(oProdTags,aNewList);
else aNewList.push(cloneJSON(oProdTags));
}
pt$.aProdTags.length=iStartPos;
pt$.aProdTags=pt$.aProdTags.concat(aNewList);
}
function fnGetGrid(oProdTags,aNewList){
var aAttr=[],oAttr,iAttr=0,sAttrVal,sAttrSub,oAttrSub,oSubProdTags,oNewList,iSubProds=oProdTags.aSubProdTags.length;
for(var iSubAtual=0;iSubAtual<iSubProds;iSubAtual++){
oSubProdTags=oProdTags.aSubProdTags[iSubAtual];
if(bGridSoldoutShow || oSubProdTags.prodStock>0){
sAttrSub=oSubProdTags[sAttrName];
if(sAttrSub!=""){
sAttrVal=oSubProdTags[sAttrParam];
if(aAttr[sAttrSub]==undefined){
aAttr[sAttrSub]={
"attr":sAttrVal,
"prodId":oSubProdTags.prodId,
"prodRef":oSubProdTags.prodRef,
"prodImgMain":oSubProdTags.prodImgMain,
"prodImgDet":oSubProdTags.prodImgDet,
"prodStock":(oSubProdTags.prodStock>0?oSubProdTags.prodStock:0),
"prodPriceOri":oSubProdTags.prodPriceOri,
"prodPriceNum":oSubProdTags.prodPriceNum,
"bLanc":oSubProdTags.release,
"bProm":oSubProdTags.sale,
"bCapa":oSubProdTags.highlight,
"bEsgo":oSubProdTags.soldout,
"bMinPrice":false
};
iAttr++;
}
else{
oAttr=aAttr[sAttrSub];
if(oAttr.prodRef!="" && oAttr.prodRef!=oSubProdTags.prodRef)oAttr.prodRef="";
if(oAttr.prodImgMain=="" && oSubProdTags.prodImgMain!="")oAttr.prodImgMain=oSubProdTags.prodImgMain;
if(oAttr.prodImgDet=="" && oSubProdTags.prodImgDet!="")oAttr.prodImgDet=oSubProdTags.prodImgDet;
if(oSubProdTags.prodStock>0)oAttr.prodStock+=oSubProdTags.prodStock;
if(oSubProdTags.prodPriceNum>0 && oSubProdTags.prodPriceNum!=oAttr.prodPriceNum)oAttr.bMinPrice=true;
if(oSubProdTags.prodPriceNum>0 && oSubProdTags.prodPriceNum<oAttr.prodPriceNum){
oAttr.prodPriceOri=oSubProdTags.prodPriceOri;
oAttr.prodPriceNum=oSubProdTags.prodPriceNum;
}
if(oProdTags.release)oAttr.bLanc=oAttr.bLanc || oSubProdTags.release;else oAttr.bLanc=oAttr.bLanc && oSubProdTags.release;
if(oProdTags.sale)oAttr.bProm=oAttr.bProm || oSubProdTags.sale;else oAttr.bProm=oAttr.bProm && oSubProdTags.sale;
if(oProdTags.highlight)oAttr.bCapa=oAttr.bCapa || oSubProdTags.highlight;else oAttr.bCapa=oAttr.bCapa && oSubProdTags.highlight;
oAttr.bEsgo&=oSubProdTags.bEsgo;
}
}
}
}
if(iAttr<(bGridSingleOpt?1:2))aNewList.push(cloneJSON(oProdTags));
else{
for(sAttrSub in aAttr){
oAttrSub=aAttr[sAttrSub];
aNewList.push(cloneJSON(oProdTags));
oNewList=aNewList[aNewList.length-1];
oNewList.prodId=oAttrSub.prodId;
if(oAttrSub.prodRef!="")oNewList.prodRef=oAttrSub.prodRef;
oNewList.URLProd+=(oNewList.URLProd.indexOf(",")>=0?",attr,":"?attr=")+ encodeURI(oAttrSub.attr);
oNewList.prodNameFU+="-"+ encodeURI(sAttrSub.replace(/ /g,"-")).toLowerCase();
oNewList.prodName+=" "+ sDescLabel + sAttrSub;
if(oAttrSub.prodImgMain!="")oNewList.prodImgMain=oAttrSub.prodImgMain;
if(oAttrSub.prodImgDet!="")oNewList.prodImgDet=oAttrSub.prodImgDet;
oNewList.prodStock=oAttrSub.prodStock;
if(!bGridUseMainPrice || oAttrSub.prodPriceNum>0){
oNewList.prodPriceOri=oAttrSub.prodPriceOri;
oNewList.prodPriceNum=oAttrSub.prodPriceNum;
oNewList.bMinPrice=(oAttrSub.bMinPrice && bGridFromPrice);
}
oNewList.release=oAttrSub.bLanc;
oNewList.sale=oAttrSub.bProm;
oNewList.highlight=oAttrSub.bCapa;
oNewList.soldout=oAttrSub.bEsgo;
oNewList.dataattribute=(oNewList.release?"data-release=true":"") + (oNewList.sale?" data-sale=true":"") + (oNewList.highlight?" data-highlight=true":"") + (oNewList.soldout?" data-soldout=true":"");
}
}
}
function cloneJSON(oJSON){return JSON.parse(JSON.stringify(oJSON));}
function removeFromDom(obj){obj.parentNode.removeChild(obj);}
function insertDomAfter(oNew,oRef){oRef.parentNode.insertBefore(oNew,oRef.nextSibling);}
function showObj(obj){if(obj)obj.classList.remove("hideThis");}
function hideObj(obj){if(obj)obj.classList.add("hideThis");}
function randomizeArray(iLen){
var i,iPosRnd,aOri=[],aRnd=[];
for(i=0;i<iLen;i++)aOri.push(i);
for(i=0;i<iLen;i++){
iPosRnd=getRandomNum(0,aOri.length-1);
aRnd.push(aOri[iPosRnd]);
aOri.splice(iPosRnd,1); /* Remove item from aOri */
}
return aRnd;
}
function execScripts(oNewDom){
var aScript=oNewDom.getElementsByTagName("script"),iScripts=aScript.length;
if(iScripts>iStartScript){
for(var i=iStartScript;i<iScripts;i++){
if(aScript[i].type!="application/ld+json"){
if(window.execScript)window.execScript(aScript[i].text);
else window.eval(aScript[i].text);
}
}
iStartScript=iScripts;
}
}
return{
aProdTags:aProdTags,
bListHasSubprod:bListHasSubprod,
aSubProdTags:aSubProdTags,
oCurrentProd:oCurrentProd,
init:init,
fnExecProdList:fnExecProdList
};
})();
Altere a função fnProd().
DE:
function fnProd(prodImgMain,prodImgDet,URLProd,prodId,prodNameFU,prodPriceNum,prodPriceOri,prodRef,prodMaxInstallmentNum,prodStock){
sF$.fnChangeImages(prodImgMain,prodImgDet,URLProd,prodId,prodNameFU);
sF$.fnShowProd(prodPriceNum,prodPriceOri,prodRef,prodMaxInstallmentNum,prodId);
/* SPY2 - Start */
/*remove image link*/
function removeImgLink(){
document.getElementById("DivImagemProdDouble"+ prodId).addEventListener("click", function(event){
event.preventDefault()
});
}
if(!sF$.fniOSversion() || sF$.fniOSversion()[0]>=13){
removeImgLink();
}
/*END-remove image link*/
/*remove spy2 from iOS<13*/
if(sF$.fniOSversion() && sF$.fniOSversion()[0]<13){
document.getElementById("DivImagemProdDouble"+ prodId).removeAttribute("onclick");
sF$.fnRemoveSpy2From("getProdNome"+ prodId,"newPRODlinkNome"+ prodId,"DivProductListNomeProd"+ prodId,URLProd);
sF$.fnRemoveSpy2From("getProdPric"+ prodId,"newPRODlinkPrice"+ prodId,"DivProductListPriceProd"+ prodId,URLProd);
}
/*END - remove spy2 from iOS<13*/
/* SPY2 - End */
sF$.fnGetSubProductSoldOutID(prodId,iEstoqueSubs,bTemSubs);
sF$.fnGetProductSoldOutID(prodId,prodStock);
};
PARA:
function fnProd(prodImgMain,prodImgDet,URLProd,prodId,prodNameFU,prodPriceNum,prodPriceOri,prodRef,prodMaxInstallmentNum,prodStock,subprodTotalStock,bHasSubprod,bMinPrice){
sF$.fnChangeImages(prodImgMain,prodImgDet,URLProd,prodId,prodNameFU);
sF$.fnShowProd(prodPriceNum,prodPriceOri,prodRef,prodMaxInstallmentNum,prodId,bMinPrice);
/* SPY2 - Start */
/*remove image link*/
function removeImgLink(){
document.getElementById("DivImagemProdDouble"+ prodId).addEventListener("click", function(event){
event.preventDefault()
});
}
if(!sF$.fniOSversion() || sF$.fniOSversion()[0]>=13){
removeImgLink();
}
/*END-remove image link*/
/*remove spy2 from iOS<13*/
if(sF$.fniOSversion() && sF$.fniOSversion()[0]<13){
document.getElementById("DivImagemProdDouble"+ prodId).removeAttribute("onclick");
sF$.fnRemoveSpy2From("getProdNome"+ prodId,"newPRODlinkNome"+ prodId,"DivProductListNomeProd"+ prodId,URLProd);
sF$.fnRemoveSpy2From("getProdPric"+ prodId,"newPRODlinkPrice"+ prodId,"DivProductListPriceProd"+ prodId,URLProd);
}
/*END - remove spy2 from iOS<13*/
/* SPY2 - End */
if(!subprodTotalStock || (subprodTotalStock<=0 && bHasSubprod))sF$.fnGetSubProductSoldOutID(prodId,subprodTotalStock,bHasSubprod);
sF$.fnGetProductSoldOutID(prodId,prodStock);
};
Altere a função fnShowProd().
DE:
function fnShowProd(Price,OriginalPrice,Cod,iMaxParcels,ProductID){
/* Function that shows the price of the product, installment payment, cash discount and badge (home and list) */
iPL++;
var idPrice=fnGetID("idProdPrice"+ProductID);
var sPrice="";
if(Price==0 && OriginalPrice==0){
if(idPrice)idPrice.innerHTML="<div class=\"prices\"><br><div class=\"price font-bold\"><div class=currency><a href='"+ FCLib$.uk("url-contact") +"?"+ (rk("topic-query-product-subject") +"="+ rk("topic-query-product-about") +" ("+ rk("topic-query-product-code") +" ").replace((/ /g,"%20")) + Cod +")' target='_top' >"+ rk("list-price-call-us") +"</a></div></div></div>";
return void(0);
}
var iPrice=Price.toString().split(".");
if(iPrice.length==2){
var iPriceInt=iPrice[0];
var PriceDecimal=iPrice[1];
if(PriceDecimal.length==1)PriceDecimal+="0";
}
else{
var iPriceInt=iPrice;
var PriceDecimal="00";
}
/* Installment */
if(typeof ParcelsValues!="undefined" && iMaxParcels==0){
var iPosArrayValue=0;
for(var i=0;i<ParcelsValues.length && Price>=ParcelsValues[i];i++){iPosArrayValue=i;}
iMaxParcels=iPosArrayValue+1;
}
var sInterest;
if(typeof ParcelsInterests!="undefined"){
if(iMaxParcels==0||iMaxParcels>ParcelsInterests.length)iMaxParcels=ParcelsInterests.length;
if(ParcelsInterests[iMaxParcels-1]>0)sInterest=""; else sInterest=" <span class='home-price-breakline'>"+ rk("list-price-no-interest") +"</span>";
}
else{
iMaxParcels=0;
}
if(Price!=OriginalPrice){
sPrice+="<div class=\"prices\">";
sPrice+=" <div class=\"old-price font-regular\">"+ rk("list-price-was") +" <span>"+ FCLib$.formatMoney(OriginalPrice,FC$.Currency) +"</span></div>";
sPrice+=" <div class=\"price home-price font-bold\"><span class=\"home-price-por\">"+ rk("list-price-now") +" </span>"+ FC$.Currency + " " + FCLib$.formatMoneyInt(iPriceInt) + FCLib$.getDecimalSep() + "<span class=\"home-price-cents\">" + PriceDecimal + "</span>" +"</div>";
if(iMaxParcels>1)sPrice+=" <div class=\"installments font-regular\"><strong><span class=\"installment-count\">"+ iMaxParcels +"</span>x</strong> <strong><span class=\"installment-price\">"+ FCLib$.formatMoney(CalculateInstallment(Price,iMaxParcels),FC$.Currency) +"</span></strong>"+ sInterest +"</div>";
sPrice+="</div>";
}
else{
sPrice+="<div class=\"prices\">";
sPrice+=" <div class=\"price home-price font-bold\">"+ FC$.Currency + " " + FCLib$.formatMoneyInt(iPriceInt) + FCLib$.getDecimalSep() + "<span class=\"home-price-cents\">" + PriceDecimal + "</span>" +"</div>";
if(iMaxParcels>1)sPrice+=" <div class=\"installments font-regular\"><strong><span class=\"installment-count\">"+ iMaxParcels +"</span>x</strong> <strong><span class=\"installment-price\">"+ FCLib$.formatMoney(CalculateInstallment(Price,iMaxParcels),FC$.Currency) +"</span></strong>"+ sInterest +"</div>";
sPrice+="</div>";
}
if(idPrice)idPrice.innerHTML=sPrice;
/* Discount */
if(Price>0 && iPaymentDiscount>0){
var oProdDesc=document.getElementById("ProdDesc"+ ProductID);
if(oProdDesc)oProdDesc.innerHTML=""+ rk("price-in-cash") +" <b>"+ FCLib$.formatMoney(Price*((100-iPaymentDiscount)/100),FC$.Currency)+ "</b>";
}
/* Badge */
var oBadge=document.getElementById("DivProd"+ProductID);
if(oBadge){
if(fnGetConfig("Product_Badges_Home_ProductList")){
var sBadges="";
if(oBadge.hasAttribute("data-sale") && OriginalPrice>Price)sBadges+="<div id='badgeProm"+ ProductID +"' class='fc-badge-product-sale' title='Oferta'><span>-" + fnGetSale() + "%</span></div>";
/* if(oBadge.hasAttribute("data-release"))sBadges+="<div class='fc-badge-product-release' title='Lançamento'>✱</div>"; */
/* if(oBadge.hasAttribute("data-highlight"))sBadges+="<div class='fc-badge-product-highlight' title='Destaque'>☛</div>"; */
if(sBadges!="")oBadge.innerHTML+="<div class='fc-badge-product-principal'>"+ sBadges +"</div>";
}
function fnGetSale(){return parseInt((OriginalPrice-Price)/OriginalPrice*100);}
}
}
PARA:
function fnShowProd(Price,OriginalPrice,Cod,iMaxParcels,ProductID,bMinPrice){
/* Function that shows the price of the product, installment payment, cash discount and badge (home and list) */
iPL++;
var idPrice=fnGetID("idProdPrice"+ProductID);
var sPrice="";
if(Price==0 && OriginalPrice==0){
if(idPrice)idPrice.innerHTML="<div class=\"prices\"><br><div class=\"price font-bold\"><div class=currency><a href='"+ FCLib$.uk("url-contact") +"?"+ (rk("topic-query-product-subject") +"="+ rk("topic-query-product-about") +" ("+ rk("topic-query-product-code") +" ").replace((/ /g,"%20")) + Cod +")' target='_top' >"+ rk("list-price-call-us") +"</a></div></div></div>";
return void(0);
}
var iPrice=Price.toString().split(".");
if(iPrice.length==2){
var iPriceInt=iPrice[0];
var PriceDecimal=iPrice[1];
if(PriceDecimal.length==1)PriceDecimal+="0";
}
else{
var iPriceInt=iPrice;
var PriceDecimal="00";
}
/* Installment */
if(typeof ParcelsValues!="undefined" && iMaxParcels==0){
var iPosArrayValue=0;
for(var i=0;i<ParcelsValues.length && Price>=ParcelsValues[i];i++){iPosArrayValue=i;}
iMaxParcels=iPosArrayValue+1;
}
var sInterest;
if(typeof ParcelsInterests!="undefined"){
if(iMaxParcels==0||iMaxParcels>ParcelsInterests.length)iMaxParcels=ParcelsInterests.length;
if(ParcelsInterests[iMaxParcels-1]>0)sInterest=""; else sInterest=" <span class='home-price-breakline'>"+ rk("list-price-no-interest") +"</span>";
}
else{
iMaxParcels=0;
}
if(Price!=OriginalPrice && !bMinPrice){
sPrice+="<div class=\"prices\">";
sPrice+=" <div class=\"old-price font-regular\">"+ rk("list-price-was") +" <span>"+ FCLib$.formatMoney(OriginalPrice,FC$.Currency) +"</span></div>";
sPrice+=" <div class=\"price home-price font-bold\"><span class=\"home-price-por\">"+ rk("list-price-now") +" </span>"+ FC$.Currency + " " + FCLib$.formatMoneyInt(iPriceInt) + FCLib$.getDecimalSep() + "<span class=\"home-price-cents\">" + PriceDecimal + "</span>" +"</div>";
if(iMaxParcels>1)sPrice+=" <div class=\"installments font-regular\"><strong><span class=\"installment-count\">"+ iMaxParcels +"</span>x</strong> <strong><span class=\"installment-price\">"+ FCLib$.formatMoney(CalculateInstallment(Price,iMaxParcels),FC$.Currency) +"</span></strong>"+ sInterest +"</div>";
sPrice+="</div>";
}
else{
sPrice+="<div class=\"prices\">";
if(bMinPrice)sPrice+=" <div class=\"old-price font-regular\">"+ rk("product-list-from") +" </div>";
sPrice+=" <div class=\"price home-price font-bold\">"+ FC$.Currency + " " + FCLib$.formatMoneyInt(iPriceInt) + FCLib$.getDecimalSep() + "<span class=\"home-price-cents\">" + PriceDecimal + "</span>" +"</div>";
if(iMaxParcels>1)sPrice+=" <div class=\"installments font-regular\"><strong><span class=\"installment-count\">"+ iMaxParcels +"</span>x</strong> <strong><span class=\"installment-price\">"+ FCLib$.formatMoney(CalculateInstallment(Price,iMaxParcels),FC$.Currency) +"</span></strong>"+ sInterest +"</div>";
sPrice+="</div>";
}
if(idPrice)idPrice.innerHTML=sPrice;
/* Discount */
if(Price>0 && iPaymentDiscount>0){
var oProdDesc=document.getElementById("ProdDesc"+ ProductID);
if(oProdDesc)oProdDesc.innerHTML=""+ rk("price-in-cash") +" <b>"+ FCLib$.formatMoney(Price*((100-iPaymentDiscount)/100),FC$.Currency)+ "</b>";
}
/* Badge */
var oBadge=document.getElementById("DivProd"+ProductID);
if(oBadge){
if(fnGetConfig("Product_Badges_Home_ProductList")){
var sBadges="";
if(oBadge.hasAttribute("data-sale") && OriginalPrice>Price)sBadges+="<div id='badgeProm"+ ProductID +"' class='fc-badge-product-sale' title='Oferta'><span>-" + fnGetSale() + "%</span></div>";
/* if(oBadge.hasAttribute("data-release"))sBadges+="<div class='fc-badge-product-release' title='Lançamento'>✱</div>"; */
/* if(oBadge.hasAttribute("data-highlight"))sBadges+="<div class='fc-badge-product-highlight' title='Destaque'>☛</div>"; */
if(sBadges!="")oBadge.innerHTML+="<div class='fc-badge-product-principal'>"+ sBadges +"</div>";
}
function fnGetSale(){return parseInt((OriginalPrice-Price)/OriginalPrice*100);}
}
}
No início do arquivo altere a configuração de Lazyload.
DE:
if(FC$.LazyLoad==0)var sLazy="",sSrc="src"; else var sLazy=" loading=lazy",sSrc="data-src";
PARA:
if(FC$.LazyLoad==0)var sLazy="",sSrc="src",iMaxLazyProds=9999; else var sLazy=" loading=lazy",sSrc="data-src",iMaxLazyProds=6; var iLazyProds=0;
Altere a função fnChangeImages() da seguinte forma:
DE:
/* Mouseover change image Home and List */
function fnChangeImages(sImagemProdPri,sImagemProdDet,sDescUrl,sProductId,sNomeProd){
var replaceNomeProd=sNomeProd.replace(/-/g,' ');
var tagImgPri=sImagemProdPri;
var sIdCampo="DivImagemProdDouble"+ sProductId;
if(fnGetConfig("Change_Image_Hover_Home_ProductList")){
if (tagImgPri==""){
document.getElementById(sIdCampo).innerHTML="<img height='200px' src='/images/nd0.gif'>";
}
else {
var tagImgDet=sImagemProdDet;
var sLenghtImg=tagImgDet;
var nLenghtImg=sLenghtImg.search(",");
if(nLenghtImg<0){
document.getElementById(sIdCampo).innerHTML="<a href="+ sDescUrl +"><img height='159'"+ sSrc +"='"+ sImagemProdPri +"' alt=\""+ replaceNomeProd +"\""+ sLazy +"></a>";
}
else {
var valImgDet=null;
if(tagImgDet!=null){valImgDet = tagImgDet.split(",");}
var imgDet0=valImgDet[0];
var imgDet1=valImgDet[1];
if((imgDet0.indexOf('#')>=0 && imgDet0.indexOf('/')>=0) || (imgDet1.indexOf('#')>=0 && imgDet1.indexOf('/')>=0)){
imgDet0=valImgDet[0].replace('#', "/lojas/");
imgDet1=valImgDet[1].replace('#', "/lojas/");
}
else if(imgDet0.indexOf('#')>=0 || imgDet1.indexOf('#')>=0){
imgDet0=valImgDet[0].replace('#', FC$.PathPrdExt);
imgDet1=valImgDet[1].replace('#', FC$.PathPrdExt);
}
else {
imgDet1=FC$.PathPrd + valImgDet[1];
}
if(imgDet0==null){
document.getElementById(sIdCampo).innerHTML="<a href=" + sDescUrl + "><img height='159' "+ sSrc +"='" + sImagemProdPri + "' alt=\""+ replaceNomeProd +"\""+ sLazy +"></a>";
}
else {
document.getElementById(sIdCampo).innerHTML="<a href=" + sDescUrl + "><img height='159' "+ sSrc +"='" + imgDet0 + "'' border='0'' onmouseover=\"this.src='" + imgDet1 + "'\" onmouseout=\"this.src='" + imgDet0 + "'\" alt=\""+ replaceNomeProd +"\""+ sLazy +"></a>";
}
}
}
}else{
document.getElementById(sIdCampo).innerHTML="<a href=" + sDescUrl + "><img height='159' "+ sSrc +"='" + sImagemProdPri + "' alt=\""+ replaceNomeProd +"\""+ sLazy +"></a>";
}
}
PARA:
/* Mouseover change image Home and List */
function fnChangeImages(sImagemProdPri,sImagemProdDet,sDescUrl,sProductId,sNomeProd){
var sSrcLocal;
sF$.iLazyProds++;
if(sF$.iLazyProds<=sF$.iMaxLazyProds)sSrcLocal="src";else sSrcLocal=sSrc;
var replaceNomeProd=sNomeProd.replace(/-/g,' ');
var tagImgPri=sImagemProdPri;
var sIdCampo="DivImagemProdDouble"+ sProductId;
if(fnGetConfig("Change_Image_Hover_Home_ProductList")){
if (tagImgPri==""){
document.getElementById(sIdCampo).innerHTML="<img height='200px' src='/images/nd0.gif'>";
}
else {
var tagImgDet=sImagemProdDet;
var sLenghtImg=tagImgDet;
var nLenghtImg=sLenghtImg.search(",");
if(nLenghtImg<0){
document.getElementById(sIdCampo).innerHTML="<a href="+ sDescUrl +"><img height='159'"+ sSrcLocal +"='"+ sImagemProdPri +"' alt=\""+ replaceNomeProd +"\""+ sLazy +"></a>";
}
else {
var valImgDet=null;
if(tagImgDet!=null){valImgDet = tagImgDet.split(",");}
var imgDet0=valImgDet[0];
var imgDet1=valImgDet[1];
if((imgDet0.indexOf('#')>=0 && imgDet0.indexOf('/')>=0) || (imgDet1.indexOf('#')>=0 && imgDet1.indexOf('/')>=0)){
imgDet0=valImgDet[0].replace('#', "/lojas/");
imgDet1=valImgDet[1].replace('#', "/lojas/");
}
else if(imgDet0.indexOf('#')>=0 || imgDet1.indexOf('#')>=0){
imgDet0=valImgDet[0].replace('#', FC$.PathPrdExt);
imgDet1=valImgDet[1].replace('#', FC$.PathPrdExt);
}
else {
imgDet1=FC$.PathPrd + valImgDet[1];
}
if(imgDet0==null){
document.getElementById(sIdCampo).innerHTML="<a href=" + sDescUrl + "><img height='159' "+ sSrcLocal +"='" + sImagemProdPri + "' alt=\""+ replaceNomeProd +"\""+ sLazy +"></a>";
}
else {
document.getElementById(sIdCampo).innerHTML="<a href=" + sDescUrl + "><img height='159' "+ sSrcLocal +"='" + imgDet0 + "' border=0 onmouseover=\"this.src='" + imgDet1 + "'\" onmouseout=\"this.src='" + imgDet0 + "'\" alt=\""+ replaceNomeProd +"\""+ sLazy +"></a>";
}
}
}
}else{
document.getElementById(sIdCampo).innerHTML="<a href=" + sDescUrl + "><img height='159' "+ sSrcLocal +"='" + sImagemProdPri + "' alt=\""+ replaceNomeProd +"\""+ sLazy +"></a>";
}
}
Na função fnChangeDivMenuPosition(), altere a linha abaixo:
DE:
if(FC$.Page=="Products"){
Para:
if(FC$.Page=="Products" && document.getElementById("ProductsFilterFC") && document.getElementById("fc-mobile-dynamic-filter")){
Dentro de sF$ exporte iMaxLazyProds e iLazyProds.
Exemplo:
execLangResource:execLangResource, sCurrentPage:sCurrentPage, iLazyProds:iLazyProds, iMaxLazyProds:iMaxLazyProds, fnGetID:fnGetID, fnGetConfig:fnGetConfig,
Após realizar todas as etapas acima, clique em Salvar.
3º Passo
No topo do site administrativo, clique em Arquivos > pasta HTM > pasta JS. Localize o arquivo sort-lib.js e clique no ícone do lápis verde ao seu lado para editar. Em seguida localize a linha abaixo e faça a seguinte alteração:
DE:
document.getElementById('idPagProdTop').innerHTML="<div id='idDivPagProd'><table width='100%'><tr><td>"+ sOrdenacao +"</td></tr></table></div>";
PARA:
if(document.getElementById('idPagProdTop'))document.getElementById('idPagProdTop').innerHTML="<div id='idDivPagProd'><table width='100%'><tr><td>"+ sOrdenacao +"</td></tr></table></div>";
Clique em Salvar.
4º Passo
No topo do site administrativo, clique em Arquivos > pasta HTM > pasta JS. Localize o arquivo config.js e clique no ícone do lápis verde ao seu lado para editar.
Inclua as linhas abaixo após a linha que começa com "Popup_Dont_Go":
"Product_List_Grid_Show":[true,"Mostra grade como produto na lista de produtos."], "Product_List_Grid_Use_Main_Price":[false,"Mostra na grade da lista de produtos o preço do produto pai se subprodutos não tiverem preço."], "Product_List_Grid_Soldout_Show":[true,"Mostra produtos esgotados na grade da lista de produtos."], "Product_List_Grid_Single_Option":[false,"Mostra grade como produto na lista de produtos mesmo em produtos com única opção."], "Product_List_Grid_FromPrice_Label_Show":[true,"Mostra legenda <b><i>A partir de</i></b> quando exibir na lista de produtos o menor preço da grade."], "Product_List_Grid_Main_Descriptor_Label":["","Label do principal descritor de grade, que será adicionado ao nome do produto. ex: tam"], "Product_List_Grid_Main_Descriptor_Field":["color","Nome do primeiro campo descritor de grade. Opções: color, desc1, desc2, desc3, descD1, descD2, descD3"],
Clique em Salvar.
5º Passo
Crie o redirecionamento das novas páginas. No menu esquerdo da administração clique em Dados da loja, seção Navegação e SEO. Ao lado do campo redirecionamento clique no ícone da seta.
No campo Caminho de informe: /newhome
No campo Caminho para informe: /prod,sty,2,products,50,th,home-banner
No campo Header prencha com o código abaixo:
<title>Nova Home</title><FavIcons bgcolor="#f0f0f0"><meta name="theme-color" content="#0E72D2"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5">
Marque o campo Manter no Caminho De.
Clique em Incluir.
6º Passo
Acesse a nova página com o endereço: www.seudominio.com.br/newhome
OBS: Para ativar a nova página como a home da loja, faça os passos 5 e 6 alterando /newhome para /home.
R$ 4,52Conheça alguns recursos avançados para personalizações extremas de listas de produtos, para criar hotsites e landing pages.
R$ 4,48É possível selecionar quaisquer produtos da loja para criar hotsites relevantes.
|

