Como podemos ajudar?

FC 11408 :: Como personalizar os ícones de pagamentos na página de escolha da forma de pagamento?

É possível apresentá-los por exemplo em um formato maior e melhorar sua apresentação.

Este conteúdo se aplica apenas para lojas que utilizam o checkout passo a passo.

Veja exemplo de ícones personalizados na página de escolha de forma de pagamento da loja de demonstração http://spdepartamentos.lojavirtualfc.com.br

Segue abaixo o passo-a-passo:

1) Coloque as funções abaixo no final do arquivo LojaLib.js. Verifique se a loja tem este include JS no arquivo BarraTopo.htm ou outro include JS que pode ser utilizado para agrupar estas funções.

function AlteraEstIcPagto(oIcone){
  oIcone.style.width='65px';
  oIcone.style.height='41px';
  oIcone.style.cursor='pointer';
}

function AlteraImgsFormaPagto(){
  IcPagtoBB=document.getElementById("idImgPagto1FC"); //Boleto bancário
  if(IcPagtoBB){IcPagtoBB.src=sCaminhoImages+'IcPagtoBB.png';AlteraEstIcPagto(IcPagtoBB);}
  IcPagtoCE=document.getElementById("idImgPagto6FC"); //Contra entrega
  if(IcPagtoCE){IcPagtoCE.src=sCaminhoImages+'IcPagtoCE.png';AlteraEstIcPagto(IcPagtoCE);}
  IcPagtoDB=document.getElementById("idImgPagto4FC"); //Depósito bancário
  if(IcPagtoDB){IcPagtoDB.src=sCaminhoImages+'IcPagtoDB.png';AlteraEstIcPagto(IcPagtoDB);}
  IcPagtoBR=document.getElementById("idImgPagto19FC"); //Banco do Brasil
  if(IcPagtoBR){IcPagtoBR.src=sCaminhoImages+'IcPagtoBR.png';AlteraEstIcPagto(IcPagtoBR);}
  IcPagtoIS=document.getElementById("idImgPagto5FC"); //Itaú Shopline
  if(IcPagtoIS){IcPagtoIS.src=sCaminhoImages+'IcPagtoIS.png';AlteraEstIcPagto(IcPagtoIS);}
  IcPagtoRP=document.getElementById("idImgPagto17FC"); //RealPague
  if(IcPagtoRP){IcPagtoRP.src=sCaminhoImages+'IcPagtoRP.png';AlteraEstIcPagto(IcPagtoRP);}
  IcPagtoVE=document.getElementById("idImgPagto16FC"); //VISA Electron
  if(IcPagtoVE){IcPagtoVE.src=sCaminhoImages+'IcPagtoVE.png';AlteraEstIcPagto(IcPagtoVE);}
  IcPagtoPP=document.getElementById("idImgPagto15FC"); //PayPal
  if(IcPagtoPP){IcPagtoPP.src=sCaminhoImages+'IcPagtoPP.png';AlteraEstIcPagto(IcPagtoPP);}
  CCAmex=document.getElementById("idImgPagto3_1FC"); //AMEX
  if(CCAmex){CCAmex.src=sCaminhoImages+'IcPagtoAE.png';AlteraEstIcPagto(CCAmex);}
  CCAura=document.getElementById("idImgPagto3_6FC"); //Aura
  if(CCAura){CCAura.src=sCaminhoImages+'IcPagtoAU.png';AlteraEstIcPagto(CCAura);}
  CCDine=document.getElementById("idImgPagto3_2FC"); //Diners
  if(CCDine){CCDine.src=sCaminhoImages+'IcPagtoDN.png';AlteraEstIcPagto(CCDine);}
  CCElo=document.getElementById("idImgPagto3_7FC"); //Elo
  if(CCElo){CCElo.src=sCaminhoImages+'IcPagtoEL.png';AlteraEstIcPagto(CCElo);}
  CCHiperCard=document.getElementById("idImgPagto3_5FC"); //Hipercard
  if(CCHiperCard){CCHiperCard.src=sCaminhoImages+'IcPagtoHC.png';AlteraEstIcPagto(CCHiperCard);}
  CCMast=document.getElementById("idImgPagto3_3FC"); //MasterCard
  if(CCMast){CCMast.src=sCaminhoImages+'IcPagtoMC.png';AlteraEstIcPagto(CCMast);}
  CCVisa=document.getElementById("idImgPagto3_4FC"); //VISA
  if(CCVisa){CCVisa.src=sCaminhoImages+'IcPagtoVS.png';AlteraEstIcPagto(CCVisa);}
  IcPagtoPS=document.getElementById("idImgPagto18FC"); //PagSeguro
  if(IcPagtoPS){IcPagtoPS.src=sCaminhoImages+'IcPagtoPS.png';AlteraEstIcPagto(IcPagtoPS);}
  IcPagtoMP=document.getElementById("idImgPagto21FC"); //MercadoPago
  if(IcPagtoMP){IcPagtoMP.src=sCaminhoImages+'IcPagtoMP.png';AlteraEstIcPagto(IcPagtoMP);}
  IcPagtoMI=document.getElementById("idImgPagto22FC"); //MoIP
  if(IcPagtoMI){IcPagtoMI.src=sCaminhoImages+'IcPagtoMI.png';AlteraEstIcPagto(IcPagtoMI);}
  IcPagtoVK=document.getElementById("idImgPagto20FC"); //Vakinha
  if(IcPagtoVK){IcPagtoVK.src=sCaminhoImages+'IcPagtoVK.png';AlteraEstIcPagto(IcPagtoVK);}
}

2) Caso queira alterar a fonte dos nomes das formas de pagamento, coloque ao final do arquivo LojaSite.css a seguinte linha:

#TabRadio .EstTabPedido{font-size:11pt;color:#666666;font-family:tahoma,arial;font-weight:bold}

3) Envie as imagens dos ícones personalizados das formas de pagamento para a pasta IMAGES do gerenciador de arquivos da loja. Clique aqui para baixar exemplos destas imagens.

4) Insira o seguinte código no final do arquivo Rodape.htm

<script>
var sPagAtual=document.location.href.toUpperCase();
var sCaminhoImages="<BaseLoja>images/"
//Personalização das imagens das formas de pagamento
if(sPagAtual.indexOf(""FORMAPAGTO.ASP"")>=0)AlteraImgsFormaPagto();
</script>

Obs: Caso a loja tenha formas de pagamentos adicionais cadastradas, a função deverá ser adaptada.

Personalização da legenda da forma de pagamento

Para personalizar o nome da forma de pagamento nesta página, deve ser feita a seguinte alteração na função AlteraImgsFormaPagto.

Exemplo para a forma de pagamento PagSeguro (idTxtPagto18FC). Clique aqui para ver os IDs demais formas de pagamento.

Altere de:

IcPagtoPS=document.getElementById("idImgPagto18FC"); //PagSeguro

if(IcPagtoPS){IcPagtoPS.src=sCaminhoImages+'IcPagtoPS.png';AlteraEstIcPagto(IcPagtoPS);}

Para:

IcPagtoPS=document.getElementById("idImgPagto18FC"); //PagSeguro
if(IcPagtoPS){
  IcPagtoPS.src=sCaminhoImages+'IcPagtoPS.png';
  AlteraEstIcPagto(IcPagtoPS);
  TxtPagtoPS=document.getElementById("idTxtPagto18FC");
  if(TxtPagtoPS){
    TxtPagtoPS.innerHTML="<label for=Pagto18><span style='color:#333333;font-size:12pt;'>PagSeguro</span> (parcelamento em até <b>18x</b> no cartão) <br><span style='font-size=8pt'>VISA, MasterCard, Diners, Amex, Hipercard, Aura, transferência bancária e boleto.</span></label>";
  }
}

O conteúdo personalizado que ficará no lugar do nome da forma de pagamento está em destaque na imagem abaixo: