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;
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>
You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]