Personalizar Template Blogger para Loja Virtual Online com PagSeguro (Grátis)
Autor: Ruan Phablo | Publicado: 2013-11-30T17:39:00-02:00





Depois de muita procura e pedidos externos conseguimos personalizar o template da loja virtual online para plataforma blogger com o sistema de pagamentos do PagSeguro, melhorando o e-commerce que está sendo trabalhado na sua loja e alavancando o relacionamento com seu cliente do pagamento até a entrega. Tudo isso gratuitamente, logo facilitamos e muito para você webmaster.



Quero deixar claro em que nos poucos que conseguiram fazer a personalização não divulgam o feito, cobram pela mudança, e isso é claro e óbvio para ser feito, porém eu estou inovando na blogosfera e quebrando com o trabalho de muitos desenvolvedores com esta publicação(risco problema futuro). Demorou muito para descobrir onde iria ser feita as mudanças no template, mas estamos aqui para lhe mostrar.



Deixo de imediata a informação que o sistema do pagseguro que funciona neste template é o básico, mas não se preocupem irá e muito bem suprir as necessidades do seu negocio da forma como iremos tratar aqui no post. Pelo normal de um meta blog deveríamos te passar a personalização, porém iremos disponibilizar meios de fazer seu negocio funcionar com esta básica loja, sem pagar nada.



Não posso esquecer no incentivo que o leitor JP&nbsp;no deixou ao participar comentado a existência de um blog que conseguiu editar o template para o pagseguro, quando vimos isso foi algo surpreendente, pois para mim era impossível, mas estamos aqui, para te passar o impossível(rsrsrs). Não posso esquecer de que em nosso blog já trabalhamos com a configuração do mesmo template&nbsp;e foi um sucesso com os internautas, portanto queremos fazer o mesmo show participativo com você leitor com este post.



Primeiras impressões com a plataforma de pagamentos PagSeguro





No momento que fizemos a primeira instalação, tivemos grande dificuldade pois o template já possui o PayPal e tem alguns trechos do Google Checkout, e para implementar um código de funcionamento para pagamento em HTML do PagSeguro não foi fácil e principalmente pelo pouco conhecimento de nossa parte em desenvolvimento em códigos complexos. Mas graças a Deus estamos aqui. Aproveitando a proeza realizada, quero informar mais um problema, na codificação do template e do código API do pagseguro, pequenas informações não são mostradas nos quesitos descritivos no pagamento dos produtos pelo pagseguro, no decorrer da personalização você irá entender.



Se preparando para a instalação

Se você você ainda não tem a loja e nem sabe por onde começar, mas deseja ter um negocio online de sua loja física, baixe o template por aqui, e se possível siga as dicas de configurações aqui, não satisfeito reproduza o vídeo 1 e 2 para um melhor resultado. Depois de todos os contados que você teve com o template, crie sua conta(Física/Jurídica) no pagseguro, pois será preciso a sua experiencia do sistema nas compras e vendas, se não tem experiência com o pagseguro leia cada termo de uso, e aprenda com o mesmo como o usar. Tendo mais alguma dúvida, antes de comentar ou entrar em contato conosco veja os comentários dos dois posts que você visitou agora a pouco.



OBS: Já que está tudo pronto, revise tudo se tiver mais dúvidas e siga abaixo a instalação.



Instalando o PagSeguro para Template Loja Blogger



Seguindo o formato do template no blog que o leitor JP nos demonstrou, tirei minhas conclusões na hora de instalar e editar cada cada parte necessária da codificação do template, até mesmo a estilização do blog com CSS. Vamos lá.



- Adicionando os links direcionados aos códigos Javascript e jQuery do template, abaixo desse link aqui:&nbsp;&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/&gt;



 

  
&lt;script
  src='https://jt-scriptsource.googlecode.com/svn/trunk/jquery.cookie.js'
  type='text/javascript'/&gt;

&lt;script
  src='https://jt-scriptsource.googlecode.com/svn/trunk/superfish.js'
  type='text/javascript'/&gt;

&lt;script
  src='https://jt-scriptsource.googlecode.com/svn/trunk/jquery.carouFredSel-4.5.2.js'
  type='text/javascript'/&gt;

&lt;script
  src='https://jt-scriptsource.googlecode.com/svn/trunk/function.featured_product.min.js'
  type='text/javascript'/&gt;

&lt;script
  src='http://gizaa.webs.com/simpleCartPagseguroPaypal.js'
  type='text/javascript'/&gt;

&lt;script type='text/javascript'&gt;

 




- Trocar e-mail do template pelo da conta pagseguro&nbsp;procurando por&nbsp;me.email = "";, logo no primeiro resultado da busca do trecho copiado irá encontrar o exato para edição, ao lado dele coloque seu email de vendas do pagseguro(email cadastrado).



-Ativar ligação do template com o código de pagamento do pagseguro pela gestão de checkout, deverá ser feita primeiramente mudando &nbsp;trechos e colando o código, para começar procure por:





 

  default:
&nbsp;&nbsp;&nbsp; me.customCheckout();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break;

 



E deixe-o dessa forma mostrado abaixo:




 

  case: PagSeguro
&nbsp;&nbsp;&nbsp; me.pagseguroCheckout();
 &nbsp;&nbsp;&nbsp;break;                        

 



Depois procure por: me.customCheckout = function e troque por me.pagseguroCheckout = function, ainda no mesmo trecho cole o código abaixo depois de "{"&nbsp;e&nbsp;antes de "return;":



 

  &lt;!-- Declaração do formulário --&gt;&nbsp; 
&lt;form target="pagseguro" method="post"&nbsp;&nbsp; 
action="https://pagseguro.uol.com.br/v2/checkout/payment.html"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Campos obrigatórios --&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="receiverEmail" value="suporte@lojamodelo.com.br"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="currency" value="BRL"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Itens do pagamento (ao menos um item é obrigatório) --&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemId1" value="0001"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemDescription1" value="Notebook Prata"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemAmount1" value="24300.00"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemQuantity1" value="1"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemWeight1" value="1000"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemId2" value="0002"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemDescription2" value="Notebook Rosa"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemAmount2" value="25600.00"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemQuantity2" value="2"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="itemWeight2" value="750"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Código de referência do pagamento no seu sistema (opcional) --&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="reference" value="REF1234"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Informações de frete (opcionais) --&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingType" value="1"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingAddressPostalCode" value="01452002"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingAddressStreet" value="Av. Brig. Faria Lima"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingAddressNumber" value="1384"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingAddressComplement" value="5o andar"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingAddressDistrict" value="Jardim Paulistano"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingAddressCity" value="Sao Paulo"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingAddressState" value="SP"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="shippingAddressCountry" value="BRA"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Dados do comprador (opcionais) --&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="senderName" value="José Comprador"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="senderAreaCode" value="11"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="senderPhone" value="56273440"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" name="senderEmail" value="comprador@uol.com.br"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- submit do form (obrigatório) --&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="image" name="submit"&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/120x53-pagar.gif"&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;alt="Pague com PagSeguro"&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;/form&gt;

 



- Editar o simple cart setting para funcionamento direto com moeda, elementos descritivos de produto e email da conta pagseguro deverá ser feita após procurar no template com por SIMPLE CART SETTING e quando achar trocar a moeda por BRL, o email pelo cadastrado e o cartHeaders não precisa mexer pois não conseguimos manipular as informações dele na hora do pagamento.



Pronto a instalação do Código de pagamento foi totalmente feita com sucesso, é o que eu creio, agora devemos modificar as estilizações para melhor funcionamento e relacionamento com seu cliente.



Personalizar template estilisticamente

Para nós, as modificações tinham acabado, mas depois das constantes visualizações é percebida drasticamente os resultados finais depois da instalação. Como preocupação da imagem profissional da loja virtual (Marketing Pessoal) repensamos de como ficaria pronta a loja, onde concluímos que para estar totalmente pronto seria preciso as modificações do nosso post de configuração mais as edições tradadas abaixo:



-Tamanhos desproporcionais para uma loja&nbsp;foi a nossa conclusão em relação ao resultado final focando só os tamanhos, logo modificamos alguns corpos elementares do template e a resolução do mesmo. Se desejar fazer isso terá que fazer uma série de buscas, começando por /* Container */ nele mude o width para 1250, depois por&nbsp;/* Content */ para width 1210, outra vez por o primeiro&nbsp;#main-content para width 960 e o segundo para width 174, mais uma vez por .ads-half-banner onde width para 730 e height para 90, no Switch View para width 967 e para finalizar os tamanhos procure por &lt;meta content='width=1100' name='viewport'/&gt; e troque width para 1250.



-Modificações essenciais para a loja se encontram no carrinho, no efeito dos produtos no inicio do site e &nbsp;nos créditos que podem ser editados através dos trechos a seguir, procurando por: &lt;div class='menu-cart'&gt; onde irá selecionar até o segundo fechamento de &lt;/div&gt; e irá trocar por:


 

  
&lt;div
  class='menu-cart'&gt;

&lt;a class='mycart'
  href='#'&gt;Cesta : &lt;span class='simpleCart_quantity'/&gt;
  item(s)&lt;/a&gt;&nbsp; 

Total : &lt;span
  class='simpleCart_total'/&gt;

&lt;div
  class='bag'&gt;

&lt;div
  class='simpleCart_items'/&gt;

&lt;div
  class='clear'/&gt;

&lt;a
  class='simpleCart_empty' href='javascript:;'&gt;Esvaziar&lt;/a&gt;&lt;a
  class='simpleCart_checkout'
  href='javascript:simpleCart.checkoutTo=PagSeguro;simpleCart.checkout();'
  title='Pagar no PagSeguro'&gt;Pagar no Pagseguro&lt;/a&gt;&lt;a
  class='simpleCart_checkout'
  href='javascript:simpleCart.checkoutTo=PayPal;simpleCart.checkout();' title='Pagar
  no PayPal'&gt;Pagar no Paypal&lt;/a&gt;

&lt;/div&gt;

&lt;/div&gt;




Depois procure por&nbsp;&lt;div class='image_carousel clearfix'&gt; e mude o valor de&nbsp;product_image_number para 9, vale salientar que para ver resultado nessa edição deverá ter no minimo 10 posts de testes ou normais, e se estes posts forem adicionados no mesmo momento das edições deverá esperar horas para funcionamento.



E para finalizar as essencialidades na edição procure por &nbsp;/* Credits */&nbsp;logo verá toda a sua estilização, por ela troque pelo código abaixo:




 

  /* Credits */
#footer p.credits {
font-size:10px;
font-weight:400;
text-transform:uppercase;
}
.footer-right{float:right;}
.footer-right a{
display:block;
float:left;
text-indent:-9999px;
height:40px;
margin-left:10px;
}
.footer-right a.pagseguro{
background:url
(http://4.bp.blogspot.com/-n1zZyHgOrcw/UQ0SsZRs9kI/AAAAAAAAAZA/QKLGm2GVX_8/s1600/support.png)
no-repeat 0 -43px; width:85px;
}
.footer-right a.googlecheck:hover{
background-position:0 2.25pt;
}
.footer-right a.paypal{
background:url
(http://4.bp.blogspot.com/-n1zZyHgOrcw/UQ0SsZRs9kI/AAAAAAAAAZA/QKLGm2GVX_8/s1600/support.png)
no-repeat -85px -42px; width:75px;
}
.footer-right a.paypal:hover{
background-position:-85px 2px;

}

 



Creio que depois de tudo isso você verá alguma mudança, se não gostou é só voltar as modificações normais dos tamanhos anteriores.



Problemas com o pagamento

O que nos mais encabulou foi na hora de ver o pagseguro respondendo as funcionalidades da compra do produto, porém ao analisar cada detalhe do produto, só podíamos ver a imagem o titulo do produto e sua pequena descrição. Com minhas poucas habilidades tentei manipular no trecho&nbsp;me.cartHeaders e&nbsp;LanguageManagment junto ao modelo de postagem para que as informações mais precisas do produto provenientes dos parâmetros disponibilizados pelo pagseguro aparecessem na hora do pagamento, Mas como sempre tem que dar um pouco errado ai está a situação.



Solução com o pagamento

Mesmo que você queira desconsiderar estas descrições pessoas com outros tipos de negócios irão exigir de forma diferente, logo é totalmente necessário. Mas mesmo assim percebi que a maior preocupação seja no frete e peso dos produtos com suas respectivas taxas a serem cobradas pelo vendedor para o comprador. Logo recorri ao pagseguro e percebi que ele pode nos trazer uma melhor opção, mesmo que você possa manualmente pesar, informar, postar e enviar o produto ao seu cliente, o pagseguro irá suprir este trabalho com o sistema completo que possui, até em conexão com os correios incrível em?&nbsp;



Então a solução se encontra no envio de cobranças por email, onde nele mesmo você terá a funcionalidade de cobrar frente com o peso em relação a distancia do comprador, e se quiser cobrar algo a mais que foi determinado em alguma conversa com seu cliente.



Conclusão

Se você poder nos ajudar com o nosso problema anterior aceitaria suas mensagens com o maior prazer pela página de contato, e para você que se sentiu felizardo com a loja e nosso esforço para dar de mão beijada a você deixe algum comentário falando da experiência que tem com sua loja. E para não esquecer, uma leitora fez uma "baita" loja: By Keilah



Já tem sua loja? Se não? Por que não começar um negocio online hoje?