October 3, 2008 by romuald.halasz

Hello. This time we’ll discus writing a simple AJAX-driven shopping cart. Again, a challenge that has many solutions, but I prefer to write my own code. Especially for these posts… Like always, we need to discus the languages used and then we can talk about the code. Also, I will provide the full source code this time. You can find it here.

Also, you can see the project here.

Since we’ll use AJAX, we’ll have to write PHP and Javascript code, and of course HTML with a bit of CSS (for the interface). The JS part of the application will send requests to a PHP script, which takes the id of the item that needs to be added, and then display the response text in a container, which is our cart. The JS function sends via XMLHttpRequest two parameters, the first being the id of the item, and the second being a add/subtract ’switch’ (1 - add, 0 - subtract).

Now for the server side part. Since we need to manipulate a series of items, the first thing that comes to mind, is an array. And furthermore, since we need to pass this item from one file to another, we can uses sessions. So, we use a session-stored array to hold out items like this:

Array(
    [item_id1] => quantity1
    [item_id2] => quantity2
    [item_id3] => quantity3
    . . .
);

This is how it looks in PHP:

<?php
session_start();
$_SESSION['items'] = array();
?>

This way we can keep all the information in one array (rather than keeping item_id’s and quantity separately, or using objects).

So, what happens when we send a request? Well, first, the server side script recieves the two parameters, the id and the ’switch’; If the id that was sent is equal to 0, then it means the user wants to empty the shopping, so we do just that, we empty the array and then we exit.

session_start();
$id = $_POST['id'];

if($id == 0)
{
	array_splice($_SESSION['items'], 0);
	exit();
}

If that’s not the case, we need to manipulate an item. We do this by checking if a key equal to the sent id hasn’t been added to the array. In this case, then we simply add an item, else if the switch is equal to 1, we increase the quantity of the item by 1, and if it’s equal to 0, we subtract by 1.

if(!array_key_exists($id, $_SESSION['items']))
	$_SESSION['items'][$id] = 1;
else
	($_POST['add']) ? $_SESSION['items'][$id]++ : $_SESSION['items'][$id]--;

The final step is sending the response text back to the client side, so we just display the result. We parse the array, and display the data in the form we want it. In this case I have used a table:

<table>
<?php
foreach($_SESSION['items'] as $key => $quantity)
{
	if($quantity <= 0)
		unset($_SESSION['items'][$key]);
	else
	{
	?>
	<tr>
		<td width="50"><div class="item<?php echo $key;?>"></div></td>
		<td width="50">x <?php echo $quantity;?></td>
		<td width="150" align="right">
			<a href="#" onclick="sendRequest(<?php echo $key;?>,1);">+</a>
			 /
			<a href="#" onclick="sendRequest(<?php echo $key;?>,0);">-</a>
		</td>
	</tr>
	<?php
	}
}
?>
</table>

Ok. Now that the text is formated nicely, we can add it to the cart, I mean, we let the client side script handle that… So that’s basically it. I won’t go into to much detail about the code, since you can find the source code here.

Feel free to experiment with it and post you version here. If you need any further info, please ask.

Posted in: AJAX