FC 14920:: Como personalizar a apresentação das formas de pagamento?
Saiba como alterar o design da página de fechamento de pedidos do Xtreme Checkout.
É possível inserir um título, alterar o texto e até mesmo trocar a imagem das formas de pagamento do Xtreme Checkout! Veja abaixo alguns exemplos:
Obs¹: Todos os exemplos são feitos editando o arquvivo Checkout.htm da loja que fica na pasta HTM
Obs²: Todas as alterações são feitas por scripts. Portanto, é desejável conhecimento em JavaScript.
Como inserir um títutlo acima da forma de pagamento?
1º Passo
Insira o código abaixo ao final do arquivo Checkout.htm:
<script>
function FuncChkPaymentEnd(){
FuncChkChangeTitPagto("1","Boleto bancário",""); //Boleto
FuncChkChangeTitPagto("4","Depósito Online","15px"); //Depósito
}
function FuncChkChangeTitPagto(sPagto,sTit,sMtop){
var oPagto=F$.GetID("idPagto"+ sPagto +"FC");
if(oPagto){
var oNewElement=document.createElement("div");
var oDivSecao=oPagto.parentNode.insertBefore(oNewElement,oPagto);
oDivSecao.innerHTML=sTit;
oDivSecao.style.padding="5px";
if(sMtop!='')oDivSecao.style.marginTop=sMtop;
oDivSecao.style.fontWeight="bold";
oDivSecao.style.fontSize="1.1em";
}
}
</script>
No exemplo acima estamos inserindo um título acima das formas de pagamento Boleto e Depósito. A função FuncChkChangeTitPagto é responsável pela montagem e design desses títulos.
Para definir acima de qual forma de pagamento o título será adicionado, altere o ID para a desejada. O ID é o código em destaque. O texto do título é o que está à frente do respectivo ID.
Segue exemplo de aplicação:
2º Passo
Para efetivar a mudança, grave a alteração e apague o cache da loja. Faça pedidos de teste para verificar se está tudo OK.
Como alterar o texto da forma de pagamento?
1º Passo
Insira o código abaixo ao final do arquivo Checkout.htm:
<script>
function FuncChkPaymentEnd(){
FuncChkChangeTxtPagto("21","<label for=Pagto21><div style='line-height:20px;'><span style='font-weight:bold;'>MercadoPago</span><br>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></div></label>");
}
function FuncChkChangeTxtPagto(sPagto,sTxt){
var oPagto=F$.GetID("idTxtPagto"+ sPagto +"FC");
if(oPagto){oPagto.innerHTML=sTxt;}
}
</script>
No exemplo acima, estamos alterando o texto da forma de pagamento MercadoPago. A função FuncChkChangeTxtPagto é responsável por localizar a forma de pagamento e trocar o texto atual.
Para indicar qual forma de pagamento tera seu texto alterado basta alterar o ID para a desejada. O ID é o código em destaque. O texto formatado é o que está à frente do ID respectivo.
Abaixo segue exemplo do código acima aplicado.
2º Passo
Para efetivar a mudança, grave a alteração e apague o cache da loja. Faça pedidos de teste para verificar se está tudo OK.
Como alterar a imagem da minha forma de pagamento?
1º Passo
Insira o código abaixo ao final do arquivo Checkout.htm:
<script>
function FuncChkPaymentEnd(){
FuncChkChangeImgPagto("3_3","mastercard_ico.jpg");
}
function FuncChkChangeImgPagto(sPagto,sImg){
var oPagto=F$.GetID("idImgPagto"+ sPagto +"FC");
if(oPagto){
oPagto.src=FC$.PathImg+sImg;
oPagto.style.width='65px';
oPagto.style.height='41px';
oPagto.style.cursor='pointer';
}
}
</script>
No exemplo acima estamos alterando a imagem da forma de pagamento MasterCard. A função FuncChkChangeImgPagto é responsável por localizar a forma de pagamento e trocar a imagem atual.
Para indicar qual forma de pagamento terá sua imagem personalizada, altere o ID para a da forma desejada e indique o nome da imagem e sua extensão que está a frente do ID respectivo. O ID é o código em destaque. A imagem a ser utilizada deve estar na pasta Images da loja.
Segue exemplo do código aplicado:
2º Passo
Para efetivar a mudança, grave a alteração e apague o cache da loja. Faça pedidos de teste para verificar se está tudo OK.
ATENÇÃO: O arquivo Checkout.htm só pode ter uma função FuncChkPaymentEnd declarada. Sendo assim, caso queira utilizar as 3 alterações acima, basta inseri-las todas dentro dessa função como no seguinte exemplo:
<script>
function FuncChkPaymentEnd(){
FuncChkChangeTitPagto("1","Boleto bancário",""); //Boleto
FuncChkChangeTitPagto("4","Depósito Online","15px"); //Depósito
FuncChkChangeTxtPagto("21","<label for=Pagto21><div style='line-height:20px;'><span style='font-weight:bold;'>MercadoPago</span><br>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></div></label>");
FuncChkChangeImgPagto("3_3","mastercard_ico.jpg");
}
function FuncChkChangeImgPagto(sPagto,sImg){
var oPagto=F$.GetID("idImgPagto"+ sPagto +"FC");
if(oPagto){
oPagto.src=FC$.PathImg+sImg;
oPagto.style.width='65px';
oPagto.style.height='41px';
oPagto.style.cursor='pointer';
}
}
function FuncChkChangeTxtPagto(sPagto,sTxt){
var oPagto=F$.GetID("idTxtPagto"+ sPagto +"FC");
if(oPagto){oPagto.innerHTML=sTxt;}
}
function FuncChkChangeTitPagto(sPagto,sTit,sMtop){
var oPagto=F$.GetID("idPagto"+ sPagto +"FC");
if(oPagto){
var oNewElement=document.createElement("div");
var oDivSecao=oPagto.parentNode.insertBefore(oNewElement,oPagto);
oDivSecao.innerHTML=sTit;
oDivSecao.style.padding="5px";
if(sMtop!='')oDivSecao.style.marginTop=sMtop;
oDivSecao.style.fontWeight="bold";
oDivSecao.style.fontSize="1.1em";
}
}
</script>
|
