Neste artigo mostraremos como eliminar um dos grandes problemas que o lojista enfrenta: apresentar todas as formas de pagamento de uma maneira clara, sem poluir o layout da loja virtual.

Uma das soluções que costumamos usar nos layouts desenvolvidos pela Dotstore é uma aplicação jQuery que coloca as formas de pagamento em Abas, onde o cliente visualiza os detalhes ao clicar nas bandeiras apresentadas.

Para utilizar esse recurso em sua loja, é preciso entrar no painel de controle, menu lateral, arquivos, pasta HTM e baixar o arquivo: “ProdutoDetalhes.htm”.

Observação: É necessário chamar a biblioteca jQuery no “BarraTopo.htm”.

<script type="text/javascript"
src="https://www.dotstore.com.br/dotstore/inc/extras/jquery.min.js"></script>

Agora, precisamos abrir o arquivo baixado e acrescentar o seguinte código javascript:

<!--No Jquery abaixo você consegue estilizar--> <script>  
$(document).ready(function() {   $("#ConteudoPagamento > 
div").hide();   $("#ConteudoPagamento > div:eq(0)").show();  
 $("#AbasPagamento > a:eq(0)").css("background", "#ccc");  
 $("#AbasPagamento > a:eq(0)").css("border-top", "1px solid 
#ccc");   $("#AbasPagamento > a:eq(0)").css("border-
left", "1px solid #ccc");   $("#AbasPagamento > a:eq
(0)").css("border-right", "1px solid #ccc");  });     
function opentabPagamento(num) {   $("#ConteudoPagamento 
> div").hide();   $("#ConteudoPagamento > div:eq(" + 
(num-1) + ")").fadeIn();   $("#AbasPagamento > a").css
("background", "transparent");   $("#AbasPagamento > a").css
("border-top", "1px solid #fff");   $("#AbasPagamento > 
a").css("border-left", "1px solid #fff");   
$("#AbasPagamento > a").css("border-right", "1px solid #fff");   
$("#AbasPagamento > a:eq(" + (num-1) + ")").css("background", "#ccc"); 
   $("#AbasPagamento > a:eq(" + (num-1) + ")").css
("border-top", "1px solid #ccc");   $("#AbasPagamento > 
a:eq(" + (num-1) + ")").css("border-left", "1px solid #ccc");   
$("#AbasPagamento > a:eq(" + (num-1) + ")").css("border-right", "1px 
solid #ccc");   } </script>

As linhas de códigos apresentadas mostram os efeitos e os estilos que serão aplicadas na jQuery.

Em seguida, é preciso colocar o HTML dentro do body.

<div id="BoxAbasPagamento">
 <div class="TXTFormasPagamento">* clique nas formas de pagamento para ver detalhes</div>
 <div id="AbasPagamento">
  <!--Aqui você coloca as bandeiras das formas de pagamento-->
        <a href='javascript:void(0)' onclick='opentabPagamento(1);'><img src="##CaminhoDir##imagens/IcoVisa.gif" /></a> 
  <a href='javascript:void(0)' onclick='opentabPagamento(2);'><img src="##CaminhoDir##imagens/IcoMastercard.gif" /></a>     
 </div>
 <div id="ConteudoPagamento">
      <!--Cada DIV representa a quantidade de parcelamento, e a sequencia foi determinada logo acima-->
   <div> 
    <ul>
     <li>1x sem juros de ##ProdutoValorParc % qtdeparc=1 ~ cod=n ##</li>
     <li>2x sem juros de ##ProdutoValorParc % qtdeparc=2 ~ cod=n ##</li>
     <li>3x sem juros de ##ProdutoValorParc % qtdeparc=3 ~ cod=n ##</li>
    </ul>                  
   </div>

   <div> 
    <ul>
     <li>1x sem juros de ##ProdutoValorParc % qtdeparc=1 ~ cod=n ##</li>
     <li>2x sem juros de ##ProdutoValorParc % qtdeparc=2 ~ cod=n ##</li>
     <li>3x sem juros de ##ProdutoValorParc % qtdeparc=3 ~ cod=n ##</li>
    </ul>
   </div>
 </div>
</div>

Com isso, as formas de pagamento já estão funcionando em abas. Agora, veja como funciona e como modificar/incluir uma forma de pagamento.

A Div “AbasPagamento” exibe as bandeiras para pagamento. Para adicionar ou remover uma bandeira é preciso copiar uma linha do HREF e modificar o onclick numerado; ela está na sequência 1 e depois 2. Caso fosse adicionar uma bandeira, haveria uma terceira sequência.

Dentro da Div “ConteúdoPagamento” determina-se o que será exibido quando você clicar na bandeira. Cada DIV que estiver dentro dela representa uma forma de pagamento exibida de acordo com a numeração indicada no onclick acima. Dentro dessas DIVs existem uma LI (Lista não ordenada). A cada LI você deve colocar o conteúdo que será apresentado em uma linha na aba que estiver ativa.

Para finalizarmos, precisamos estilizar o CSS. Abaixo, segue um modelo que utilizamos frequentemente.

<style>
#BoxAbasPagamento{width:100%; clear:both; margin-bottom:10px; padding-top:20px; display:table; text-align:left}
#AbasPagamento{background:#fff; height:45px; overflow:hidden}
#AbasPagamento a{background:#fff; display:block; float:left; height:25px; padding:5px 15px; margin-top:8px; border-bottom:none}
#AbasPagamento a img{border:none; border:1px solid #FFF}
#ConteudoPagamento{ border:1px solid #d4d4d4; padding:10px; text-align:left; float:left; margin-top:-2px; width:100%; height:40px}
#ConteudoPagamento div ul{padding:0px; float:left; margin:0px 20px; display:block}
#ConteudoPagamento div ul li{margin:0px; padding:0px}
</style>

Observação: O CSS acima pode ser mudado para se adequar às suas necessidades.

Esperamos ter ajudado, até a próxima.