Apresentação do modelo gratuito de carrinho de compras para plataforma Blogger
Temos o orgulho de lançar o Carrinho de Compras, o primeiro modelo gratuito de e-commerce/loja virtual para Blogger com a função "Adicionar ao Carrinho" e pagamento via PayPal. Muitos acreditavam que o Blogger não poderia ser transformado em uma loja virtual, pois é visto como uma plataforma para iniciantes, sem os recursos típicos de um CMS. Com este modelo, mostramos que isso é possível.
Embora existam muitos modelos para sites de acessórios, somos os primeiros a lançar um modelo totalmente funcional para vender produtos utilizando a plataforma Blogger.
Agradecimento ao script SimpleCart e demonstração do modelo em funcionamento
Agradecemos aos criadores do script SimpleCart, que alimenta todas as funções do carrinho neste modelo.
Veja abaixo uma captura de tela do blog com o modelo de carrinho de compras, criada para fins de demonstração:
Por que o Blogger não possui campos personalizados e como contornamos isso
Plataformas como WordPress oferecem "Campos Personalizados" para adicionar descrições, preços e miniaturas sem a necessidade de inserir códigos HTML manualmente. O Blogger não dispõe desse recurso. Por isso, no Bloggermint.com, desenvolvemos um método simples para publicação de itens usando tabelas, que facilitam o processo.
Abaixo, você pode ver como a tabela aparece no editor de posts do Blogger:
Como configurar e utilizar o modelo de carrinho de compras passo a passo para seu blog
Utilizando o recurso "Modelo de Post" do Blogger, você pode pré-formatar o editor de posts com o texto ou código que desejar, que aparecerá sempre que criar um novo post.
Passos para começar:
- Baixe o modelo de Carrinho de Compras para Blogger e faça o upload no seu blog.
- Acesse Configurações > Formatação e defina o número desejado de posts a serem exibidos.
- Role até a opção "Modelo de Postagem", cole o código da tabela abaixo no campo de texto e salve.
<table border="1" style="width:660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%">
<a href="http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s1600/blue.gif" onblur="try { parent.deselectBloggerImageGracefully();} catch (e) {}">
<img alt="@CanalQb" border="0" id="ID_DA_FOTO_DO_BLOGGER" src="http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s400/blue.gif" style="cursor:pointer; display:block; height:164px; margin:0 auto 10px; width:148px;" />
</a>
</th>
<td><input class="item_add" type="button" value="Adicionar ao carrinho" /></td>
</tr>
<tr>
<th><b>Nome do item</b></th>
<td class="item_name">Nome do produto vai aqui!</td>
</tr>
<tr>
<th><b>Preço</b></th>
<td class="item_price">R$ 99,99</td>
</tr>
<tr>
<th><b>Descrição</b></th>
<td class="item_Description">A descrição do seu produto aqui!</td>
</tr>
<tr>
<th><b>Estoque disponível</b></th>
<td>Contagem de estoque aqui!</td>
</tr>
<tr>
<th><b>Diversos</b></th>
<td>Coloque miniaturas/imagens extras do produto aqui</td>
</tr>
</tbody>
</table>
Confira a imagem abaixo mostrando o modelo de postagem com o código da tabela já inserido:
Como publicar seu produto usando a tabela no editor do Blogger
Para adicionar um novo produto:
- Acesse Publicação > Nova Publicação no Blogger.
- Você verá a tabela no editor de texto. Remova a imagem padrão clicando nela e escolhendo "Remover".
- Carregue a imagem do seu produto na célula da tabela usando o botão de upload do editor (prefira imagens de tamanho médio).
- Substitua o texto padrão nos campos Nome do Item, Preço e Descrição pelas informações do seu produto. O Nome do Item deve ser único para o funcionamento correto do script SimpleCart.
- Para garantir o código limpo, clique no modo HTML e remova quaisquer tags <div> ou códigos extras envolvendo a imagem, deixando apenas a tag <img />.
- Volte ao modo "Redigir", revise as informações e clique em "Publicar".
Configurando o e-mail de pagamento PayPal no seu modelo Blogger
Para ativar o checkout via PayPal, acesse Design > Editar HTML no Blogger e procure por simpleCart.email usando CTRL+F.
Você encontrará um trecho de código semelhante a este:
<script type='text/javascript'> simpleCart.email = "bloggermint@gmail.com"; simpleCart.checkoutTo = PayPal; simpleCart.cartHeaders = ["thumb_image", "Quantity_input", "Total", "remover"]; </script>
Substitua o e-mail padrão pelo seu e salve o modelo para que os pagamentos sejam direcionados corretamente.
Veja abaixo um exemplo da janela pop-up do PayPal exibida no momento da finalização da compra:
Informações importantes sobre a versão PRO e suporte ao modelo gratuito
Planejamos lançar uma versão PRO paga com recursos avançados e aparência profissional. Por favor, mantenha os links de crédito no rodapé intactos. Para removê-los, há uma taxa específica. Para solicitações de personalização, entre em contato diretamente.
Para conferir outros modelos atualizados, visite o site Blogger Templates Hub.
Alternativa para quem não possui PayPal ou cartão de crédito: envio de pedido por e-mail
Para usuários que não possuem PayPal ou cartão de crédito, é possível substituir o botão "Adicionar ao carrinho" por um link de contato via e-mail.
Substitua este código:
<input class="item_add" type="button" value="Adicionar ao carrinho" />
Por este link de e-mail (modifique o endereço e o assunto conforme seu produto):
<a href="mailto:seuemail@exemplo.com?subject=Pedido%20de%20produto:%20Nome_do_Produto" target="_blank">Enviar pedido por e-mail</a>
Agradecemos a leitora Vivija (Ble) de Skopje, Macedônia, pela sugestão.
Conclusão e convite para interagir com o conteúdo
Gostou do modelo? Tem dúvidas ou sugestões? Deixe seu comentário abaixo e participe da comunidade para aprimorar sua loja no Blogger.
Recomendações importantes para vendas e investimentos
Para quem deseja iniciar vendas ou investimentos utilizando este modelo, lembre-se sempre de analisar cuidadosamente seus produtos, fornecedores e condições antes de investir. A responsabilidade pelas decisões financeiras é pessoal.
Recomendamos o uso de wallets seguras para transações digitais e sugerimos moedas alternativas confiáveis para pagamentos digitais, como Bitcoin (BTC) ou Ethereum (ETH), dependendo do seu perfil de negócio.
Link download: https://app.box.com/s/9t2zhcycgk
Fonte: http://www.bloggermint.com/2011/05/shopping-cart-blogger-template/