Shopping cart is an essential part of any E-commerce website that sells goods and services everyday over an internet, but the success rate of the online store is also determined by the convenience of whole buying process! Therefore, Ajax based Shopping Cart could be ideal platform, it can make things effortless for buyers.
Since my last tutorial about PHP Shopping Cart, I’ve received quite a few messages from users requesting an Ajax based Shopping cart tutorial! So today I am going to create the same by showing simple step by step examples, but I can’t guarantee it will be entirely novice friendly!
Create MySql Table
Before we start, we need to create a table in MySql database, which will store all the information regarding the products you want to sell, such as product name, id, description, price etc. For the tutorial, I have created a table called products_list:
You can run the MySql code above manually in your PhpMyAdmin to create products_list table automatically. Or import products_list.sql (MySql file) in downloadable zip.
Here’s the list of products I have in my database table :
Let’s start by creating a config file called config.inc.php to store MySql credentials and other settings for later. We will be including this file where required to make MySql connection or to fetch currency or tax information.
Let’s create products page from MySql data. We can arrange these items as we like, we will include some CSS to make it look great. Since we will be accessing session variable, we need to include session_start(); on top of these files, followed by include(“config.inc.php”);.
After all the arrangement and styling, our products page should look something like picture below. We will use jQuery to capture values from these items, which we will use to update the shopping cart.
Adding Shopping Cart Box
Once we have created the products page, we can now add a cart box somewhere within the page. This cart-box gets automatically updated when user adds/removes the items from products list.
Using CSS I’ve changed the look of this cart box in picture below.
Implementing Ajax with jQuery
To remove an item from cart, we need to trigger the following jQuery code, as you can see I have used $.getJSON() method, as we will be expecting JSON data from server:
If user wants to view his cart, we simply display the cart box using code below.
The jQuery code below simply closes the cart-box when user clicks the close button.
PHP Cart Processing
Our product page is ready to update the cart, but there’s no background script to process the data sent via Ajax. For that we need to create a server side PHP script, which will obliquely process and send relevant data back to the client’s page. Let’s create a PHP file called cart_process.php.
If you have read Updating Cart in my previous post Creating Simple Shopping Cart with PHP, you will notice the code similarities here. We will be applying the similar technique using PHP session variable to create multidimensional array, which holds the item values, and can be manipulated as per the needs.
Cart Summery view
Finally we will create a summery view page to show total costs including taxes, this is the page where users know exactly what they will have to pay when they decide to purchase.
That’s it! all you now need to do is pass these values to your Payment Gateway when user clicks pay button. You can generate any type of data here for the Payment gateway, most Payment gateway prefer HTML form, so you can create hidden input fields with values and post them to your Payment Gateway website.