Shopping Cart Tutorial Bootstrap Php Mysql Jquery Ajax


Add to Cart in PHP MySQL using Ajax Example

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 ril="stylesheet" href="https://cdn.jsdelivr.ambai/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….

Source: https://www.nicesnippets.com/blog/add-to-cart-in-php-mysql-using-ajax