03-Apr-2023
.
Admin
Hi friends,
In this post, we will learn How to Make a add to cart in ajax PHP. i explained simply step by step How To Use add to cart using Ajax in PHP & MySQL. Here you will learn how to add to cart to database Using ajax. This tutorial will give you simple example of ajax add to cart php mysql Code Example.
I will give you simple Example of How to make a ajax add to cart in PHP.
So let's see bellow example:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
.content{
background-color: #ccc;
height: 70%;
}
.content img{
height: 100% !important;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="card mt-2">
<div class="card-header">
<center>
<h3>PHP Mysql Ajax Add To Cart Example</h3>
<center><span id="error" class="text-danger"></span></center>
</center>
<?php
$conn = mysqli_connect("localhost","root","root","cart_data");
$query = "SELECT * FROM post";
$result = mysqli_query($conn,$query);
?>
</div>
<div class="card-body">
<div id="cart-data">
</div>
<center>
<h3 style="background: #ccc;">Cart Table</h3>
</center>
<div id="table-data">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function lodetable(){
$.ajax({
url : 'cart_data_select.php',
type : 'GET',
success : function(data) {
$('#table-data').html(data);
}
});
}
lodetable();
function lodeCartData(){
$.ajax({
url : 'cart_data.php',
type : 'GET',
success : function(data) {
$('#cart-data').html(data);
}
});
}
lodeCartData();
$(document).on("click","#add",function(e){
e.preventDefault();
var id = $(this).data('id');
$.ajax({
url : 'cart_data_insert.php',
type : 'POST',
data : {cart_id:id},
success : function(data) {
lodetable();
$("#error").text(data);
}
});
});
$(document).on("click","#remove",function(e){
e.preventDefault();
var id = $(this).data('id');
$.ajax({
url : 'cart_data_delete.php',
type : 'POST',
data : {cart_id:id},
success : function(data) {
lodetable();
alert("Data Deleted Successfully");
}
});
});
});
</script>
</body>
</html>
cart_data_select.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<?php
$conn = mysqli_connect("localhost","root","root","cart_data");
$query = "SELECT * FROM cart";
$result = mysqli_query($conn,$query);
?>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_assoc($result)){ ?>
<tr>
<th scope="row"><?php echo $row['id']; ?></th>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['price']; ?></td>
<td><button class="btn btn-danger btn-sm" data-id="<?php echo $row['post_id']; ?>" id="remove">Remove</button></td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>
cart_data.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<?php
$conn = mysqli_connect("localhost","root","root","cart_data");
$query = "SELECT * FROM post";
$result = mysqli_query($conn,$query);
?>
<div class="row">
<?php while($row = mysqli_fetch_assoc($result)){ ?>
<div class="col-md-4">
<div class="content">
<img src="image/<?php echo $row['image']; ?>">
<center><span style="font-size: 20px; color: orange;" class="mb-1">Item : <?php echo $row['name']; ?></span></center>
<center><p style="font-size: 20px;" class="mb-1">Price : <?php echo $row['price']; ?> Rs</p></center>
<center><button class="btn btn-info btn-sm mb-2" id="add" data-id="<?php echo $row['id']; ?>">Add To Cart</button></center>
</div>
</div>
<?php } ?>
</div>
</body>
</html>
cart_data_insert.php
<?php
$conn = mysqli_connect("localhost","root","root","cart_data");
$cartId = $_POST['cart_id'];
$query = "SELECT * FROM post WHERE id='$cartId'";
$result = mysqli_query($conn,$query);
$row = mysqli_fetch_assoc($result);
$postId = $row['id'];
$name = $row['name'];
$price = $row['price'];
$que = "INSERT INTO cart(post_id,name,price) VALUES ('$postId','$name','$price')";
$res = mysqli_query($conn,$que);
// Make name field unique In database table to cheak this condition
if($res != true){
echo "This ".$name." "."Is Already In Your Cart";
}
?>
cart_data_delete.php
<?php
$conn = mysqli_connect("localhost","root","root","cart_data");
$cartId = $_POST['cart_id'];
$que = "DELETE FROM cart WHERE post_id='$cartId'";
$res = mysqli_query($conn,$que);
?>
Output:
I hope it will help you....
#PHP