Tutorialzine AJAX shopping cart, partially working?

MasterACE14 · July 16, 2010

Hello,

I've been following this tutorial... http://tutorialzine.com/2009/09/shopping-cart-php-jquery/ on how to make a AJAX shopping cart with PHP, Javascript and CSS...

It was working as it is, straight from the tutorial, but when I tried implementing it into my site, it's only half working...

I've been trying to narrow down the problems using Firefox's 'firebug' addon, but aren't having much luck just yet.

There's a few files involved with this, and quite a lot of code, I'll try and post only what is relevant but enough to hopefully point out where I've gone wrong...

index.php

 
  <!-- all the important jQuery and Javascript files so it works... -->
   <script type="text/javascript" src="theme/javascript/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="theme/javascript/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript" src="theme/javascript/jquery.simpletip-1.3.1.min.js"></script>
    <script type="text/javascript" src="theme/javascript/script.js"></script>
    <script type="text/javascript" src="theme/javascript/functions.inc.js"></script>
    <script type="text/javascript" src="theme/javascript/chatscript.js"></script>
    <script type="text/javascript" src="theme/javascript/shopping-cart.js"></script>
    <script type="text/javascript" src="theme/javascript/dom.ready.js"></script>

                                                <?php
                                                     // including what page is to be viewed...
                                                     if( isset( $_GET['page'] ) )
                                                    {
                                                        if( file_exists( 'lib/'. $_GET['page'] .'.php' ) )
                                                        {
                                                             include( 'lib/'. $_GET['page'] .'.php' );
                                                        }
                                                        else
                                                        {
                                                             include( 'lib/home.php' );
                                                        }
                                                    }
                                                    else
                                                    {
                                                         include( 'lib/home.php' );
                                                    }
                                                ?>

theme/javascript/dom.ready.js

 var purchased = new Array();
var totalprice = 0;

$(document).ready(function(){

        /* Shopping Cart AJAX */
        /*** START ***/
$('.product').simpletip({

	offset:[40,0],
	content:'<img src="plugins/shopping-cart/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('plugins/shopping-cart/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);
				}

});
        /* Shopping Cart AJAX */
        /*** FINISH ***/

});

theme/javascript/shopping-cart.js

function addlist(param)
{
$.ajax({
type: "POST",
url: "plugins/shopping-cart/ajax/addtocart.php",
data: 'img='+encodeURIComponent(param),
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)
		{
			purchased.push({id:msg.id,cnt:1,price:msg.price});
		}
		else
		{
			if(cnt>=3) return false;

			purchased[i].cnt++;
			$('#'+msg.id+'_cnt').val(purchased[i].cnt);
		}

		totalprice+=msg.price;
		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();
}

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();
}

function update_total()
{
if(totalprice)
{
	$('#total').html('total: $'+totalprice);
	$('a.button').css('display','block');
}
else
{
	$('#total').html('');
	$('a.button').hide();
}
}

plugins/shopping-cart/ajax/addtocart.php

<?php

        session_start();
        require( '../../../logic/config.php' );
        require( '../../../logic/classes/error.class.php' );
        require( '../../../logic/classes/session.class.php' );
        require( '../../../logic/classes/database.class.php' );
        $database = new Database;
        Database::query("SET names UTF8");
        $session = new Session;
        if($session->is_logged_in() != true) { errorHandler::customError('Your session has expired, you need to login again!'); }

if(!isset($_POST['img']))
    $_POST['img'] = null;
if(!$_POST['img']) errorHandler::customError("There is no such product!");

$_POST['img'] = Database::escape_value($_POST['img']);
$img = end(explode('/',$_POST['img']));

$query = "SELECT * FROM `ca_shop` WHERE `img`='".$img."'";
$rs = Database::query($query) or die("Problem with the query: $query<br>" . mysql_error());
if(Database::num_rows($rs) == 0) errorHandler::customError("There is no such product!");
$row = Database::fetch_array($rs);

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%"><select name="'.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option></slect>\
\
</td>\
<td width="15%"><a href="#" onclick="remove('.$row['id'].');return false;" class="remove">remove</a></td>\
  </tr>\
</table>\'}';
?>

plugins/shopping-cart/ajax/tips.php

<?php

        session_start();
        require( '../../../logic/config.php' );
        require( '../../../logic/classes/error.class.php' );
        require( '../../../logic/classes/session.class.php' );
        require( '../../../logic/classes/database.class.php' );
        $database = new Database;
        Database::query("SET names UTF8");
        $session = new Session;
        if($session->is_logged_in() != true) { errorHandler::customError('Your session has expired, you need to login again!'); }

if(!isset($_POST['img']))
    $_POST['img'] = null;
if(!$_POST['img']) errorHandler::customError("There is no such product!");

$_POST['img'] = Database::escape_value($_POST['img']);
$img = end(explode('/',$_POST['img']));

$query = "SELECT * FROM `ca_shop` WHERE `img`='".$img."'";
$rs = Database::query($query) or die("Problem with the query: $query<br>" . mysql_error());
if(Database::num_rows($rs) == 0) errorHandler::customError("There is no such product!");
$row = Database::fetch_array($rs);

echo '<strong>'.$row['name'].'</strong>

<p class="descr">'.$row['description'].'</p>

<strong>price: $'.$row['price'].'</strong>
<small>Drag it to your shopping cart to purchase it</small>';
?>

lib/shop.php

and

lib/order.php

are the same as the tutorial just with the style sheet added in both.

Now... that's all the important code. There's two problems with the shopping cart, when I hover the cursor over a product, the 'tips.php' request is a success according to Firebug, and the HTML response is what it should be, yet it doesn't display at all. The other problem is when I drag a product into the shopping cart, the Ajax loading.gif image shows up, but nothing happens, the AJAX request is sent and is a success according to Firebug, but nothing happens, the loading.gif just hangs there and the request completes with no changes made... when the product should then be in the shopping cart.

here's the POST addtocart.php response shown in Firebug:

{status:1,id:5,price:99,txt:'\
\

<table width="100%" id="table_5">\

<tr>\

<td width="60%">iPod Nano</td>\

<td width="10%">$99</td>\

<td width="15%"><select name="5_cnt" id="5_cnt" onchange="change(5);">\

<option value="1">1</option>\

<option value="2">2</option>\

<option value="3">3</option></slect>\

\

</td>\

<td width="15%"><a href="#" onclick="remove(5);return false;" class="remove">remove</a></td>\

</tr>\

</table>'}

It's probably something simple to fix, but I'm absolutely stuck.

Any help is greatly appreciated!

Thanks, Ace

Sign In

Tutorialzine AJAX shopping cart, partially working?

Recommended Posts

MasterACE14

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information