Criar Loja Online No Blogger Com JavaScript

Já pensou em criar uma loja no Blogger e disponibilizar seus própios produtos para venda? A dificuldade para isso é que o Blogger não aceita linguagens de programação dinâmica como PHP, por exemplo.

A solução é criar uma loja em JavaScript, linguagem aceita pelo Blogger. Foi isso que o 'Michael Granados' do blog DGmike fêz. Ele criou uma loja em JavaScript com carrinho de compras e integração com o Pagseguro.

A loja é de muito fácil configuração, bastando apenas colocar seu email cadastrado no PagSeguro.

Não existe painel administrativo, você acrescenta a imagem de cada produto à venda, uma descrição e o valor dentro do própio código JavaScript.

Quando o usuário acessa a página, escolhe o produto clicando em "adicionar" imediatamente ele é adcionado ao Carrinho, ao clicar no botão "Finalizar" o usuário é levado para a página do Pagseguro para fazer o pagamento.

A única dificuldade é que o código está disponível em pastas para ser instalado no servidor o que não é possível no blogger. Por isso, eu fiz algumas adaptações no código para facilitar a integração com o Blogger, veja o resultado neste blog teste.

Agora veja como você pode instalar no Blogger e criar sua loja:

São três código JavaScript e todos devem ser colocados antes de </head>.
O primeiro é "Configuracoes" onde você deve inserir seu email PagSeguro.

<script type="text/javascript">
//<![CDATA[
configuracoes = {
email : 'Insira aqui seu email Pagseguro',
moeda : 'BRL',

//tipofrete : 'EN',
frete : 2,
peso : 2,

id_menu : 'menu',
id_main : 'main',
id_carrinho : 'carrinho',

imagem : true,

//imgBotao : 'https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg',
//imgBotao : 'https://pagseguro.uol.com.br/Security/Imagens/btnConcluirBR.jpg',
imgBotao : 'https://pagseguro.uol.com.br/Security/Imagens/btnFinalizar.jpg',
//imgBotao : 'https://pagseguro.uol.com.br/Security/Imagens/btnConcluir.jpg',

inicio : 'Bebê'
}
//]]>
</script>

Logo abaixo insira este outro que é a "Loja". Aqui você vai inserir os produtos distribuidos em categórias da seguinte forma:

img : 'imagem do produto"
id : 'um número que identifica do produto'
descr : 'Nome do produto'
valor : 'preço do produto'

Veja que o código já tem alguns produtos de exemplos e que está distribuido em duas categórias "Bebê" e "Eletro-portáteis", você pode criar mais ou apagar e criar as suas, mas tem que ser exatamente como se encontra no código, uma vírgula fora do lugar e pode não funcionar.

<script type='text/javascript'>
//<![CDATA[
loja = {
'Bebê': [
{
'img' : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2LzvdX85eyb7USB8EP2ioY-flv3-6cZLfsjx5ZlK8Zn1WCUCQjyIJTmXx2qjo3ecNcQN6fcZ1MDzSjF6O7Pepicf6fAFSrcmfMjpOKZkEe0Mixq1qv7x4CvQXqahBBjbPjmpDEtI1_s/s1600/00001.jpg',
'id' : '00001',
'descr' : 'Chupeta doce',
'valor' : 3.4
},
{
'img' : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO9O9dWx_R76v1GVjIOYhOAI9ycmNXX63mUqVSdNnh78pV5XnHadPqvQCYyuS5WclTBLo75qj0GEo-Czi37YQra8qrBoFfIt4gWrdMZyLjTGfa6AsSqRktME45_PSouYePddE2h87iLxs/s400/00002.jpg',
'id' : '00002',
'descr' : 'Papinha de morango',
'valor' : 7
},
{
'img' : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO9O9dWx_R76v1GVjIOYhOAI9ycmNXX63mUqVSdNnh78pV5XnHadPqvQCYyuS5WclTBLo75qj0GEo-Czi37YQra8qrBoFfIt4gWrdMZyLjTGfa6AsSqRktME45_PSouYePddE2h87iLxs/s400/00002.jpg',
'id' : '00003',
'descr' : 'Papinha de maracujá',
'valor' : 7
},
{
'img' : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO9O9dWx_R76v1GVjIOYhOAI9ycmNXX63mUqVSdNnh78pV5XnHadPqvQCYyuS5WclTBLo75qj0GEo-Czi37YQra8qrBoFfIt4gWrdMZyLjTGfa6AsSqRktME45_PSouYePddE2h87iLxs/s400/00002.jpg',
'id' : '00004',
'descr' : 'Papinha de cereja',
'valor' : 7
},
{
'img' : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO9O9dWx_R76v1GVjIOYhOAI9ycmNXX63mUqVSdNnh78pV5XnHadPqvQCYyuS5WclTBLo75qj0GEo-Czi37YQra8qrBoFfIt4gWrdMZyLjTGfa6AsSqRktME45_PSouYePddE2h87iLxs/s400/00002.jpg',
'id' : '00005',
'descr' : 'Papinha de carne moída',
'valor' : 7.5
},
{
'img' : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO9O9dWx_R76v1GVjIOYhOAI9ycmNXX63mUqVSdNnh78pV5XnHadPqvQCYyuS5WclTBLo75qj0GEo-Czi37YQra8qrBoFfIt4gWrdMZyLjTGfa6AsSqRktME45_PSouYePddE2h87iLxs/s400/00002.jpg',
'id' : '00015',
'descr' : 'Babador elétrico',
'valor' : 17.56
}
],
'Eletro-portáteis' : [
{
'img' : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22KMg2x1-nv5lfVGfUdWh_CCcmVahXC8HsRCfrnYRD07E5zIElXkkNmhY9cE1iCuUY6zDXYft_9Z79PxR_JjehrA5k70DKaWxEDWOsdvBmhga39c8hMPu1e8rfOSTD0T3TfkFiDcub5g/s400/00015.jpg',
'id' : '00006',
'descr' : 'MP3 Cougar',
'valor' : 75.6
},
{
'img' : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcRbihax5H5fNHkX5t1s-W89OEXW7tklWT7seO7NgysgObh0m9l2sqVFGKkhrRSx89g-UY6w2DIu1iTFFNfzKnQNby9XLdseUw2_ETVAcNcSOMPpLRRhS_xgCT8gPvbTkWxrqGghC4oho/s400/00007.jpg',
'id' : '00007',
'descr' : 'Telefone sem fio Dynacon',
'valor' : 55.3
}
]
}
//]]>
</script>

Abaixo Cole o último código e mais extenso o "PagSeguro".

<script type='text/javascript'>
//<![CDATA[
PagSeguro = function (configuracoes, loja) {
  this.configuracoes = configuracoes
  this.loja = loja
  this.carrinho = {}
  this.menu(document.getElementById(this.configuracoes.id_menu))
  this.main(this.configuracoes.inicio, document.getElementById(this.configuracoes.id_main))
  setTimeout(this.atualizaCarrinho, 1)
}

PagSeguro.prototype.menu = function(elm) {
  ret='<ul>'
  for (i in this.loja)
    ret+='<li><a href="#" onclick="pgs.main(\''+i+'\', document.getElementById(pgs.configuracoes.id_main)); return false">'+i+'</a></li>'
  ret+='</ul>'
  if (elm==undefined) document.write(ret)
  else elm.innerHTML = ret
}

PagSeguro.prototype.main = function(grupo, elm) {
  var item
  var ret

  ret = '<h2>'+grupo+'</h2>'

  for (var i=0;i<this.loja[grupo].length;i++) {
    item = this.loja[grupo][i]
    ret += '<dl>'
    ret += '<dt>'+item.descr+'</dt>'
    if (this.configuracoes.imagem)
      ret += '<dd><img src="'+item.img+'" /></dd>'
    ret += '<dd class="referencia"><span>Referência:</span> '+item.id+'</dd>'
    ret += '<dd class="preco"><span>Preço:</span> '+this.moeda(item.valor)+'</dd>'
    ret += '<dd class="link"><a href="#" onclick="pgs.adicionar(\''+grupo+'\', \''+item.id+'\');pgs.atualizaCarrinho();return false">adicionar</a></dd>'
    ret += '</dl>'
  }

  elm.innerHTML = ret
}

PagSeguro.prototype.adicionar = function(grupo, id) {
  for (i in this.loja[grupo])
    if (this.loja[grupo][i].id == id)
      var item = this.loja[grupo][i]
  if (item==undefined) return

  for (i in this.carrinho) {
    if (String(i)==String(item.id)) {
      this.carrinho[i].quant++
      return
    }
  }
  this.carrinho[item.id] = {
    'img'   : item.img,
    'id'    : item.id,
    'descr' : item.descr,
    'valor' : item.valor,
    'quant' : 1
  }
  if (item.peso)
    this.carrinho[item.id].peso = item.peso
  if (item.frete)
    this.carrinho[item.id].frete = item.frete
}

PagSeguro.prototype.remover = function(id) {
  for (i in this.carrinho) {
    if (String(i)==String(id)) {
      this.carrinho[i].quant--
      if (this.carrinho[i].quant==0)
        delete this.carrinho[i]
    }
  }
}

PagSeguro.prototype.atualizaCarrinho = function() {
  var x=total=0
  var tabela = '<table CELLSPACING=20><thead><th>Quantidade</th><th>Descrição</th><th>Valor Unitário</th><th>Valor Final</th></tr></thead><tbody>'
  var ret = '<form action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="POST" target="pagseguro">\n'
  ret += '<input type="hidden" name="email_cobranca" value="'+this.configuracoes.email+'" />'
  ret += '<input type="hidden" name="moeda" value="'+this.configuracoes.moeda+'" />'
  ret += '<input type="hidden" name="tipo" value="CP" />'
  ret += '<input type="hidden" name="encoding" value="utf-8" />'

  if (this.configuracoes.peso)
    ret += '<input type="hidden" name="item_peso_1" value="'+pgs.valor(this.configuracoes.peso)+'" />'

  if (this.configuracoes.frete)
    ret += '<input type="hidden" name="item_frete_1" value="'+pgs.valor(this.configuracoes.frete)+'" />'

  if (this.configuracoes.tipofrete)
    ret += '<input type="hidden" name="item_tipo_frete" value="'+this.configuracoes.tipofrete+'" />'

  for (i in this.carrinho) {
    if (this.carrinho[i]==undefined || this.carrinho[i].descr==undefined) continue
    x++
    ret += '<input type="hidden" name="item_img_'+x+'" value="'+this.carrinho[i].img+'"  />\n'
    ret += '<input type="hidden" name="item_id_'+x+'" value="'+this.carrinho[i].id+'"  />\n'
    ret += '<input type="hidden" name="item_descr_'+x+'" value="'+this.carrinho[i].descr+'"  />\n'
    ret += '<input type="hidden" name="item_valor_'+x+'" value="'+pgs.valor(this.carrinho[i].valor)+'"  />\n'
    ret += '<input type="hidden" name="item_quant_'+x+'" value="'+this.carrinho[i].quant+'"  />\n'

    if (this.carrinho[i].peso && !this.configuracoes.peso)
      ret += '<input type="hidden" name="item_peso_'+x+'" value="'+pgs.valor(this.carrinho[i].peso)+'"  />\n'

    if (this.carrinho[i].frete && !this.configuracoes.frete)
      ret += '<input type="hidden" name="item_frete_'+x+'" value="'+pgs.valor(this.carrinho[i].frete)+'"  />\n'

    tabela += '<tr><td>'+this.carrinho[i].quant+'</td><td>'+this.carrinho[i].descr+'</td><td>'+this.moeda(this.carrinho[i].valor)+'</td><td>'+this.moeda(this.carrinho[i].quant*this.carrinho[i].valor)+'</td><td><a href="#" onclick="pgs.remover(\''+this.carrinho[i].id+'\');pgs.atualizaCarrinho(); return false">remover</a></td></tr>'
    total+=this.carrinho[i].quant*this.carrinho[i].valor
  }
  tabela+='</tbody><tfoot><tr><th colspan="3">Total</th><th colspan="2">'+pgs.moeda(total)+'</th></tr></tfoot></table>'
  ret += '<input type="image" src="'+this.configuracoes.imgBotao+'" name="submit" alt="Pague com PagSeguro - É rápido, grátis e seguro!" />\n'
  ret += '</form>'
  document.getElementById(this.configuracoes.id_carrinho).innerHTML = tabela+ret
}

PagSeguro.prototype.moeda = function(valor) {
  return 'R$ ' + Number(valor).toFixed(2).replace(/[^\d]/, ',')
}

PagSeguro.prototype.valor = function(valor) {
  return Number(valor).toFixed(2).replace(/[^\d]/, '')
}

window.onload=function() {
  pgs=new PagSeguro(configuracoes, loja)
}
//]]>
</script>

Para poder editar as cores da aloja e acertar alguma coisa que fique fora do lugar, acrescente o CSS abaixo, acima de ]]></b:skin>

* {
margin:0;
padding:0;
}
#main {
width: 100%;
margin-left:1%;
font-family: "Trebuchet MS", Verdana, Sans-Serif;
}
#main h2 {
margin: 10px 0;
font-size: 1.5em;
border-bottom: 1px solid #393;
}
#main dl {
font-size: 98%;
float:left;
margin: 5px;
width: 190px;
height: 100px;
}
#main dl dt {
font-size: 15px;
margin: 5px 0;
font-weight: 600;
}
#main dl img {
float:left;
margin-right: 3px;
width: 50px;
height: 50px;
}
#carrinho {
margin-left: 5px;
font-size: 10px;
width: 100%;
}

Agora vamos indicar onde cada elemento vai aparecer.
No painel do blogger vá para "Layout" clique em "Adicionar um Gadget" escolha "HTML/JavaScript" e cole <div id='menu'></div> para adicionar o menu com as categórias, salve. Você pode deixalo-com menu superior ou colocar na sidebar.

Para adicionar o carrinho repita o mesmo processo só que desta vêz cole <div id='carrinho'></div>, clique em salvar e sua loja está pronta.

Para mais informações sobre o código acesse o blog do autor em DGmike.