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.