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://i0.wp.com/aspx.xmasters.com.br/carrinho/img/3.2.JPG
https://i2.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

7 comentários sobre “Criando um carrinho de compras com javascript

  1. 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…

  2. 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…

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

w

Conectando a %s