Como podemos ajudar?

FC 12867 :: Como personalizar o Xtreme Checkout?

A personalização é feita através de tags especiais, CSS e programação JavaScript.

A personalização é feita através dos arquivos *Checkout.htm, que devem ser criados e enviados para a pasta HTM do gerenciador de arquivos da loja. Estes arquivos podem utilizar recursos do HTML5 e do CSS3. Devem obrigatoriamente conter as tags especiais abaixo, que serão substituídas pelo conteúdo de cada seção do checkout (login, cadastro, frete, pagamento, carrinho de produtos e conclusão do pedido).

Tags especiais para o arquivo Checkout.htm:

Caso a loja não tenha arquivos *Checkout.htm na sua pasta HTM, os modelos internos serão automaticamente utilizados. Segue abaixo o código HTML de cada um destes modelos, para cada versão de design da loja (computador, smartphone e Facebook):

Arquivo HTML modelo para a versão desktop (Checkout.htm)

<table align="center"><tr><td><Login></td></tr></table>
<table cellpadding="0" cellspacing="3" align="center">
<tr>
<td id="idChkTopFC" colspan="3">
<table cellspacing="0" cellpadding="0" align="right">
<tr>
<td>
<div id="idChkOrderConfirmationFloat"><OrderConfirmation></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="idChkCol1FC" valign="top"><Register></td>
<td id="idChkCol2FC" valign="top">
<span id="idChkIniCol2FC"></span>
<div id="idChkTagsCol2FC"><OrderCompletion><Freight><Payment></div>
</td>
<td id="idChkCol3FC" valign="top"><Cart></td>
</tr>
<tr>
<td id="idChkBottomFC" colspan="3"></td>
</tr>
</table>

Arquivo HTML modelo para a versão Mobile (MbhCheckout.htm)

<br><OrderCompletion><Login><Register><Freight><Payment><Cart><OrderConfirmation><br>
<style>
#idChkAllFC, #idChkLoginIntFC, #idChkRegisterIntFC, #idChkCompletionIntFC{width:100%;}
#idChkCartIntFC, #idChkFreightIntFC, #idChkPaymentIntFC{width:100%;}
#idChkCCIntFC{width:100%;margin-top:10px;}
</style>
<script>function FuncChkFloat(){}</script>

Arquivo HTML modelo para a versão Facebook (FbhCheckout.htm)

<table align="center"><tr><td><Login></td></tr></table>
<table cellpadding="0" cellspacing="2" align="center">
<tr>
<td id="idChkTopFC" colspan="2">
<table cellspacing="0" cellpadding="0" align="right">
<tr>
<td><OrderConfirmation></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="idChkCol1FC" valign="top"><Register></td>
<td id="idChkCol2FC" valign="top">
<span id="idChkIniCol2FC"></span><OrderCompletion><Freight><Payment>
</td>
</tr>
<tr>
<td id="idChkCol3FC" colspan="2" valign="top"><Cart></td>
</tr>
<tr>
<td id="idChkBottomFC" colspan="2">
<table cellspacing="0" cellpadding="0" align="right"><tr><td><OrderConfirmation></td></tr></table>
</td>
</tr>
</table>
<br>
<style>
#idCheckoutFC #idChkCol1FC{width:350px;}
#idCheckoutFC #idChkCol2FC{width:350px;}
#idCheckoutFC #idChkCol3FC{width:750px;}
#idChkAllFC{width:750px;}
#idChkLoginIntFC{width:300px;}
#idChkRegisterIntFC{width:340px;}
#idChkCompletionIntFC{width:340px;}
#idChkCartIntFC{width:740px;}
#idChkFreightIntFC{width:340px;}
#idChkPaymentIntFC{width:340px;}
#idChkCCIntFC{width:320px;margin-top:10px;}
</style>
<script>function FuncChkFloat(){}</script>

Teste A/B

Se a loja utiliza teste A/B para comparação de resultados de vendas entre duas versões de design, é necessário enviar os arquivos da "versão B" de cada tipo de acesso:

• Acessos por computador: AbtCheckout.htm

• Acessos por smartphone: AbtMbhCheckout.htm

• Acessos pelo Facebook: AbtFbhCheckout.htm

Uso de funções JavaScript de "gatilho"

A maior parte das personalizações pode ser feita com HTML e CSS. Entretanto, para alterações mais avançadas, é necessário utilizar as funções JavaScript de "gatilho".

Quando cada seção do checkout é processada, como por exemplo a atualização da escolha de forma de pagamento, uma função personalizável é chamada antes e outra função é chamada depois do evento, caso estas existam no arquivo *Checkout.htm da loja. Os nomes destas funções são:

Exemplo:

function FuncChkCartEnd(){
.....
}

Exemplo prático: Caso a loja queira personalizar os ícones e nomes das formas de pagamento da seção de escolha de forma de pagamento, deve ser criada a função FuncChkPaymentEnd no seu arquivo Checkout.htm:

function FuncChkPaymentEnd(){
AlteraImgsFormaPagto();
}

Neste exemplo, a função FuncChkPaymentEnd é chamada após a exibição da seção de escolha das formas de pagamento e então é chamada a função AlteraImgsFormaPagto, que irá personalizar as formas de pagamento. Veja exemplo desta função aqui.

A variável F$.Step pode ser utilizada nas funções caso necessário. Esta variável indica o passo atual dentro do contexto do cadastro do cliente, onde: 0=login, 1=ficha de cadastro, 2=pedido concluído. Exemplo:

function FuncChkRegisterEnd(){
if(F$.Step==2){
.....
}
}

Personalização com jQuery

É possível inserir jQuery e criar efeitos de transição como fade, slice e blind nos eventos que ocorrem no checkout, como a exibição de uma mensagem de erro ou a exibição de uma das seções do checkout. Veja exemplos destas transições na loja fictícia SP Departamentos.

Para esta personalização, deve-se criar as seguintes funções:

Exemplo:

<script type="text/javascript">
function FuncChkShow(oObj){
jQuery(oObj).slideDown(500);
}
function FuncChkHide(oObj){
jQuery(oObj).fadeOut(100);
}
function FuncChkIntoView(oObjIntoView){
jQuery('html,body').animate({scrollTop: jQuery(oObjIntoView).offset().top},500);
}
</script>

Caso a loja não tenha o include do jQuery, este deverá ser inserido no começo do arquivo Checkout.htm, como no exemplo abaixo:

<!--[if lt IE 9]>
<script src="jquery-1.10.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.2.min.js"></script>
<!--<![endif]-->

Classes e IDs

O conteúdo de cada seção do checkout é inserido dentro de uma DIV. Sugerimos que estas DIVs não sejam alteradas via JS e CSS. Segue abaixo a lista destas DIVs:

Exemplo de conteúdo inserido dentro da DIV idChkCartFC:

<div id=idChkCartIntFC class=EstChkDiv>
<div id=idTitCartFC class=EstTitCheckoutFC>Resumo do pedido</div>
Conteúdo HTML do carrinho
</div>

Segue os IDs das DIVs "internas", que podem ser alteradas via JS e CSS:

Estas DIVs utilizam a classe EstChkDiv. Utilize esta classe para criar um estilo, borda, cor. (Exemplo do HTML gerado: <div id=idChkCartIntFC class=EstChkDiv>... conteúdo ...</div>)

Para cada seção, existe no começo uma DIV com seu título. (Exemplo do HTML gerado: <div id=idTitCartFC class=EstTitCheckoutFC>Resumo do pedido</div>)

Se a loja não trabalha com frete (ex: produtos enviados por download, como software ou música), deve desabilitar a seção do frete, como neste exemplo:

<style>
#idChkFreightFC{display:none;}
</style>

Outros IDs e classes:

Exibindo os locais de entrega automaticamente

Para que as fichas dos endereços de entrega pré-cadastrados pelo cliente sejam automaticamente exibidas, deve-se inserir na loja o seguinte código:

<style>
#idFichasLocalFC{display:none}
</style>
<script type="text/javascript">
function FuncChkRegisterEnd(){
if(F$.Step==1)F$.fnChkShowPlaces();
}
</script>

Personalização da imagem de "em processamento" no Xtreme checkout

Quando uma seção do checkout está sendo processada, a imagem abaixo é exibida durante este processamento:

É possível personalizar esta imagem. Caso a loja utilize arquivo Checkout.htm, insira as linhas abaixo no final deste arquivo. Se a loja utiliza o modelo padrão, insira estas linhas no arquivo PedRodape.htm.

if(FC$.Page=="Checkout"){
var oImageWaitCheckout=document.getElementById("idWaitingFullImgFC");
if(oImageWaitCheckout)oImageWaitCheckout.src=FC$.PathImg+"loading_ajax.gif";
}

No exemplo acima, o nome da imagem utilizada foi loading_ajax.gif. Esta imagem deve ser previamente enviada para a pasta IMAGES do gerenciador de arquivos da loja.

Atenção: Depois de realizar as personalizações, realize pedidos de teste com cada uma das formas de pagamento disponibilizadas pela loja, principalmente as personalizadas. Se a loja estiver em produção, utilize o recurso de preview do checkout para fazer os testes sem que seus clientes seja afetados. Veja os detalhes no guia de implantação do Xtreme Checkout.

Antes de ativar este recurso, não hesite em esclarecer todas as suas dúvidas
junto aos profissionais da nossa equipe de suporte.

---

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