PUBLICIDADE

Autor

francke

Francke Peixoto

membro deste setembro de 2007

Compartilhe e guarde

  • Rec6
  • StumbleUpon
  • ueba
  • linkk
  • dihitt
  • linkloko
  • linkto
  • Technorati
  • Simpy
  • del.icio.us
  • Faves: Fave It!

PUBLICIDADE

Enquete

Com que frequência você acessa o CódigoFonte.com.br?

Criando um carrinho de compras baseado em Prototype e Scriptaculous


Com este código é possível criar um carrinho de compras completos utilizando os Frameworks Prototype e Scriptaculous.

Fácil de usar e de implementar.
Baixe o arquivo "Carrinho.rar" para obter o código completo.
<script type="text/javascript">
	/*
		AUTOR: Francke Peixoto
		DATA:  20/07/2009
		CARRINHO:  http://aspx.xmasters.com.br/carrinho/Carrinho.html
		BLOG :  franckepeixoto.wordpress.com
	
	*/
	var Carrinho = new Class.create();
	/*CLASSE DE PRODUTOS */
	var Produto = new Class.create();
	Produto.prototype  = {
			initialize: function()
			{
				this.Id 		= (arguments.length > 0) ? arguments[0].Id  	  : 0;
				this.Url	 	= (arguments.length > 0) ? arguments[0].Url		  : "";
				this.Valor 		= (arguments.length > 0) ? arguments[0].Valor	  : 0;
				this.Nome  		= (arguments.length > 0) ? arguments[0].Nome	  : "";
				this.Descricao 	= (arguments.length > 0) ? arguments[0].Descricao : "";
			}
	};
	Carrinho.prototype = {
			
			initialize: function()
			{
				this.Produtos = new Object();
				this.Produtos.items = [ ];
				this.MeusProdutos = new Object();
				this.MeusProdutos.items = [ ];
				this.ARGS_CONTABLIZAR = null;
				this.TOTAL = 0.00;
				$this = this;
			},
			Produto: {
						Add : function(item)
						{
							$this.Produtos.items.push(item);
						}
			},			
			Contablizar: function(arg)
			{
				var $Produtos = $this.Produtos;
				
				$this.Produtos.items._each(function(produto)
				{
					var item = "item_" + produto.Id;
					if(item == arg.Item)
					{
						if(arg.Acao == "A")
						$this.Adicionar(produto);
						else
						$this.Remover(produto);
					}
				});
				$this.ExibirMeusProdutos(arg);
			},
			Adicionar: function(arg)
			{
				var jahTem = false;
				for(var i = 0; i < $this.MeusProdutos.items.length;i++)
				{
					var item = $this.MeusProdutos.items[i].Id;
					if(item == arg.Id)
					{
						$this.MeusProdutos.items[i].Itens++;
						jahTem = true;
						break;
					}
				}
				if(jahTem == false)
				{
					$this.MeusProdutos.items.push({Id:arg.Id,Url:arg.Url,Itens:1,Valor:arg.Valor});
				}			
			},
			Remover: function(arg)
			{
				$this.MeusProdutos.items._each(function(produto)
				{
					var item =  produto.Id;
					if(item == arg.Id)
					{
						produto.Itens--;
						if(produto.Itens <= 0)
						{
							$this.MeusProdutos.items.pop(produto);
						}
					}
				});
			},
			ExibirMeusProdutos: function(args)
			{
				this.TOTAL = 0;
				var TagPedidos = $(args.IdTagPedidos);
				Effect.BlindDown(args.IdTagPedidos, { duration: 0.8 }); 
                

				TagPedidos.update("");
					
				for(var i = 0; i <$this.MeusProdutos.items.length; i++)
				{
					var produto = $this.MeusProdutos.items[i];
					var _valor = produto.Valor * produto.Itens;
					this.TOTAL += _valor;
					var Id = "item_"+ produto.Id;
					var div = new Element('div',{ 'id': Id});
					var h1  = new Element('h1',{'id':'h1'+Id}).update(produto.Nome);
					var img = new Element('img',{'id':'img'+Id,'src':produto.Url,'class': args.CssItemPego });
					Event.observe(img,'click',function()
					{
						$this.ARGS_CONTABLIZAR.Item = this.id.replace("img","");
						$this.ARGS_CONTABLIZAR.Acao = "R";
						$this.Contablizar($this.ARGS_CONTABLIZAR);	
						
					},false);
					
					var qtd = new Element('h4',{'id':'spam_valor'+Id}).update("Quantidade: (" + produto.Itens +")");
					div.appendChild(h1);
					div.appendChild(img);
					div.appendChild(qtd);
					TagPedidos.appendChild(div);
				}
				
				if(this.TOTAL == 0)
				{
					$(args.IdTagTotal).update("");
				}
				$(args.IdTagTotal).update("R$ "+ this.TOTAL.toFixed(2));
			},
			Iniciar: function(args,acao)
			{	  			 //args.CssItemPego 
				$this.ConteudosLoja(args);
	
				Droppables.add(args.Carrinho, 
				{
					accept: args.CssItem, 
					hoverclass:""+args.CssItem+"Drag", 
					greedy: 'true', 
					onDrop: function(ele) 
					{ 
						$this.ARGS_CONTABLIZAR = {Item:ele.id,Acao:'A',IdTagPedidos:args.IdTagPedidos,IdTagTotal:args.IdTagTotal,CssItemPego:args.CssItemPego};
						$this.Contablizar($this.ARGS_CONTABLIZAR);				
					}			
				});
			},
			ConteudosLoja : function(args)
			{
				var conteudoLoja = $(args.ConteudoLoja);
				conteudoLoja.update("");
				$this.Produtos.items._each(function(produto)
				{
					var Id = "item_"+ produto.Id;
					var div = new Element('div',{'class': args.CssItem, 'id': Id});
					var h1  = new Element('h1',{'id':'h1'+Id}).update(produto.Nome);
					var img = new Element('img',{'id':'img'+Id,'src':produto.Url});
					var val = new Element('div',{'id':'spam_valor'+Id}).update("<b>R$ " + produto.Valor.toFixed(2) +"</b>");
					var des = new Element('div',{'id':'spam_valor'+Id}).update(produto.Descricao);
					div.appendChild(h1);
					div.appendChild(img);
					div.appendChild(val);
					div.appendChild(des);
					conteudoLoja.appendChild(div);
					new Draggable(Id, 
						{
							revert: 'true'
						});
				});	
			}
		}
		Event.observe(window,'load',function()
		{
			var carrinho = new Carrinho();
			//Profuto 1
            var item = new Produto({Id:1,Url:"itens/prod_blusa.jpg",Nome:"Blusa Fenix",Valor:56.30,Descricao:"blusa legal..."});
			carrinho.Produto.Add(item);	
			//Produto 2
			item = new Produto({Id:2,Url:"itens/prod_note.jpg",Nome:"Note book CCE",Valor:1520.99,Descricao:"Notebook 5g..."});
			carrinho.Produto.Add(item);	
			//Produto 3
			item = new Produto({Id:3,Url:"itens/prod_cell.jpg",Nome:"Celular Tabajara",Valor:891.10,Descricao:"celular legal..."});
			carrinho.Produto.Add(item);	 
			
			carrinho.Iniciar({
							Carrinho	   : "carrinho",
							ConteudoLoja   : "loja",
							CssItem		   : "item", 
							CssItemPego	   : "itempego",
							IdTagPedidos   : "pedidos",
							IdTagTotal	   : "total",
							Acao 		   : "A"
							});
		},false);
		
	</script>

ArquivoTipoTamanhoHits 
Carrinho.rarArquivo RAR141,6 Kb175Baixar o Arquivo
Sim   Não   Este código foi útil para você?
NotaComentário
Ainda não foi enviado nenhum comentário.
Regras:
Os comentários seguem as seguintes regras:
  • Todos os comentários são enviados por membros cadastrados no site.
  • A pontuação de comentários de conteúdo do próprio membro não serão computados.
  • Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
  • Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
  • O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
  • Há um limite de 10 comentários por dia para cada membro.
  • Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

     (ainda não tem cadastro? clique aqui!)


Máximo de 30 caracteres

Máximo de 255 caracteres
 

R&W Consulting - Soluções Web Hospedagem UOL HOST PagSeguro - solução para pagamentos online
© 2006-2009 R&W Informática Ltda. - Todos os direitos reservados.