Bootstrap 5
https://getbootstrap.com/docs/4.5/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.cs
Crate Database Table
CREATE TABLE `product` (
`id` int(11) NOT NULL,
`product_name` varchar(255) NOT NULL,
`product_price` varchar(100) NOT NULL,
`product_qty` int(11) NOT NULL DEFAULT 1,
`product_image` varchar(255) NOT NULL,
`product_code` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `product` (`id`, `product_name`, `product_price`, `product_qty`, `product_image`, `product_code`) VALUES
(1, 'HUAWEI Matebook D 14 Laptop', '25999', 1, 'image/01.jpg', 'p1000'),
(2, 'Lenovo IdeaPad Gaming 3', '38780', 1, 'image/02.jpg', 'p1001'),
(3, 'HP Laptop 6570B/450/650', '13562', 1, 'image/03.jpg', 'p1002'),
(4, 'Infinix INbook X1, Core i3-1005G1', '20999', 1, 'image/04.jpg', 'p1003');
CREATE TABLE `cart` (
`id` int(11) NOT NULL,
`product_name` varchar(100) NOT NULL,
`product_price` varchar(50) NOT NULL,
`product_image` varchar(255) NOT NULL,
`qty` int(10) NOT NULL,
`total_price` varchar(100) NOT NULL,
`product_code` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `orders` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(20) NOT NULL,
`address` varchar(255) NOT NULL,
`pmode` varchar(50) NOT NULL,
`products` varchar(255) NOT NULL,
`amount_paid` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
index.php
//index.php
<?php include 'header.php'; ?>
<div class="container">
<p><h1>PHP MySQLi Shopping Cart Using Jquery Ajax</h1></p>
<div class="row mt-2 pb-3">
<?php
include 'config.php';
$stmt = $conn->prepare('SELECT * FROM product');
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()):
?>
<div class="col-sm-6 col-md-4 col-lg-3 mb-2">
<div class="card-deck">
<div class="card p-2 border-secondary mb-2">
<img src="<?php echo $row['product_image']; ?>" class="card-img-top" height="250">
<div class="card-body p-1">
<h4 class="card-title text-center text-info"><?php echo $row['product_name']; ?></h4>
<h5 class="card-text text-center text-danger"> <?php echo number_format($row['product_price'],2); ?></h5>
</div>
<div class="card-footer p-1">
<a href="details.php?item=<?php echo $row['id']; ?>" class="btn btn-primary"><i class="fas fa-cart-plus"></i> Buy Now</a>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php include 'footer.php'; ?>
header.php
//header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP MySQLi Shopping Cart Using Ajax</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css' />
</head>
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<a class="navbar-brand" href="index.php"> Cairocoders</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="index.php">Products</a>
</li>
<li class="nav-item"><a class="nav-link active" href="login.php">Login</a></li>
<li class="nav-item"><a class="nav-link active" href="sign.php">Sign Up</a></li>
<li class="nav-item">
<a class="nav-link" href="cart.php"><i class="fas fa-shopping-cart"></i> <span id="cart-item" class="badge badge-danger"></span></a>
</li>
</ul>
</div>
</nav>
footer.php
//footer.php <script src='https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'></script> <script src='script.js'></script> </body> </html>config.php
//config.php
<?php
$conn = new mysqli("localhost","root","","projectdb");
if($conn->connect_error){
die("Connection Failed!".$conn->connect_error);
}
?>
cart.php
//cart.php
<?php
include 'header.php';
session_start();
?>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div style="display:<?php if (isset($_SESSION['showAlert'])) {
echo $_SESSION['showAlert'];
} else {
echo 'none';
} unset($_SESSION['showAlert']); ?>" class="alert alert-success alert-dismissible mt-3">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><?php if (isset($_SESSION['message'])) {
echo $_SESSION['message'];
} unset($_SESSION['showAlert']); ?></strong>
</div>
<div class="table-responsive mt-2">
<table class="table table-bordered table-striped text-center">
<thead>
<tr>
<td colspan="7">
<h4 class="text-center text-info m-0">Products in your cart!</h4>
</td>
</tr>
<tr>
<th>ID</th>
<th>Image</th>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
<th>
<a href="action.php?clear=all" class="badge-danger badge p-1" onclick="return confirm('Are you sure want to clear your cart?');"><i class="fas fa-trash"></i> Clear Cart</a>
</th>
</tr>
</thead>
<tbody>
<?php
require 'config.php';
$stmt = $conn->prepare('SELECT * FROM cart');
$stmt->execute();
$result = $stmt->get_result();
$grand_total = 0;
while ($row = $result->fetch_assoc()):
?>
<tr>
<td><?php echo $row['id']; ?></td>
<input type="hidden" class="pid" value="<?php echo $row['id']; ?>">
<td><img src="<?php echo $row['product_image']; ?>" width="50"></td>
<td><?php echo $row['product_name']; ?></td>
<td><?php echo number_format($row['product_price'],2); ?></td>
<input type="hidden" class="pprice" value="<?php echo $row['product_price'];?>">
<td><input type="number" class="form-control itemQty" value="<?php echo $row['qty']; ?>" style="width:75px;"></td>
<td><?php echo number_format($row['total_price'],2); ?></td>
<td>
<a href="action.php?remove=<?php echo $row['id']; ?>" class="text-danger lead" onclick="return confirm('Are you sure want to remove this item?');"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
<?php $grand_total += $row['total_price']; ?>
<?php endwhile; ?>
<tr>
<td colspan="3">
<a href="index.php" class="btn btn-success"><i class="fas fa-cart-plus"></i> Continue Shopping</a>
</td>
<td colspan="2"><b>Grand Total</b></td>
<td><b><?php echo number_format($grand_total,2); ?></b></td>
<td>
<a href="checkout.php" class="btn btn-info <?php echo ($grand_total > 1) ? '' : 'disabled'; ?>"><i class="far fa-credit-card"></i> Checkout</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
checkout.php
//checkout.php
<?php
include 'header.php';
require 'config.php';
$grand_total = 0;
$allItems = '';
$items = [];
$sql = "SELECT CONCAT(product_name, '(',qty,')') AS ItemQty, total_price FROM cart";
$stmt = $conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
$grand_total += $row['total_price'];
$items[] = $row['ItemQty'];
}
$allItems = implode(', ', $items);
?>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 px-4 pb-4" id="order">
<h4 class="text-center text-success p-2">Complete your order!</h4>
<div class="jumbotron p-3 mb-2 text-center">
<h6 class="lead"><b>Product(s) : </b><?= $allItems; ?></h6>
<h6 class="lead"><b>Delivery Charge : </b>Free</h6>
<h5><b>Total Amount Payable : </b><?= number_format($grand_total,2) ?>/-</h5>
</div>
<form action="" method="post" id="placeOrder">
<input type="hidden" name="products" value="<?= $allItems; ?>">
<input type="hidden" name="grand_total" value="<?= $grand_total; ?>">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter Name" required>
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Enter E-Mail" required>
</div>
<div class="form-group">
<input type="tel" name="phone" class="form-control" placeholder="Enter Phone" required>
</div>
<div class="form-group">
<textarea name="address" class="form-control" rows="3" cols="10" placeholder="Enter Delivery Address Here..."></textarea>
</div>
<h6 class="text-center lead">Select Payment Mode</h6>
<div class="form-group">
<select name="pmode" class="form-control">
<option value="" selected disabled>-Select Payment Mode-</option>
<option value="cod">Cash On Delivery</option>
<option value="netbanking">Net Banking</option>
<option value="cards">Debit/Credit Card</option>
</select>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Place Order" class="btn btn-success btn-block">
</div>
</form>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
details.php
//details.php
<?php include 'header.php'; ?>
<div class="container">
<p><h1>PHP MySQLi Shopping Cart Using Jquery Ajax</h1></p>
<div id="message"></div>
<div class="row mt-2 pb-3">
<?php
include 'config.php';
$id = $_GET['item'];
$stmt = $conn->prepare('SELECT * FROM product WHERE id=?');
$stmt->bind_param('i',$id);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()):
?>
<div class="col-sm-4">
<img src="<?php echo $row['product_image']; ?>">
</div>
<div class="col-sm-8">
<form action="" class="form-submit">
<h4 class="card-title text-info"><?php echo $row['product_name']; ?></h4>
<h5 class="card-text text-danger"> <?php echo number_format($row['product_price'],2); ?></h5>
<div class="row p-2">
<div class="col-md-6 py-1 pl-4">
<b>Quantity : </b>
</div>
<div class="col-md-6">
<input type="number" class="form-control pqty" value="<?php echo $row['product_qty']; ?>">
</div>
</div>
<input type="hidden" class="pid" value="<?php echo $row['id']; ?>">
<input type="hidden" class="pname" value="<?php echo $row['product_name']; ?>">
<input type="hidden" class="pprice" value="<?php echo $row['product_price']; ?>">
<input type="hidden" class="pimage" value="<?php echo $row['product_image']; ?>">
<input type="hidden" class="pcode" value="<?php echo $row['product_code']; ?>">
<button class="btn btn-primary btn-block addItemBtn"><i class="fas fa-cart-plus"></i> Add to cart</button>
</form>
<p><h5>Product Specifications</h5></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
<?php endwhile; ?>
</div>
</div>
<?php include 'footer.php'; ?>
action.php
//action.php
<?php
session_start();
require 'config.php';
if (isset($_POST['pid'])) {
$pid = $_POST['pid'];
$pname = $_POST['pname'];
$pprice = $_POST['pprice'];
$pimage = $_POST['pimage'];
$pcode = $_POST['pcode'];
$pqty = $_POST['pqty'];
$total_price = $pprice * $pqty;
$stmt = $conn->prepare('SELECT product_code FROM cart WHERE product_code=?');
$stmt->bind_param('s',$pcode);
$stmt->execute();
$res = $stmt->get_result();
$r = $res->fetch_assoc();
$code = $r['product_code'] ?? '';
if (!$code) {
$query = $conn->prepare('INSERT INTO cart (product_name,product_price,product_image,qty,total_price,product_code) VALUES (?,?,?,?,?,?)');
$query->bind_param('ssssss',$pname,$pprice,$pimage,$pqty,$total_price,$pcode);
$query->execute();
echo '<div class="alert alert-success alert-dismissible mt-2">
<strong>Item added to your cart!</strong>
</div>';
} else {
echo '<div class="alert alert-danger alert-dismissible mt-2">
<strong>Item already added to your cart!</strong>
</div>';
}
}
// Get no.of items available in the cart table
if (isset($_GET['cartItem']) && isset($_GET['cartItem']) == 'cart_item') {
$stmt = $conn->prepare('SELECT * FROM cart');
$stmt->execute();
$stmt->store_result();
$rows = $stmt->num_rows;
echo $rows;
}
// Remove single items from cart
if (isset($_GET['remove'])) {
$id = $_GET['remove'];
$stmt = $conn->prepare('DELETE FROM cart WHERE id=?');
$stmt->bind_param('i',$id);
$stmt->execute();
$_SESSION['showAlert'] = 'block';
$_SESSION['message'] = 'Item removed from the cart!';
header('location:cart.php');
}
// Remove all items at once from cart
if (isset($_GET['clear'])) {
$stmt = $conn->prepare('DELETE FROM cart');
$stmt->execute();
$_SESSION['showAlert'] = 'block';
$_SESSION['message'] = 'All Item removed from the cart!';
header('location:cart.php');
}
// Checkout and save customer info in the orders table
if (isset($_POST['action']) && isset($_POST['action']) == 'order') {
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$products = $_POST['products'];
$grand_total = $_POST['grand_total'];
$address = $_POST['address'];
$pmode = $_POST['pmode'];
$data = '';
$stmt = $conn->prepare('INSERT INTO orders (name,email,phone,address,pmode,products,amount_paid)VALUES(?,?,?,?,?,?,?)');
$stmt->bind_param('sssssss',$name,$email,$phone,$address,$pmode,$products,$grand_total);
$stmt->execute();
$stmt2 = $conn->prepare('DELETE FROM cart');
$stmt2->execute();
$data .= '<div class="text-center">
<h1 class="display-4 mt-2 text-success">Thank You!</h1>
<h2 class="text-success">Your Order Placed Successfully!</h2>
<h4 class="bg-success text-light rounded p-2">Items Purchased : ' . $products . '</h4>
<h4>Your Name : ' . $name . '</h4>
<h4>Your E-mail : ' . $email . '</h4>
<h4>Your Phone : ' . $phone . '</h4>
<h4>Total Amount Paid : ' . number_format($grand_total,2) . '</h4>
<h4>Payment Mode : ' . $pmode . '</h4>
</div>';
echo $data;
}
?>
update.php
//update.php
<?php
session_start();
require 'config.php';
// Set total price of the product in the cart table
if (isset($_POST['qty'])) {
$qty = $_POST['qty'];
$pid = $_POST['pid'];
$pprice = $_POST['pprice'];
$tprice = $qty * $pprice;
$stmt = $conn->prepare('UPDATE cart SET qty=?, total_price=? WHERE id=?');
$stmt->bind_param('isi',$qty,$tprice,$pid);
$stmt->execute();
}
?>
script.js
//script.js
$(document).ready(function() {
$(".addItemBtn").click(function(e) {
e.preventDefault();
var $form = $(this).closest(".form-submit");
var pid = $form.find(".pid").val();
var pname = $form.find(".pname").val();
var pprice = $form.find(".pprice").val();
var pimage = $form.find(".pimage").val();
var pcode = $form.find(".pcode").val();
var pqty = $form.find(".pqty").val();
$.ajax({
url: 'action.php',
method: 'post',
data: {
pid: pid,
pname: pname,
pprice: pprice,
pqty: pqty,
pimage: pimage,
pcode: pcode
},
success: function(response) {
$("#message").html(response);
window.scrollTo(0, 0);
load_cart_item_number();
}
});
});
// Change the item quantity
$(".itemQty").on('change', function() {
var $el = $(this).closest('tr');
var pid = $el.find(".pid").val();
var pprice = $el.find(".pprice").val();
var qty = $el.find(".itemQty").val(); //alert(qty);
//location.reload(true);
$.ajax({
url: 'update.php',
method: 'post',
cache: false,
data: {
qty: qty,
pid: pid,
pprice: pprice
},
success: function(response) {
console.log(response);
location.reload(true);
}
});
});
$("#placeOrder").submit(function(e) {
e.preventDefault();
$.ajax({
url: 'action.php',
method: 'post',
data: $('form').serialize() + "&action=order",
success: function(response) {
$("#order").html(response);
}
});
});
// Load total no.of items added in the cart and display in the navbar
load_cart_item_number();
function load_cart_item_number() {
$.ajax({
url: 'action.php',
method: 'get',
data: {
cartItem: "cart_item"
},
success: function(response) {
$("#cart-item").html(response);
}
});
}
});
