Como podemos ajudar?

Encontre os artigos que irão ajudá-lo a melhorar sua loja virtual

Produtos
Filtros da busca:
Filtrando por:

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:


1ª Etapa

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
  };
})();

2ª Etapa

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);
};

3ª Etapa

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);}
  }
}

4ª Etapa

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;

5ª Etapa

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>";
  }
}

6ª Etapa

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")){

7ª Etapa

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.


Assuntos relacionados:

 Avaliações dos clientes:
Este produto ainda não recebeu avaliações de clientes.
Clique aqui e seja o primeiro a avaliá-lo

Seu sucesso não pode esperar,

Criar agora sua
Loja Virtual!

Ou fale com um de nossos
consultores
especializados
em e-commerce.

Veja nossos Planos e Serviços