Shopping Cart with Ajax, PHP and MySQL

Shopping cart is a part of eCommerce project in which multiple products are added and viewed added product details like price, total amount, taxes etc. before submitting order. So if you’re thinking about creating shopping cart in your web project, then you’re here at right place.

In this tutorial you will learn how to create shopping cart with Ajax, PHP and MySQL. The shopping cart functionality handled with PHP SESSION to add remove products. The tutorial explained in easy steps with live demo to understand cart functionality. You can also download source code of live to build your shopping cart from scratch.

Also, read:

As we have covered this tutorial with live demo to build shopping cart with Ajax, PHP and MySQL, so the file structure for this example is following.

index.php
cart.js
manage_cart.php
view_cart.php
checkout.php
success.php

Steps1: Create MySQL Database Table
First we will create MySQL database table shop_products and insert products in this table to display products in shop to add into cart.

CREATE TABLE `shop_products` (
  `id` int(11) NOT NULL,
  `product_name` varchar(60) NOT NULL,
  `product_desc` text NOT NULL,
  `product_code` varchar(60) NOT NULL,
  `product_image` varchar(60) NOT NULL,
  `product_price` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `shop_products`
  ADD PRIMARY KEY (`id`);

products table dump data for demo :

INSERT INTO `shop_products` (`id`, `product_name`, `product_desc`, `product_code`, `product_image`, `product_price`) VALUES
(1, 'Apple iPhone', 'The iPhone 7, with its amazing features and drool-worthy design, looks every bit as efficient as it is. With a powerful processor and ample internal storage, this smartphone offers you a seamless performance.', 'APPM01', 'apple-iphone-7.jpeg', 39999),
(2, 'Samsung On5', 'With a leathery feel, the Samsung Galaxy On5 has a classy look with a thin frame that provides you a comfortable steady grip. The quick launch feature in the phone lets you capture moments easily by pushing the home button twice. With a Palm Gesture Selfie feature, a wide viewing angle and the Beauty Shot mode, the camera gives you rewarding selfie experiences.', 'SAMM01', 'samsung-galaxy-on5.jpeg', 7990),
(3, 'OPPO F3 Plus', '\r\nFeaturing a 1.95 GHz Qualcomm Snapdragon MSM8976 Pro processor, an Adreno 510 GPU and 4 GB of RAM, the OPPO F3 Plus offers fast and fluid multitasking. It comes with a 4000-mAh battery that won’t call it a day until you do.', 'OPPM01', 'oppo-f3-plus.jpeg', 24595),
(4, 'Asus Zenfone', 'Asus Zenfone 3s Max (Gold, 32 GB)  (3 GB RAM)', 'AUSM01', 'asus-zenfone-3s-max.jpeg', 8984);

Steps2: List Products in Shop
In index.php, we will get products details from MySQL database table shop_products and list products in shop.

<div class="col-md-8 text-center">			
<ul class="products-container">
<?php			
$sql_query = "SELECT product_name, product_desc, product_code, product_image, product_price FROM shop_products";	
$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
while( $row = mysqli_fetch_assoc($resultset) ) {
?>
<li>
	<form class="product-form">
		<h4><?php echo $row["product_name"]; ?></h4>
		<div><img class="product_image" 
src="images/<?php echo $row["product_image"]; ?>"></div>
		<div>Price : <?php echo $currency; 
echo $row["product_price"]; ?></div>
		<div class="product-box">
			<div>
				Color :
				<select name="product_color">
				<option value="Black">Black</option>
				<option value="Gold">Gold</option>
				<option value="White">White</option>
				</select>
			</div>	
			<div>
				Qty :
				<select name="product_qty">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				</select>
			</div>					
			<input name="product_code" type="hidden" 
value="<?php echo $row["product_code"]; ?>">
			<button type="submit">Add to Cart</button>
		</div>
	</form>
	</li>
<?php } ?>
</ul>
</div>

Steps3: Add Products to Cart
Now in cart.js, we will handle functionality to add products to cart with Ajax request to manage_cart.php.

$(".product-form").submit(function(e){
		var form_data = $(this).serialize();
		var button_content = $(this).find('button[type=submit]');
		button_content.html('Adding...'); 
		$.ajax({
			url: "manage_cart.php",
			type: "POST",
			dataType:"json",
			data: form_data
		}).done(function(data){		    
			$("#cart-container").html(data.products);
			button_content.html('Add to Cart'); 			
		})
		e.preventDefault();
	});

Steps4: Manage Cart with PHP SESSION
In manage_cart.php, we will manage cart to add products in cart. If there are already product in cart then we will increment quantity of that product.

if(isset($_POST["product_code"])) {
	foreach($_POST as $key => $value){
		$product[$key] = filter_var($value, FILTER_SANITIZE_STRING);
	}	
	$statement = $conn->prepare("SELECT product_name, product_price FROM shop_products WHERE product_code=? LIMIT 1");
	$statement->bind_param('s', $product['product_code']);
	$statement->execute();
	$statement->bind_result($product_name, $product_price);
	while($statement->fetch()){ 
		$product["product_name"] = $product_name;
		$product["product_price"] = $product_price;		
		if(isset($_SESSION["products"])){ 
			if(isset($_SESSION["products"][$product['product_code']])) {				
				$_SESSION["products"][$product['product_code']]["product_qty"] 
= $_SESSION["products"][$product['product_code']]["product_qty"] + $_POST["product_qty"];				
			} else {
				$_SESSION["products"][$product['product_code']] = $product;
			}			
		} else {
			$_SESSION["products"][$product['product_code']] = $product;
		}	
	}	
 	$total_product = count($_SESSION["products"]);
	die(json_encode(array('products'=>$total_product)));
}

Steps5: View cart details
In view_cart.php we will handle functionality to display cart details like product name, price, quantity, sub total, total etc. There are also functionality to add/remove product and change quantity of cart product.

<div class="text-left">					
		<div class="col-md-8">
			<h3>My Cart (<span 
id="cart-items-count"><?PHP if(isset($_SESSION["products"])){
echo count($_SESSION["products"]); } 
?></span>)</h3>			
			<?php		
			if(isset($_SESSION["products"]) && count($_SESSION["products"])>0) { 
			?>
				<table class="table" id="shopping-cart-results">
				<thead>
				<tr>
				<th>Product</th>
				<th>Price</th>
				<th>Quantity</th>
				<th>Subtotal</th>
				<th> </th>
				</tr>
				</thead>
				<tbody>
			<?php
				$cart_box = '<ul class="cart-products-loaded">';
				$total = 0;
				foreach($_SESSION["products"] as $product){					
					$product_name = $product["product_name"]; 
					$product_price = $product["product_price"];
					$product_code = $product["product_code"];
					$product_qty = $product["product_qty"];
					$product_color = $product["product_color"];					
					$subtotal = ($product_price * $product_qty);
					$total = ($total + $subtotal);
				?>
				<tr>
				<td><?php echo $product_name; echo "—"; 
echo $product_color; ?></td>
				<td><?php echo $product_price; ?></td>
				<td><input type="number" 
data-code="<?php echo $product_code; ?>" 
class="form-control text-center quantity" value="<?php echo $product_qty; ?>"></td>
				<td><?php echo $currency; 
echo sprintf("%01.2f", ($product_price * $product_qty)); ?></td>
				<td>				
				<a href="#" class="btn btn-danger remove-item" 
data-code="<?php echo $product_code; ?>"><i 
class="glyphicon glyphicon-trash"></i></a>
				</td>
				</tr>
			 <?php } ?>
			<tfoot>
			<br>
			<br>
			<tr>
			<td><a href="index.php" 
class="btn btn-warning"><i class="glyphicon glyphicon-menu-left"></i> 
Continue Shopping</a></td>
			<td colspan="2"></td>
			<?php 
			if(isset($total)) {
			?>	
			<td class="text-center cart-products-total"><strong>Total <?php echo $currency.sprintf("%01.2f",$total); ?></strong></td>
			<td><a href="checkout.php" 
class="btn btn-success btn-block">Checkout <i 
class="glyphicon glyphicon-menu-right"></i></a></td>
			<?php } ?>
			</tr>
			</tfoot>			
			<?php		
			} else {
				echo "Your Cart is empty";
			?>
			<tfoot>
			<br>
			<br>
			<tr>
			<td><a href="index.php" 
class="btn btn-warning"><i class="glyphicon glyphicon-menu-left"></i> 
Continue Shopping</a></td>
			<td colspan="2"></td>
			</tr>
			</tfoot>
			<?php } ?>				
			</tbody>
			</table>			
		</div>			
	</div>

Steps6: Checkout Order
In checkout.php, we will checkout order details with cart product, quantity, total, taxes etc before place order.

<?php
if(isset($_SESSION["products"]) && count($_SESSION["products"])>0){
	$total = 0;
	$list_tax = '';
	?>	
	<table class="table" id="shopping-cart-results">
	<thead>
	<tr>
	<th>Product</th>
	<th>Price</th>
	<th>Quantity</th>
	<th>Subtotal</th>		
	<th> </th>				
	</tr>
	</thead>
	<tbody>				
	<?php			
	$cart_box = '';
	foreach($_SESSION["products"] as $product){
		$product_name = $product["product_name"];
		$product_qty = $product["product_qty"];
		$product_price = $product["product_price"];
		$product_code = $product["product_code"];
		$product_color = $product["product_color"];			
		$item_price = sprintf("%01.2f",($product_price * $product_qty)); 		
		?>
		<tr>
		<td><?php echo $product_name; echo "—"; echo $product_color; ?></td>
		<td><?php echo $product_price; ?></td>
		<td><?php echo $product_qty; ?></td>
		<td><?php echo $currency; echo sprintf("%01.2f",
 ($product_price * $product_qty)); ?></td>
		<td> </td>
		</tr>				
		<?php		
		$subtotal = ($product_price * $product_qty);
		$total = ($total + $subtotal);
	}	
	$grand_total = $total + $shipping_cost;
	foreach($taxes as $key => $value){
			$tax_amount = round($total * ($value / 100));
			$tax_item[$key] = $tax_amount;
			$grand_total = $grand_total + $tax_amount; 
	}	
	foreach($tax_item as $key => $value){
		$list_tax .= $key. ' : '. $currency. sprintf("%01.2f", $value).'<br />';
	}	
	$shipping_cost = ($shipping_cost)?'Shipping Cost : '.$currency. sprintf("%01.2f", $shipping_cost).'<br />':'';	
	$cart_box .= "<span>$shipping_cost  
$list_tax <hr>Payable Amount : 
$currency ".sprintf("%01.2f", $grand_total)."</span>";	
	?>
	<tfoot>
	<tr>
	<td><br><br><br><br><br><br><a 
href="index.php" class="btn btn-warning"><i 
class="glyphicon glyphicon-menu-left"></i> Continue Shopping</a></td>
	<td> </td>
	<td> </td>
	<td 
class="text-center view-cart-total"><strong><?php echo $cart_box; ?></strong></td>	
	<td><br><br><br><br><br><br><a 
href="success.php" class="btn btn-success btn-block">Place Order <i 
class="glyphicon glyphicon-menu-right"></i></a></td>
	</tr>
	</tfoot>	
	<?php	
} else {
	echo "Your Cart is empty";
}
?>
</tbody>
</table>

7 thoughts on “Shopping Cart with Ajax, PHP and MySQL”

abu says:

3 January, 2018 at 7:42 am

pls where is success. php code which contains the cart Info and insert to database
1. PHPZAG Team says:
  
  1 April, 2018 at 4:51 am
  
  Thanks for comment! you need to implement cart payment success details into database. its not provided here in this tutorial.
ashok patel says:

9 January, 2018 at 4:18 am

Nice Tutorial
Jakarta says:

13 February, 2018 at 4:47 pm

if I choose 1 black and 1 while of the same product, it counts them as 2 of the same color product and this is not correct.
1. PHPZAG Team says:
  
  1 April, 2018 at 4:49 am
  
  Yes it is. You can make changes in script according to your requirement. I will also update demo to work like that. thanks!
Ayo Celestine says:

26 June, 2018 at 2:52 am

This is awesome. Please when the order is been place, the cart still remain there, which is not suppose to be so, and when are you updating the script?
1. PHPZAG Team says:
  
  5 August, 2018 at 3:49 pm
  
  when order placed, its gone for payment but payment gateways not implement there. The Papal payment gateways integration done in next tutorial https://www.phpzag.com/shopping-cart-with-paypal-integration-in-php/.

Comments are closed.

7 thoughts on “Shopping Cart with Ajax, PHP and MySQL”

Latest Tutorials

Popular Tags