Foros del Web » Programando para Internet » Javascript »

Carrito de compra

Estas en el tema de Carrito de compra en el foro de Javascript en Foros del Web. !Ojo¡ No lo pongo en ajax por que el problema q tengo es en javascript nadamas (espero ) Hola a toda la comunidad y antes ...
  #1 (permalink)  
Antiguo 07/10/2009, 00:15
Avatar de yeudiel  
Fecha de Ingreso: abril-2008
Ubicación: Ciudad de México
Mensajes: 78
Antigüedad: 16 años
Puntos: 1
Carrito de compra

!Ojo¡ No lo pongo en ajax por que el problema q tengo es en javascript nadamas (espero )

Hola a toda la comunidad y antes que nada gracias por darse un tiempo leyendo. Bueno empiezo a explicar, me encontre en una pagina muy interesante llamada www.ajaxrain.com un pequeño script de ajax de un carrito de compra, el demo se encuentra en la siguiente liga: http://demo.tutorialzine.com/2009/09...query/demo.php.

La verdad esta muy atractivo e interesante, y por ello me propuse modificarlo para integrarlo a mi sistema de facturacion, ya que se veria muy bonito poder hacer mi factura en pdf y seleccionar los productos de esta en drag and drop, y obviamente tambien por aprender, jeje.

Bueno el problema es el siguiente, ya modifique el script de tal modo que me permite agrear mas de 3 articulos y mediante un campo de texto (no como un select como viene), tambien que cada vez que agregara un producto mediante el drag and drop se agregara el valor a un array session de php, bueno, el problema es el siguiente: cuando agrego mediante drag and drop un articulo y es nuevo se pone como "cantidad" 1 y si lo hago de nuevo se suma 1 al articulo y a la session, cuando tecleo la cantidad en el cuadro de texto hace lo mismo, pero cuando le doy en actualizar pagina, obviamente no sa cargan los articulos ya agregados, esto se me ocurrio solucionarlo con la funcion addlist poniendo en el body <body onload="addlist('id_articulo')"> el problema con esto es que cada vez que llamo addlist lo que hace es tratarlo como articulo nuevo y me pone al articulo en 1 de nuevo lo trate de solucionar modificando addlist('id_articulo','cantidad_articulo') para cargar tambien la cantidad pero ahora me da erroren la suma de los totales me suma el total de todos los productos como si fuera una sola unidad de todos los que tengo aunque aparescan mas unidades por articulo, aqui ya no se como hacerle. Si necesitan el codigo fuente editado que tengo se los posteo. lo importante esta en los archivos ajax/addtocart.php, demo.php y script.js

Última edición por yeudiel; 07/10/2009 a las 00:23 Razón: faltaron explicaciones
  #2 (permalink)  
Antiguo 07/10/2009, 04:21
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Respuesta: Carrito de compra

Hola,

No entiendo el motivo de refrescar la página. Pero si lo tienesque hacer por el motivo que sea, y por lo que dices, entiendo que pierdes la información de antes de refrescar, te propongo así dos soluciones rápidas:

1. Podrías pasar la info de antes de refrescar por GET o POST en el PHP, siempre y cuando controles que es un refesco y no un nuevo acceso a ese php.

2. Ya que estás usando ajax, podrías crearte una tabla auxiliar en tu BBDD de tal forma que se vayan registrando los movimientos que haga un usuario desde que empieza hasta que acaba. Así creo que te podrías ahorrar el refresco o si más no la pérdida de información...

3. No entiendo como pierdes la info si la guardas en una variable de sesión, pero en lugar de hacer operaciones matemáticas, podrías guardar un identificador que contenga toda la info en un solo string. Por ejemplo: iPod3, iMac2.

Hace tiempo qeu no toco nada de web (con PHP+AJAX+JS) pero como te he dicho, así como solución rápida, creo qeu el problema lo tienes en el PHP...
Quizás si pones algo de código te podamos ayudar mejor.

(Por cierto, la web está muy chula!)

Saludos.
  #3 (permalink)  
Antiguo 07/10/2009, 07:26
Avatar de yeudiel  
Fecha de Ingreso: abril-2008
Ubicación: Ciudad de México
Mensajes: 78
Antigüedad: 16 años
Puntos: 1
De acuerdo Respuesta: Carrito de compra

Gracias por tu respuesta, y afortunadamente ya lo pude resolver, era cosa del javascript ya con ello pude seguirme con el php que es mas facil, les posteo todos los scripts que edite para que lo prueben y sirva de aporte, ademas que si se puede limpien el codigo para que quede mas bonito y funcional, jeje.

demo.php
Código PHP:
<?php
session_start
();
define('INCLUDE_CHECK',1);
require 
"connect.php";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorialzine's shopping cart | Tutorialzine demo</title>

<link rel="stylesheet" type="text/css" href="demo.css" />

<!--[if lt IE 7]>
<style type="text/css">
    .pngfix { behavior: url(pngfix/iepngfix.htc);}
    .tooltip{width:200px;};
</style>
<![endif]-->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script>


<script type="text/javascript" src="script.js"></script>

</head>

<body<?
$conteo
=count($_SESSION["carrito"]);
if(isset(
$_SESSION["carrito"])){
if(
$conteo!=0){
echo
" onload=\"";
foreach(
$_SESSION["carrito"] as $k => $v){
echo
"addlist('".$v['img']."','".$v['cantidad']."');";
}
echo
"\" ";
}
}

?>>

<div id="main-container">

    <div class="tutorialzine">
    <h1>Shopping cart</h1>
    <h3>The best products at the best prices</h3>
    </div>


    <div class="container">
    
        <span class="top-label">
            <span class="label-txt">Products</span>
        </span>
        
        <div class="content-area">
    
            <div class="content drag-desired">
                
                <?php

                $result 
mysql_query("SELECT * FROM internet_shop");
                while(
$row=mysql_fetch_assoc($result))
                {
                    echo 
'<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></div>';
                }

                
?>
                
                
                   <div class="clear"></div>
            </div>

        </div>
        
        <div class="bottom-container-border">
        </div>

    </div>



    <div class="container">
    
        <span class="top-label">
            <span class="label-txt">Shopping Cart</span>
        </span>
        
        <div class="content-area">
    
            <div class="content drop-here">
                <div id="cart-icon">
                    <img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />
                    <img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
                </div>

                <form name="checkoutForm" method="post" action="order.php">
                
                <div id="item-list">
                </div>
                
                </form>                
                <div class="clear"></div>

                <div id="total"></div>

                   <div class="clear"></div>
                
                <a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>
             
          </div>

        </div>
        
        <div class="bottom-container-border">
        </div>

    </div>

    <div class="tutorial-info">    
    This is a Tutorialzine demo. View the <a href="http://tutorialzine.com/2009/09/shopping-cart-php-jquery/">original tutorial</a>, or download the <a href="demo.zip">demo files</a>.</div>

</div>

</body>
</html>
script.js
Código HTML:
var purchased=new Array();
var totalprice=0;

$(document).ready(function(){
	
	$('.product').simpletip({
		
		offset:[40,0],
		content:'<img src="img/ajax_load.gif" alt="loading" style="margin:10px;" />',
		onShow: function(){
			
			var param = this.getParent().find('img').attr('src');
			
			if($.browser.msie && $.browser.version=='6.0')
			{
				param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
				param = param[1];
			}
			
			this.load('ajax/tips.php',{img:param}); 
		} 

	});
	
	$(".product img").draggable({
	
	containment: 'document',
	opacity: 0.6,
	revert: 'invalid',
	helper: 'clone',
	zIndex: 100
	
	});

	$("div.content.drop-here").droppable({
	
			drop:
					function(e, ui)
					{
						var param = $(ui.draggable).attr('src');
						
						if($.browser.msie && $.browser.version=='6.0')
						{
							param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
							param = param[1];
						}

						addlist(param);
					}
	
	});

});


function addlist(param,canti)
{
	
	if(!canti){
				udl='img='+encodeURIComponent(param);
				}else{
					udl='cantidad='+canti+'&img='+encodeURIComponent(param);
					}
	
	$.ajax({
	type: "POST",
	url: "ajax/addtocart.php",
	data: udl,
	dataType: 'json',
	beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},
	success: function(msg){
		
		$('#ajax-loader').css('visibility','hidden');
		if(parseInt(msg.status)!=1)
		{
			return false;
		}
		else
		{
			var check=false;
			var cnt = false;
			
			for(var i=0; i<purchased.length;i++)
			{
				if(purchased[i].id==msg.id)
				{
					check=true;
					cnt=purchased[i].cnt;
					
					break;
				}
			}
			
			if(!cnt)
				$('#item-list').append(msg.txt);
				
			if(!check)
			{
				if(!canti){
				purchased.push({id:msg.id,cnt:1,price:msg.price});
				}else{
					purchased.push({id:msg.id,cnt:canti,price:msg.price});
					}
			}
			else
			{
				if(cnt>=10000) return false;
				
				purchased[i].cnt++;
				$('#'+msg.id+'_cnt').val(purchased[i].cnt);
				$.ajax({
	type: "POST",
	url: "ajax/actualiza.php",
	data: 'cantidad='+purchased[i].cnt+'&id='+msg.id,
	dataType: 'json',
	});
			}
			if(!canti){
			totalprice+=msg.price;
			}else{
				totalprice+=msg.price*canti;
				}
			update_total();

		}
		
		$('.tooltip').hide();
	
	}
	});
}

function findpos(id)
{
	for(var i=0; i<purchased.length;i++)
	{
		if(purchased[i].id==id)
			return i;
	}
	
	return false;
}

function remove(id)
{
	var i=findpos(id);

	totalprice-=purchased[i].price*purchased[i].cnt;
	purchased[i].cnt = 0;

	$('#table_'+id).remove();
	update_total();
	$.ajax({
	type: "POST",
	url: "ajax/elimina.php",
	data: 'id='+id,
	dataType: 'json',
	});
}

function change(id)
{
	var i=findpos(id);
	
	totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;
	
	purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
	update_total();
	
	$.ajax({
	type: "POST",
	url: "ajax/actualiza.php",
	data: 'cantidad='+purchased[i].cnt+'&id='+id,
	dataType: 'json',
	});
}

function update_total()
{
	if(totalprice)
	{
		$('#total').html('total: $'+totalprice);
		$('a.button').css('display','block');
	}
	else
	{
		$('#total').html('');
		$('a.button').hide();
	}
}
elimina.php (Archivo adicional que tuve que crear)

Código PHP:
<?php
session_start
();
$id=(int)$_POST["id"];
unset(
$_SESSION["carrito"][md5($id)]);
?>
actualiza.php (Archivo adicional que tuve que crear)

Código PHP:
<?php
session_start
();
$cantidad=(int)$_POST["cantidad"];
$id=(int)$_POST["id"];
$_SESSION["carrito"][md5($id)]["cantidad"]=$cantidad;
?>
addtocart.php
Código PHP:
<?php
session_start
();
define('INCLUDE_CHECK',1);
require 
"../connect.php";

if(!
$_POST['img']) die("There is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));
$row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));
if(isset(
$cantidad)){
$mostrar=$cantidad;
    }else{
$mostrar=1;        
        }
$_SESSION["carrito"][md5($row["id"])]=array('id'=>$row['id'],'precio'=>$row['price'],'nombre'=>$row['name'],'cantidad'=>$mostrar,'img'=>$row["img"]);



echo 
'{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:\'\
\
<table width="100%" id="table_'
.$row['id'].'">\
  <tr>\
    <td width="60%">'
.$row['name'].'</td>\
    <td width="10%">$'
.$row['price'].'</td>\
    <td width="15%"><input type="text" name="'
.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');" maxlength="3" size="2" value="'.$mostrar.'">\
    \
    </td>\
    <td width="15%"><a href="#" onclick="remove('
.$row['id'].');return false;" class="remove">remove</a></td>\
  </tr>\
</table>\'}'
;
?>
Nota: Lo del refresh no era necesario pero supuse una situacion en donde por error me saliera de la pagina, pues se borraban los porductos, no las sesiones si no los productos, las sesiones seguian pero no se me ocurria como cargarlas para que se mostraran los productos en el carrito.

Última edición por yeudiel; 07/10/2009 a las 07:32 Razón: Faltaron scripts
  #4 (permalink)  
Antiguo 07/10/2009, 07:34
Avatar de yeudiel  
Fecha de Ingreso: abril-2008
Ubicación: Ciudad de México
Mensajes: 78
Antigüedad: 16 años
Puntos: 1
Respuesta: Carrito de compra

Nota2: Si se puede ahora si pueden mover el tema a AJAX, ahí quedaría mejor.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:36.