Adding the Shiny Parts
One of the great side effects of Ajax's booming popularity is the emergence of countless JavaScript frameworks, all intended to reduce the amount of actual programming you have to do with that horrid little language. In an earlier installment I introduced Prototype, so if it's new to you consider reading this tutorial before moving on.
To begin, we'll create the Prototype-driven JavaScript function which will perform the remote call to the server. Below the function, you'll find some simple HTML code which in a real-world situation would be generated by way of a database request. Finally, a link to the shopping cart is provided, although you could just as easily have displayed the cart contents on the same page. For the sake of brevity I'll just show you how to integrate the add feature, and will leave the subtraction mechanism to you as an exercise.
<script src="prototype.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
function manageCart(task,item) {
var url = 'managecart.php';
var params = 'task=' + task + '&item=' + item;
var ajax = new Ajax.Updater(
{success: 'cartResult'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}
function reportError(request) {
$F('cartResult') = "An error occurred";
}
</script>
<div id="cartResult"></div>
<p>
Beginning PHP and MySQL 5, Second Edition<br />
<a href="#" onclick="manageCart('add',1)";>Add to Cart</a>
</p>
<p>
Pro MySQL<br />
<a href="#" onclick="manageCart('add',3)";>Add to Cart</a>
</p>
<p>
<a href="viewcart.php">View your shopping cart</a>
</p>
Next, up is the managecart.php. This script is called by the JavaScript function, and is responsible for adding or subtracting an item from the cart. The script is also responsible for returning an appropriate message back to the calling web page:
<?php
include("cart.class.php");
session_start();
$items = $_SESSION["cart"];
$cart = new Shopping_Cart($items);
// Retrieve the parameters
$task = $_GET['task'];
$item = $_GET['item'];
if ($task == "add") {
$cart->addToCart($item);
$_SESSION["cart"] = $cart->getCart();
echo "item added!";
} else {
$cart->deleteFromCart($item);
echo "item deleted!";
}
?>
Finally, the simple viewcart.php script. This script is responsible for simply retrieving the shopping cart. You'll need to add a few more lines of code in order to convert the product IDs back to the product names:
<?php
include("cart.class.php");
session_start();
?>
<p>
Your Shopping Cart contains:
<?php
print_r($_SESSION["cart"]);
?>
</p>
There you have it! An Ajax-enabled shopping cart in very few lines of code, thanks to the power of PHP and the Prototype JavaScript library. I'd love to hear about how you're using what you've learned in this and other installments of this series! Email me at wjATwjgilmore.com.
About the Author
W. Jason Gilmore (http://www.wjgilmore.com/) is the open source editor for Apress. He's the author of the best-selling "Beginning PHP and MySQL 5: Novice to Professional, Second Edition" (Apress, 2006. 913pp.). Along with Robert Treat, Jason is the co-author of "Beginning PHP 5 and PostgreSQL 8: From Novice to Professional". Jason loves receiving e-mail; so don't hesitate to write him at wjATwjgilmore.com.
Go to page: Prev 1 2
IE 7
Firefox 2.0
