Criando um carrinho de compras com javascript

Para implementar o carrinho de compras, usaremos como base o framework Prototype (http://www.prototypejs.org/) e script.aculo.us (http://script.aculo.us/).

Elementos :

https://i2.wp.com/aspx.xmasters.com.br/carrinho/img/1.JPG

Classe Produto:
https://i0.wp.com/aspx.xmasters.com.br/carrinho/img/2.JPG

Classe Carrinho:
https://i0.wp.com/aspx.xmasters.com.br/carrinho/img/3.1.JPG
https://i2.wp.com/aspx.xmasters.com.br/carrinho/img/3.2.JPG
https://i0.wp.com/aspx.xmasters.com.br/carrinho/img/3.3.JPG
https://i1.wp.com/aspx.xmasters.com.br/carrinho/img/3.4.JPG

Instanciando o Carrinho e os Produtos:
https://i0.wp.com/aspx.xmasters.com.br/carrinho/img/4.JPG

Segue o endereço do fonte e demo:

http://aspx.xmasters.com.br/carrinho/Carrinho.html

http://aspx.xmasters.com.br/carrinho/Carrinho.rar

Anúncios

Systems Analyst / .Net Developer

Marcado com: , , , , , ,
Publicado em Coisas legais...
7 comentários em “Criando um carrinho de compras com javascript
  1. Alisson Paiva disse:

    Belo artigo!
    Parabens.

  2. junior disse:

    Opa blz amigo eu gostei do seu exemplo de carrinho de compras, mas só não sei onde fica o carrinho ai que ainda não vi e nem como adicionar os produtos nele, bom se vc puder me explicar ficarei muito grato.

    • Francke Peixoto disse:

      vamos lá!

      coloquei como carrinho o retangulo com borda verde limão, que na verdade é um div com o id = “carrinho”

      essa atribuição foi definida na seguinte chamada:

      carrinho.Iniciar({
      Carrinho : “carrinho”,
      ConteudoLoja : “loja”,
      CssItem : “item”,
      CssItemPego : “itempego”,
      IdTagPedidos : “pedidos”,
      IdTagTotal : “total”,
      Acao : “A”
      });

      dê uma olhada no fonte, verá que antes de criar uma instancia de carrinho, eu crio uma lista de produtos…

  3. Francke Peixoto disse:

    vamos lá! 😉

    coloquei como carrinho o retangulo com borda verde limão, que na verdade é um div com o id = “carrinho”

    essa atribuição foi definida na seguinte chamada:

    carrinho.Iniciar({
    Carrinho : “carrinho”,
    ConteudoLoja : “loja”,
    CssItem : “item”,
    CssItemPego : “itempego”,
    IdTagPedidos : “pedidos”,
    IdTagTotal : “total”,
    Acao : “A”
    });

    dê uma olhada no fonte, verá que antes de criar uma instancia de carrinho, eu crio uma lista de produtos…

  4. Raphaell disse:

    Meirmão …. tu tá de parabéns….que script porrada esse ae.

  5. luck disse:

    favorito concerteza otimo script me deixou impressionado

  6. Leandro disse:

    Cara gostei bastante, vc poderia me dizer como eu pego todos os dados do carinho de compra para enviar para o bancado de dados via php? vlw

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: