- Getting Started
- Understanding the Non-Ajax Version
- Incorporating jQuery
- Ajax-ifying an Add to Cart Feature
- Final Thoughts
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Ajax-ifying an “Add to Cart” Feature
Once you’ve included the jQuery library, you can use it to change the behavior of every “Add to Cart” link or button:
<script type="text/javascript" charset="utf-8">
$(function() {
$('.add_to_cart').click(function() {
// Actual function code.
});
});
</script>
That code adds an event listener so that when any element with a class of add_to_cart is clicked, the following anonymous function—to be defined next—should be called. For this code to work, every “Add to Cart” link or submit button in the site just needs to be updated to use this class:
<input type="submit" value="Add to Cart" class="add_to_cart" />
or:
<a href="cart.php?sku=SKU&action=add" class="add_to_cart">Add to Cart</a>
or:
<a href="cart.php?sku=SKU&action=add" class="add_to_cart"><img src="images/add_to_cart.png" /></a>
Because this jQuery code is looking for certain class values, it would recognize clicks on images and other elements, too.
Within the anonymous function, replacing “Actual function code”, you make the Ajax call:
// Create a new, empty object.
var data = new Object();
// Add a property called 'sku' with the right value:
data.sku = 'ACTUAL SKU';
// Add a property called 'action' with a value of 'add':
data.action = 'add';
// Post the request:
$.post('cart_ajax.php', data, handleAddToCartAjax, 'text');
// Prevent the default behavior:
return false;
The jQuery post() method makes a POST request of a page. Its first argument is the page being requested—here, cart_ajax.php. I want the Ajax to use a different PHP script than cart.php, as the output of each script will differ.
The second argument is an object of data to be sent to the page, so one is built up over multiple lines. Adding an action element with a value of add is no problem, but retrieving the SKU to be passed will be trickier. The exact code will depend upon what the customer clicked: a submit button or a link. If it’s a submit button, then presumably the form represents the SKU in an element and you can therefore retrieve the SKU value using code like this:
data.sku = $('#actual_form_element_id').val();
If the customer clicked a link, then the this object in the jQuery code would refer to the element that was clicked. Therefore, this.href would represent the value of the href attribute of that element, which is to say the full link URL. From that you would need to parse out the SKU. You can do so using the UrlDecoder jQuery plugin. After downloading, installing, and incorporating that plugin, you would code this:
var link = $.url.parse(this.href); data.sku = link.params.sku;
The third argument to the post() method is a function to be called when the response is received, here named handleCartAjax. And the fourth argument is the type of response to be expected back (e.g., plain text). I’ll return to the function after briefly looking at cart_ajax.php.
The cart_ajax.php script isn’t meant to be run directly, so it contains no HTML. It needs to perform the same tasks as cart.php (or whatever your similar script is) and return a simple text message indicating the success of the whole operation. For my particular example, I was able to create the script by taking a snippet of the code from my original cart.php and making some minor changes. Here are the key parts of the script (not the complete thing):
<?php // cart_ajax.php
// Require the configuration before any PHP code:
require ('./includes/config.inc.php');
// Check for, or create, a user session:
if (isset($_COOKIE['SESSION'])) {
$uid = $_COOKIE['SESSION'];
} else {
$uid = md5(uniqid('biped',true));
}
// Send the cookie:
setcookie('SESSION', $uid, time()+(60*60*24*30));
// Require the database connection:
require (MYSQL);
// Need the utility functions:
include ('./includes/product_functions.inc.php');
// If there's a SKU value received, break it down into its parts:
if (isset($_POST['sku'])) {
list($sp_type, $pid) = parse_sku($_POST['sku']);
}
// Add a new product to the cart:
if (isset ($pid, $sp_type, $_POST['action']) && ($_POST['action'] == 'add') ) {
$r = mysqli_query($dbc, "CALL add_to_cart('$uid', '$sp_type', $pid, 1)");
if ($r) {
echo 'worked';
} else {
echo 'failed';
}
} else {
echo 'invalid';
}
?>
This code may seem simple and it is, thanks to the use of a custom function and a MySQL stored procedure. The script calls that procedure and prints out simple values—”worked”, ”failed”, and ”invalid”—to indicate the result. Again, you can download the code from the above link to see the original cart.php script.
Using this information, you can now define the handleAddToCartAjax function, which is called when the server request is returned back to the JavaScript in the client:
function handleAddToCartAjax (response) {
// Do something if the response was positive:
if (response == 'worked') {
alert('The item has been added to your cart!');
}
} // End of handleAddToCartAjax() function.
The function will receive the server response (the result of calling the PHP script) as its lone argument. Because the jQuery post() method was told the response would be text, the function’s response variable will have a simple string value: “worked”, “failed”, or “invalid”. You could use that value in any number of ways. In the above code, an alert message is generated notifying the user of the success. That code doesn’t address the other possible values, but you would just add more else if clauses to handle that.
If your page displays something about the cart, such as the number of items in it or the actual contents, you could update that part of the page at this point instead of creating an alert (which is admittedly annoying). For example, if your HTML page has this code:
<p>Cart: <span id="cart_count">0</span></p>
Then this jQuery code, to be placed within the if conditional of the handleAddToCartAjax() function, retrieves the current cart count, adds one, and updates the HTML:
var cart_count = $('#cart_count').html();
cart_count++;
$('#cart_count').html(cart_count);
This is a simple and effective way to handle the user’s request (to add the item to the cart) without taking them away from the page they are viewing.