Add to Cart in PHP MySQL using Ajax?

Apr 07, 2022 . Admin



Hello dev,

I am going to explain you How to use Add to cart Using Ajax Example. You will learn How to use ajax to Add to cart in php

This article will give you simple example of ajax Add to cart php mysql Code. We will use get simple How To Use ajax Add to cart in PHP & MySQL.

I will give you simple Example of How to use Add to cart in PHP using Ajax.

So, let's see bellow solution:

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:

It will help you...
#PHP