Carrinho de compras com javascript – SimpleCart

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:

1. 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)
2. 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!