Loja virtual em 5 minutos com WordPress e PagSeguro

  • Publicado em: 15/04/2011
  • Revisado em: 12/03/2014
  • Categoria(s)Wordpress
  • Autor: Ricardo Bernardi
  • Newsletter: Inscreva-se

No post de hoje vou mostar para vocês como implementar um sistema de compras simples usando um blog em WordPress juntamente com o método de pagamentos online Pagseguro. Para início de conversa nem preciso dizer que você já deve ter seu blog configurado e ter um cadastro no Pagseguro para iniciar este tutorial.

Este tutorial serve apenas para uma loja simples, com poucos produtos e que não exige muitos detalhes, tais como cupons de desconto, cadastro completo de clientes entre outros. É ideal para blogueiros que queiram vender alguns produtos para seus leitores, usando o próprio blog como loja.

Mas chega de conversa, vamos ao que interessa, o conteúdo:

Primeiramente abra o arquivo functions.php de seu tema e adicione as duas funções a seguir.

//Botao de compra do pagseguro
add_shortcode('pagseguro', 'gera_pagseguro');
function gera_pagseguro( $atts, $content = null ) {
    extract(shortcode_atts(array(
        'id' => get_the_ID(),
	'prod' => removeacentos(get_the_title()),
	'valor' => '0,00',
    ), $atts ) );
    $resultado = '<form target="pagseguro" method="post"';
    $resultado .= 'action="https://pagseguro.uol.com.br/checkout/checkout.jhtml">';
    $resultado .= '<input type="hidden" name="email_cobranca" value="emaildecobranca@seusite.com" />';
    $resultado .= '<input type="hidden" name="tipo" value="CBR" />';
    $resultado .= '<input type="hidden" name="moeda" value="BRL" />';
    $resultado .= '<input type="hidden" name="item_id" value="'.esc_attr($id).'" />';
    $resultado .= '<input type="hidden" name="item_descr" value="'.esc_attr($prod).'" />';
    $resultado .= '<input type="hidden" name="item_quant" value="1" />';
    $resultado .= '<input type="hidden" name="item_valor" value="'.str_replace(",", "", esc_attr($valor)).'" />';
    $resultado .= '<input type="hidden" name="frete" value="0" />';
    $resultado .= '<input type="hidden" name="peso" value="0" />';
    $resultado .= '<input type="image" name="submit" src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/205x30-comprar.gif" alt="Pague com PagSeguro -  rpido, grtis e seguro!" /></li></ul>';
    $resultado .= '</form>';

    return $resultado;
}

//remover os acentos de uma string
function removeacentos($str, $enc = "UTF-8"){
    $acentos = array(
        'A' => '/&Agrave;|&Aacute;|&Acirc;|&Atilde;|&Auml;|&Aring;/',
        'a' => '/&agrave;|&aacute;|&acirc;|&atilde;|&auml;|&aring;/',
        'C' => '/&Ccedil;/',
        'c' => '/&ccedil;/',
        'E' => '/&Egrave;|&Eacute;|&Ecirc;|&Euml;/',
        'e' => '/&egrave;|&eacute;|&ecirc;|&euml;/',
        'I' => '/&Igrave;|&Iacute;|&Icirc;|&Iuml;/',
        'i' => '/&igrave;|&iacute;|&icirc;|&iuml;/',
        'N' => '/&Ntilde;/',
        'n' => '/&ntilde;/',
        'O' => '/&Ograve;|&Oacute;|&Ocirc;|&Otilde;|&Ouml;/',
        'o' => '/&ograve;|&oacute;|&ocirc;|&otilde;|&ouml;/',
        'U' => '/&Ugrave;|&Uacute;|&Ucirc;|&Uuml;/',
        'u' => '/&ugrave;|&uacute;|&ucirc;|&uuml;/',
        'Y' => '/&Yacute;/',
        'y' => '/&yacute;|&yuml;/',
        'a.' => '/&ordf;/',
        'o.' => '/&ordm;/');
    return preg_replace($acentos, array_keys($acentos), htmlentities($str,ENT_NOQUOTES, $enc));
}

Agora troque o emaildecobranca@seusite.com para o seu email cadastrado no Pagseguro. Se quiser mudar a imagem do botão de compra, basta criar seu próprio botão e alterar a propriedade SRC na linha 20 colocando a URL de sua imagem.

A função removeacentos serve para tirar caracteres acentuados do título do post na hora de usá-lo como descrição para o produto, já a função pagseguro gera um shortcode e para usá-lo, basta colocar da seguinte maneira dentro de sua postagem (logicamente, alterando o valor para o valor de seu prodtuo:

[pagseguro valor="15,90"]

O código do produto será o ID do post e o nome/descrição do produto será o título do post, caso queira alterar estes parâmetros, altere-os na função encarregada de gerar o botão do Pagseguro.

Agora nossa loja já está quase pronta, falta só colocar um botão para ver o carrinho de compras do cliente. Este botão pode ser colocado na sidebar por exemplo ou em outro local que você ache mais adequado. Escolha o local onde irá colocar o botão Ver Carrinho e adicione o seguinte código no lugar:

//botao para ver o carrinho de compras
<form target="pagseguro" action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="post">
<input type="hidden" name="email_cobranca" value="emaildecobranca@seusite.com" />
<input type="hidden" name="tipo" value="VER" />
<input type="image" src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/205x30-carrinho-laranja.gif" name="submit" alt="Visualizar carrinho de compras" />
</form>

Agora basta fazer as devidas formatações para deixar de acordo com seu gosto, ou adaptar as funções conforme sua necessidade. Simples não acha? Então não tem mais desculpa para não vender seus produtos em seu blog.

Não esqueça de salvar os códigos das funções apresentadas aqui, pois outro dia você pode precisar das mesmas para outro projeto.

Gostou deste artigo? Tem alguma dica? Tem dúvidas? Participe, comente, estamos aguardando sua opinião.

Compartilhe esse post:
Conteúdo relacionado

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 37 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • riteclif comentou em

    Olá, Ricardo gostaria de uma indicação, sei que no post é sobre uma loja simples, mas
    quero uma dica ou até mesmo um site no qual possa criar uma loja virtual segura e profissional, com um design
    elegante para comercio de eletrônicos.

    Responder
  • Milton Salles comentou em

    Bom dia, Ricardo Bernardi...
    Estou aproveitando o carnaval para brincar com alguns projetos próprios, e acabei caindo aqui!
    Estou desenvolvendo um portal de conteudo, onde uma única categoria será uma loja virtual simples, na verdade, bem simples, pois minha esposa venderá somente os artesanatos dela!
    E seu plugin/script supri muito bem as necessidades, a não ser pelo fator que não que é possível calcular o frete!
    Procurei em outras postagens suas, se havia criado algo com o frete, afinal, eu estou ressuscitando este post =/

    Então, vc imagina uma forma de calcular o frete utilizando seu plugin?

    Tentarei desenvolver algo aqui, se conseguir de forma usual, passo aqui e deixo o script, para que possa ajudar outras pessoas, afinal, acredito que a utilização desta sua postagem seja grande!

    E se por um acaso divino, vc tiver alguma idéia de como fazer (não precisa nem ser o script, o caminho que tenho que seguir mesmo), por favor me de um feedback ?

    Muito obrigado novamente, e peço imensas desculpas por reviver um tópico tão antigo, mas saiba, que mesmo com a atualização dos plugins do pagseguro, eles não conseguiram colocar tanta qualidade quanto você... Afinal, ainda dependem que a gente defina pontos em vez de virgula, e pedem para que digitemos o titulo e colocam um input type text...

    Bom, estou estendendo demais, muito obrigado novamente, e parabéns pelo trampo man, espero um dia chegar no seu nível!

    Responder
  • Tiago comentou em

    Boa tarde amigo, estou tentando inserir o código do botão [pagseguro valor="22,90"], mas não aparece, simplismente ele fica a a mesma escrita.

    Responder
  • Allan comentou em

    cara, estou tentando incluir o [pagseguro valor="15,90"] porem, ele não gera o botão... acha que pode ser problema aonde?

    Responder
  • raffaelli comentou em

    Caro Ricardo
    Tentei fazer mas não funcionou
    Coloquei no post [pagseguro valor="22,90"]
    e o botão na sidebar.

    Mas quando chama o pagseguro passa sem as informações e sem preço.
    E quando clico no botão no post [pagseguro valor="22,90"] dá o seguinte erro: Erro 100 - Informações do vendedor/loja inconsistentes.

    Onde estou errando?
    Abs
    Flavio

    Responder
  • Rodrigo comentou em

    Olá Ricardo.
    Estava pesquisando sobre WordPress+PagSeguro e caí aqui nesse artigo.
    A situação é que tenho já há algum tempo 1 loja virtual integrada ao PagSeguro, porém é um sistema pronto.
    Agora surgiram possibilidades de algumas parcerias, inclusive para vender produtos e eu gostaria de fazer via WordPress. Algo mais simples.
    O problema é que não manjo nada dessa parte de programação. Será que eu conseguiria implementar esse método acima citado em meu futuro blog ou seria melhor instalar o plug-in completo que agora o PagSeguro disponibiliza para o WordPress?

    Muito obrigado
    Abraço

    Responder
    • Ricardo Bernardi comentou em

      Isso é você quem deve decidir Rodrigo, se sentir segurança em implementar e criar suas próprias rotinas as funções estão aí, caso contrário opte por uma solução pronta para uso.

      Responder
  • Claudenor José comentou em

    Olá Ricardo,

    Você tem projeto de gravar aulas sobre lojas virtuais, falo sobre um curso completo uma coisa mais avançado.

    Abraço.

    Responder
    • Ricardo Bernardi comentou em

      Na pasta do tema que você usa em seu blog, creio que isso não se aplica para blogs gratuitos do wordpress.com, somente para blogs com domínio e hospedagem próprios.

      Responder
  • Paulo José comentou em

    Bem interessante esse post, pena que uso o blogger e não tem como testar. Será que tem como colocar PagSeguro no meu blog do blogger?

    Responder
    • Ricardo Bernardi comentou em

      Olá Paulo, não conheço praticamente nada sobre Blogger, teria que pesquisar sobre uma forma de adaptar as funções para o mesmo, ou achar algum plugin que faça o mesmo trabalho.

      Responder
  • Wagner comentou em

    Olá Ricardo

    Tentei o código mas est´me retornando esse erro
    Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/webluzne/public_html/loja/wp-content/themes/twentyten/functions.php on line 527

    Responder
    • Ricardo Bernardi comentou em

      Tente copiar novamente o código e testar agora, havia um erro no código devido à um plugin estar intervindo na exibição do código fonte na tela. Copie novamente e faça o teste.

      Responder
    • Ricardo Bernardi comentou em

      Acabei de verificar o código e funcionou... que erro deu pra você? Talvez o WP tenha gerado tags HTML dentro do código na hora de exibir na tela (as vezes acontece com o SyntaxHilighter)

      Responder
  • Mauro comentou em

    Boa tarde Ricardo, já nos falamos anteriormente onde pedi sua permissão para disponibilisar suas vídeo aulas wordpress, apesar dos meus 54 aninhos acrito não ser tarde para aprender, preciso esclarecer duas dúvidas e pedir mais uma vêz sua permissão para colocar sua logo como parceiro em meu blog que estou estruturando, quando a dúvida como foi que você colocou no menu de hospedagem para abrir em uma nova janela, a outra dúvida seria sobre loja virtual no meu function qual seria a posição correta para adicionar botão compra (antes do fechamento da tag ?>) conforme descrito, desde já agradeço, e fico no aguardo de sua posição.
    Estou usando o tema twentyten.

    Responder
    • Ricardo Bernardi comentou em

      Olá Mauro, bom ver você por aqui!

      1 - sobre os menus abrindo em nova janela: eu fiz meu menu diretamente no código da página, sendo assim bastou adicionar um "target=_blank" para que isso ocorra.
      2 - sobre a função do botão de compra: deve estar antes de terminar o arquivo functions.php, no caso antes do fechamento do ?> (no post eu explico isso...)
      3 - sobre usar meu logo para divulgação: toda divulgação é bem vinda, agradeço por nos ajudar a divulgar o blog.

      Forte abraço e até mais.

      Responder
  • Carlos Aguiar comentou em

    Grande dica Ricardo, seria mais interessante ai uma video aula, ja penssou? hehe parabens pela dica!.

    Responder
    • Ricardo Bernardi comentou em

      Se eu tivesse feito uma aula todos iriam ficar pedindo o código fonte para copiar, pois ninguém quer assistir e fazer, querem tudo pronto, então resolvi fazer tuto para ficar logo o código disponível. Obrigado pelo comentário.

      Responder
  • Matheus Felipe comentou em

    Vlw ae Ricardo, esse tutorial foi muito bom, tenho uma dica de v.a ou um tutorial relacionado a e-commerce o virtuemart do Joomla ele e muito ultilizado em pequenas lojas tbm....

    Responder
    • Ricardo Bernardi comentou em

      Olá Matheus, obrigado pela sugestão e pelo comentário, mas infelizmente não trabalho com Joomla, ficarei te devendo esta.

      Alguém se habilita a gravar uma aula ou fazer um tuto sobre isso para postar aqui?

      Responder
  • Valdir Coxev comentou em

    mais um post muito otimo, sem falar do conteudo apresentado, aguardando novos post como esse de muita qualidade e por isso que sigo este site sempre atualizado como novas novidades

    Responder

Deixe seu comentário

Pesquisar no site
Central do assinante

Esqueceu sua senha?

Hospedagem de sites

© 2008-2023 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host

É proibida a reprodução total ou parcial de qualquer conteúdo deste site.