Phablo Projetos

Personalizar Template Blogger para Loja Virtual Online com Pagseguro (Grátis)

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 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 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: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

- Trocar e-mail do template pelo da conta pagseguro procurando por 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 trechos e colando o código, para começar procure por:

default:

    me.customCheckout();

        break;

E deixe-o dessa forma mostrado abaixo:

case: PagSeguro

    me.pagseguroCheckout();

    break;

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

<!-- Declaração do formulário -->

<form target="pagseguro" method="post"

action="https://pagseguro.uol.com.br/v2/checkout/payment.html">

    <!-- Campos obrigatórios -->

    <input type="hidden" name="receiverEmail" value="suporte@lojamodelo.com.br">

    <input type="hidden" name="currency" value="BRL">

    <!-- Itens do pagamento (ao menos um item é obrigatório) -->

    <input type="hidden" name="itemId1" value="0001">

    <input type="hidden" name="itemDescription1" value="Notebook Prata">

    <input type="hidden" name="itemAmount1" value="24300.00">

    <input type="hidden" name="itemQuantity1" value="1">

    <input type="hidden" name="itemWeight1" value="1000">

    <input type="hidden" name="itemId2" value="0002">

    <input type="hidden" name="itemDescription2" value="Notebook Rosa">

    <input type="hidden" name="itemAmount2" value="25600.00">

    <input type="hidden" name="itemQuantity2" value="2">

    <input type="hidden" name="itemWeight2" value="750">

    <!-- Código de referência do pagamento no seu sistema (opcional) -->

    <input type="hidden" name="reference" value="REF1234">

    <!-- Informações de frete (opcionais) -->

    <input type="hidden" name="shippingType" value="1">

    <input type="hidden" name="shippingAddressPostalCode" value="01452002">

    <input type="hidden" name="shippingAddressStreet" value="Av. Brig. Faria Lima">

    <input type="hidden" name="shippingAddressNumber" value="1384">

    <input type="hidden" name="shippingAddressComplement" value="5o andar">

    <input type="hidden" name="shippingAddressDistrict" value="Jardim Paulistano">

    <input type="hidden" name="shippingAddressCity" value="Sao Paulo">

    <input type="hidden" name="shippingAddressState" value="SP">

    <input type="hidden" name="shippingAddressCountry" value="BRA">

    <!-- Dados do comprador (opcionais) -->

    <input type="hidden" name="senderName" value="José Comprador">

    <input type="hidden" name="senderAreaCode" value="11">

    <input type="hidden" name="senderPhone" value="56273440">

    <input type="hidden" name="senderEmail" value="comprador@uol.com.br">

    <!-- submit do form (obrigatório) -->

    <input type="image" name="submit"

    src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/120x53-pagar.gif"

    alt="Pague com PagSeguro">

</form>

- 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 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 /* Content */ para width 1210, outra vez por o primeiro #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 <meta content='width=1100' name='viewport'/> e troque width para 1250.

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

<a class='mycart' href='#'>Cesta : <span class='simpleCart_quantity'/> item(s)</a>

Total : <span class='simpleCart_total'/>

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

</div>

Depois procure por <div class='image_carousel clearfix'> e mude o valor de 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 /* Credits */ 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

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGp746c5Z2T8HnM4Dpvc8zFot4S4HRrNt7WFNqz6bNgxdMn3w6B59_cakB2jTRCg63nSkX0ikVxYmoO_TbrFtUCD3a-waMYWw92SWqFhWLXEpZA3MJLDBQStT4wvNUfKxU9iVzL5YREMk/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

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGp746c5Z2T8HnM4Dpvc8zFot4S4HRrNt7WFNqz6bNgxdMn3w6B59_cakB2jTRCg63nSkX0ikVxYmoO_TbrFtUCD3a-waMYWw92SWqFhWLXEpZA3MJLDBQStT4wvNUfKxU9iVzL5YREMk/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 me.cartHeaders e 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?

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?

Criar Loja Virtual Blogger com Templates E-commerce [Checkout/Email]

Crie uma loja virtual pelo Blogger sem problemas com plataforma e template, ou melhor, um layout apropriado com o nicho que você irá tratar(Vendas). Estrutura de escolha a pagamento é o que não falta nos Templates abaixo, uso fácil de assimilação e praticidade na hora de finalização de compra. Os Johny Templates são sensacionais.

Antes de tudo, quero deixar claro que nosso blog já relatou sobre o mesmo assunto, porém ligado ao template disponibilizado pelo próprio Google, veja aqui. Dessa vez nos preocupamos com os vários tipos de produtos que vocês são responsáveis de vender, logo templates variados e direcionados a certos tipos de produtos é o nosso foco principal nesse post.

Os templates são criados pelo Johny, sendo disponíveis no Maskolis e Mas Templates, o que me deixa impressionado é com a qualidade dos mesmos, esse Web Designer é muito bom, deixando templates mais que profissionais, e o que me deixa mais perplexo que todos são gratuitos, coisa que devia ter preço, pois o que ele tem feito merece aplausos. De sistema de Cabeçalho até footer, trabalhos com uma linha de programação muito bem elaborada.

Tipos de Template

A seguir vou deixar alguns templates do Web Designer, classificados em duas categorias, pela forma de pagamento, que são através do checkout(mais conhecido) e via E-mail(contato direto com vendedor). Essas duas tem sido algo importantíssimo no ramo que muitos blogueiros irão tratar, dependendo da necessidade de venda e comunicação com os clientes virtuais.

Checkout

Johny Magstore

Demonstração - Baixar

Modelo de revista que foi feita especialmente para a loja online. Projeto com a revista template blogger estilo com 3/5 da coluna e 2 coluna blogger templates siderbar em esquerda e direita, 4 coluna de rodapé, carrinhos de compras para e-commerce plataforma blogger, automático destaque deslizante conteúdo, 468 x 60 px anúncios prontos, paginação para blogger prontos, menus suspensos, imagem zoom, modelo design clean e muito mais. Este modelo projetado para a loja on-line só com atualizações diárias. Se tiver problemas com edição clique aqui.

Johny Blackstore

Demonstração - Baixar

Template Johny Blackstore foi feito especialmente para única loja online. Projeto com a revista template blogger estilo com 4 template blogger coluna e uma barra lateral esquerda, 3 rodapé da coluna, carrinho de compras para blogger plataforma, automático destaque deslizante conteúdo, 728 x 90 px anúncios prontos, paginação de pronto, menu dropdown blogger, imagem zoom, template design clean e muito mais. Este modelo projetado para a loja on-line só com atualizações diárias. Se tiver problemas com edição clique aqui.

E-mail

Johny Mantuab

Demonstração - Baixar

Esta é uma outra versão de Johnny Magstore modelo de loja para blogger com uma fatura e-mail. Mas você pode usar este modelo para o pagamento Paypal. Johny Muantab modelo foi feito especialmente para a loja on-line com o método de pagamento da fatura. Projeto com a revista template blogger estilo com 3/5 e 1 coluna blogger siderbar modelo na coluna da esquerda, 4 coluna de rodapé, carrinhos de compras com e-mail plataforma blogger fatura, automático destaque deslizante conteúdo, 468 x 60 px anúncios prontos, paginação para blogger pronto, suspensa menu, zoom de imagens, modelo design clean e muito mais. Este modelo projetado para a loja on-line só com atualizações diárias. Se tiver problemas com edição clique aqui. Baixar Javascript do Template

Johny Sip Deh

Demonstração - Baixar

Esta é uma nova versão do Blackstore Johny estilo com a cor escura. Nomeado Johnny Deh Sipmodelo, que foi feita especialmente para a loja on-line só factura e-mail com o método de pagamento. Projeto com a revista template blogger estilo com 4 template blogger coluna e uma barra lateral esquerda, 4 coluna de rodapé, carrinhos de compras, com notas fiscais de e-mail, slider conteúdo apresentado automático, 728 x 90 px anúncios prontos, paginação para o Blogger prontos, menus suspensos, imagem zoom, limpo modelos de design e muito mais. Este modelo projetado para a loja on-line só com atualizações diárias. Se tiver problemas com edição clique aqui. Baixar Javascript do Template

Johny Palelu Peang

Demonstração Verde - Baixar(Pay Pal) - Baixar(E-mail)
Demonstração Rosa - Baixar(Pay Pal) - Baixar(E-mail)

Este modelo disponível para duas cores, verde e rosa. E tem dois métodos de compra, com fatura Paypal e e-mail, assim como você já viu em demonstração. Nomeado Johnny Peang Palelumodelo, que foi feita especialmente para lojas on-line, mas você só pode usá-lo por qualquer conteúdo galeria, se você quiser. Projeto com a revista template blogger estilo com 4 template blogger coluna e uma barra lateral esquerda, 4 coluna de rodapé, carrinhos de compras com e-mail e Paypal fatura, slider conteúdo apresentado automático, 468 x 60 px anúncios categoria prontas, produtos de widget, paginação para blogger pronto, suspensa menu, zoom de imagens, modelo design clean e muito mais. Este modelo projetado para a loja on-line só com atualizações diárias. Se tiver problemas com edição clique aqui.

Obs: Em todos os Templates, vocês verão que no fim de cada descrição deixo uma direção para editar conforme seu desejo, entretanto algumas edições não são mencionadas, logo deixo aqui um post anterior que trata de configurações de um template diferente, não se preocupem as edições também valem para os templates que disponibilizo acima, só basta tomar cuidado com os trechos do código javascript de cada template. Se não souber mudar o seu template leia este post aqui

Nota: As descrições foram tiradas dos posts descritivos dos templates que o Johny cria, já deixando avisado qual a fonte criadora.

Conclusão

É de inteira responsabilidade que nós do Blog disponibilizamos mais uma vez, novas formas de trabalhar com o blogger, logo, retirando essa imagem que ele tem para muitos blogueiros de que sempre falta algo, mas essa história esta tendo um recomeço, pois o Johny Template tem feito algo surpreendente, mudando minha concepção de templates para blogger, trabalhos muito bem desenvolvidos, que resulta em satisfação de todas as partes e qual o preço disso? Nenhum. Aproveite. Ah também tenho outro post! Nele você aprende a colocar o PagSeguro.

E você Webmaster, já usa um dos templates? Se sim, o que achou?

Personalizar Template Blogger para Loja Virtual Online com PagSeguro (Grátis)

Criar Loja Virtual Blogger com Templates E-commerce [Checkout/Email]

Principais Categorias

Postagens populares

Categorias

Parceiros