Fazia tempo que eu e a Bia planejávamos a Loja do Eu Compraria!, mas ficava apenas na idéia. Este ano começamos a nos mexer parar fazer a idéia virar projeto, e o TCC dela deu um empurrão para definição de prazo.
Um prazo curtíssimo, o desenvolvimento do back-end e a integração com front-end e PagSeguro foi feito em 4 dias (e suas devidas madrugadas) – e os bugs e funcionalidades foram sendo implementados posteriormente.
Para atender este prazo eu precisava de algumas ferramentas boas e fáceis de implementar:
- PagSeguro (fácil de implementar e seguro – ponto negativo é o atendimento, taxas e a impossibilidade de algumas alterações cadastrais básicas, como endereço de e-mail)
- SimpleCart – o motivo deste post, um carrinho de compras completo em javascript, gratuito e extremamente fácil de entender o código.
Feita esta introdução, vamos ao SimpleCart (trato do PagSeguro nos próximos posts sobre a ferramenta).
SimpleCart – Carrinho e compras em javascript
Uma ferramenta totalmente em javascript, gratuita e facilmente customizável (o código é bem fácil de entender) que permite o desenvolvimento fácil de um carrinho de compras.
Features:
- Persistência das informações do carrinho (cookies)
- Cálculo de frete (por item, por compra ou customizado)
- Cálculo de taxas
- Controle de quantidade de itens no carrinho
- Soma do valor total (produtos, taxa e frete)
Configurando o SimpleCart
O primeiro passo é fazer o download do SimpleCart e adicionar o javascript necessário nas páginas que utilizarão o carrinho.
A ferramenta conta com algumas formas de check-out pré configuradas: Google Checkout, Paypal ou e-mail. Porém existe o checkout "custom", que permite que você desenvolva sua própria função para checkout.
O paypal é a função padrão (e a que vou exemplificar neste post), para isso precisamos apenas configurar nosso e-mail (o mesmo da conta no paypal) no SimpleCart.
Setando o e-mail que será usado:
<script type="text/javascript">
simpleCart.email = "[email protected]";
</script>
Na variável cartHeaders você configura quais informações dos produtos serão exibidas quando este produto estiver dentro do carrinho:
simpleCart.cartHeaders = ["Name_noHeader", "Thumb_image_noHeader", "Description_noHeader", "increment_noHeader", "decrement_noHeader", "remove_noHeader", "Quantity_div_noHeader", "Price_noHeader", "Total_noHeader"];
Adicionando "_noHeader" ao final do elemento que será exibido você diz que aquele elemento não terá um "cabeçalho" no seu carrinho, no exemplo acima o carrinho não usa cabeçalho nenhum, portanto exibirá apenas as informações dos produtos adicionados ao carrinho.
Dica: os html de cada produto será montado na ordem que está confirguado por esta variável, então pense como será seu CSS para estipular a ordem correta dos elementos html do seu carrinho.
Html dos itens que podem ser adicionados ao carrinho
Antes de mostrar o código vamos entender o funcionamento do carrinho que você está criando. Todo o elemento (normalmente uma div) com a classe "simpleCart_shelfItem" é um produto da sua loja que pode ser adicionado ao carrinho.
Dentro dele você utiliza a classe (class) para definir o nome daquela variável do produto: preço, id, nome, descrição e qualquer outra coisa que você queira, nomeando a classe da seguinte forma: item_NomeVariavel.
Abaixo o exemplo do html de um produto, a nomenclatura das classes é auto-explicativa:
<div class="simpleCart_shelfItem">
<h2 class="item_name">Awesome T-Shirt</h2>
<span class="item_price">$35.95</span>
<input class="item_quantity" value="1" type="text">
<a href="javascript:;" class="item_add">Add to Cart</a>
</div>
Dica: você pode adicionar as classes em qualquer elemento, inclusive imagens (neste caso o valor será o src da img). As informações dentro de alguma variável "item_var" podem ser recuperadas no seu script, use a criatividade 🙂
No local onde seu carrinho irão aparecer os produtos adicionados no carrinho você precisa do seguinte HTML:
<div class="simpleCart_items"></div>
Dentro da div acima será exibido cada produto do seu carrinho, conforme os dados informados na configuração "simpleCart.cartHeaders" e seguindo a ordem deles.
Algumas informações que podem ser exibidas, abaixo o nome da classe e a informação que ela representa:
- simpleCart_quantity – Quantidade de itens no carrinho
- simpleCart_total – Valor total do carrinho
- simpleCart_finalTotal – Final total do seu carrinho
- simpleCart_shippingCost – Valor do frete
Dica: qualquer variável do carrinho pode ser exibida usando este modelo – e você pode inserir novas variáveis caso necessite.
Pronto, com a implementação feita até aqui você consegue adicionar e remover produtos, e exibir informações de cálculo de preço e frete no seu carrinho!
Ações do carrinho
Agora você precisa adcionar o link para checkout, para isso também usaremos a classe:
<a href="javascript:;" class="simpleCart_checkout">Checkout</a>
E um link para limpar todos os itens do seu carrinho:
<a href="javascript:;" class="simpleCart_empty">Empty</a>
Com isso seu carrinho estará funcionando – no exemplo deste post com o checkout do Paypal (padrão).
Você pode ver o demo aqui e conferir ele funcionando com algumas implementações a mais no Eu Compraria! Shop.
Em breve eu faço mais posts exemplificando como customizar o checkout, integrar o carrinho com ferramentas de cálculo de frete ou pagamento.
Se tiver dúvidas, críticas ou sugestões utilize os comentários!
