O que é

É um simples sistema de carrinho de compras feito totalmente em javascript, cookies, css e (x)html e distribuído gratuitamente sob uma licença Creative Commons Atribuição-Compartilhamento pela mesma Licença 3.0 Unported License.

Para quem

Desenvolvido principalmente para pequenos vendedores que utilizam ferramentas de blog (blogger, zip.net, etc) ou outros servidores gratuitos para vender seus produtos. O que o script objetiva é substituir o velho esquema: ‘Anote os produtos que você quer e me envie por e-mail’ por um elegante carrinho de compras que faz todo o trabalho pelo seu comprador.

Por quê?

  • Compatibilidade: Não requer banco de dados nem suporte à PHP, ASP, CGI ou qualquer outra server-side language. O que significa dizer que praticamente todas as ferramentas de blogs e hospedagens gratuitas o aceitam.
  • Simplicidade: o script inteiro não passa de 5,2kb. Além disso todo o carrinho é guardado em um único cookie, o que significa dizer que a limitação de cookies dos diferentes navegadores não afeta o script.
  • Expansibilidade: Pode ser integrado com qualquer ferramenta de pagamento (como pagSeguro, payPal e etc) ou ainda formails já que utiliza arrays de fácil manejo para armazenar os dados dos produtos.

Demonstração

Seu Carrinho

Docinho R$1,50

Morango
Uva
Banana
Bolinho R$2,75

Pêssego
Chocolate
Morango

Atualizações

22 de mai. de 2008
Instalação
em às 01:22

 

Log de Mudanças


1.2.1
- Suporte para checkbox e select-multiple. (Agradecimentos: Alex Hiroshi Fórum WMO)

1.2
- Correção do cálculo de total.
- Suporte para input radio.
- Botão para envio do pedido via e-mail.

1.1
- Cálculo de total

Bugs conhecidos


- Quando existem mais de um grupo de checkbox ou select-multiple, os valores não são atribuídos às variáveis corretas.
- Não retira o item correto do carro.


O script


O script que faz todas as operações é o que é o cookiecart.js do arquivo baixado. Copie-o e cole na seção <head></head> da página que você deseja utilizá-lo:

<script type="text/javascript">//<![CDATA[

.. SCRIPT AQUI ...

//]]>
</script>


Configurando


Procure o seguinte no topo do script e edite com os nomes dos campos do formulário que você pretende usar (na ordem em que eles aparecem no formulário):


/**************************************************************************
* Configuração
***************************************************************************/
var campos = new Array("","nome","preco"); // o primeiro campo deve ficar em branco.
var destinatario = "seu@email.com"; // e-mail para o qual devem ir os pedidos


Criando forms dos produtos


Para cada produto, utilize um formulário HTML como o seguinte:
<form name="item1">
<fieldset>
<legend>Nome do produto</legend>
<input type="hidden" value="Nome do produto" name="nome" class="hidden" />
<input type="hidden" value="10.00" name="preco" class="hidden" />
<br />
<input type="submit" class="bt" onclick="adicionaProd(this.form.name)" value="Comprar" />
</fieldset>
</form>
  • Você pode criar quantos campos quiser (Lembre-se de modificar as configurações do script sempre que adicionar um campo.)
  • Nenhum valor deve conter ','. Ex: No campo preço, digite 10.00 ao invés de 10,00.



Exibir o carrinho de compras


Para exibir o carrinho, cole o seguinte código aonde você quer que ele apareça:

<script type="text/javascript">//<![CDATA[
var carrinho_array = verCarrinho();
if (carrinho_array != 0) {
var total = ""
var cCont = ""
var email = ""

for (i=1; i < carrinho_array.length; i++){
var itemlink = carrinho_array[i].split(",")
var item = new Array(itemlink.length);
var itema = new Array();
for (x=0; x < itemlink.length; x++){
var key = campos[x];
itema[key] = itemlink[x].replace(/[**]+/g, ", ");
}
item[i] = itema;
var produto = item[i]
total = ((total * 100) + (produto["preco"] * 100)) /100

/***********************************************************************
/ Edite a forma que os itens serão exibidos
************************************************************************/
cCont += "<h2>" + produto["nome"] + "</h2>";
cCont += "Preço: R$" + moeda(produto["preco"]) + "<br />";
cCont += "<a href=\"index.htm\" onclick=\"javascript:retiraProd(itemlink)\">Retira</a><br />";

/***********************************************************************
/ Edite o que será incluído no e-mail enviado a você
************************************************************************/
email += produto["nome"] + "%0d------------------------%0dValor: R$"
+ moeda(produto["preco"]) + "%0dCobertura: " + "%0d%0d";

}
total = moeda(total);
email += "Total: " + total;

cCont += "<br /><b>Total: R$" + total + "</b><br /><a href=\"index.htm\"
onclick=\"javascript:limpaCarrinho('carrinho')\">Limpa carrinho</a><br />";
cCont += "<a href=\"javascript:emailCar(email)\">Envia pedido</a>";

} else {
cCont = "Carrinho vazio";
}

document.write(cCont);
//]]>
</script>


Variáveis:
produto["nome_campo"] - Exibe o valor do do campo postado.
Ex: produto["preco"] - Exibe o valor postado pelo campo "preco" do formulário.

A exibição dos dados no carrinho também pode ser modificada desde que você entenda um pouco de HTML.

1 comentários:

Anônimo disse... em 10 de julho de 2009 às 10:13  

Vc poderia falar como utilizar isto em conjunto com a função mail do php? E como resolver o problema de que se a pessoa colocar produtos demais os ultimos não serão visiveis? obrigado

Próximas Página inicial

Direitos reservados Cookie Cart. Um produto EB Design.