Simple Add To Cart System Using jQuery,Ajax And PHP

Last Updated : Jul 1, 2023

IN - jQuery Ajax PHP | Written & Updated By - Dikshita

In this tutorial we will create a simple but very Practical and helpful Cart System that you can include in your ecommerce website.

Cart System is very important in online shopping websites anything the user wants or wish he can click on a simple button and automatically that item is included in your cart.

Cart is like a collection of items that user wants to buy.It has the total record of items the user wants before the final payment.

You may also like drag and drop shopping cart using ajax and PHP.

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Make a Cart System it takes only Three steps:-

Make a HTML file and define markup and script for Cart System
Make a PHP file for storing and retrieving items from Cart System
Make a CSS file and define styling for Cart System

Step 1. Make a HTML file and define markup and script for Cart System

We make a HTML file and save it with a name cart.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="cart_style.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){

      $.ajax({
        type:'post',
        url:'store_items.php',
        data:{
          total_cart_items:"totalitems"
        },
        success:function(response) {
          document.getElementById("total_items").value=response;
        }
      });

    });

    function cart(id)
    {
	  var ele=document.getElementById(id);
	  var img_src=ele.getElementsByTagName("img")[0].src;
	  var name=document.getElementById(id+"_name").value;
	  var price=document.getElementById(id+"_price").value;
	
	  $.ajax({
        type:'post',
        url:'store_items.php',
        data:{
          item_src:img_src,
          item_name:name,
          item_price:price
        },
        success:function(response) {
          document.getElementById("total_items").value=response;
        }
      });
	
    }

    function show_cart()
    {
      $.ajax({
      type:'post',
      url:'store_items.php',
      data:{
        showcart:"cart"
      },
      success:function(response) {
        document.getElementById("mycart").innerHTML=response;
        $("#mycart").slideToggle();
      }
     });

    }
	
</script>
  
</head>

<body>

<p id="cart_button" onclick="show_cart();">
  <img src="cart_icon.png">
  <input type="button" id="total_items" value="">
</p>

<div id="mycart">
</div>

<h1>Simple Add To Cart System Using jQuery,Ajax And PHP</h1>

<div id="item_div">

  <div class="items" id="item1">
    <img src="product1.jpg">
    <input type="button" value="Add To CART" onclick="cart('item1')">
    <p>Simple Navy Blue T-Shirt</p>
    <p>Price - $95</p>
    <input type="hidden" id="item1_name" value="Simple Navy Blue T-Shirt">
    <input type="hidden" id="item1_price" value="$95">
  </div>

  <div class="items" id="item2">
    <img src="product2.jpg">
    <input type="button" value="Add To CART" onclick="cart('item2')">
    <p>Trendy T-Shirt With Back Design</p>
    <p>Price - $105</p>
    <input type="hidden" id="item2_name" value="Trendy T-Shirt With Back Design">
    <input type="hidden" id="item2_price" value="$105">
  </div>
  
  <div class="items" id="item3">
    <img src="product3.jpg">
    <input type="button" value="Add To CART" onclick="cart('item3')">
    <p>Two Color Half-Sleeves T-Shirt</p>
    <p>Price - $120</p>
    <input type="hidden" id="item3_name" value="Two Color Half-Sleeves T-Shirt">
    <input type="hidden" id="item3_price" value="$120">
  </div>

  <div class="items" id="item4">
    <img src="product4.jpg">
    <input type="button" value="Add To CART" onclick="cart('item4')">
    <p>Stylish Grey Chinos For Mens</p>
    <p>Price - $140</p>
    <input type="hidden" id="item4_name" value="Stylish Grey Chinos For Mens">
    <input type="hidden" id="item4_price" value="$140">
  </div>

  <div class="items" id="item5">
    <img src="product5.jpg">
    <input type="button" value="Add To CART" onclick="cart('item5')">
    <p>Comfortable Pants For Working</p>
    <p>Price - $130</p>
    <input type="hidden" id="item5_name" value="Comfortable Pants For Working">
    <input type="hidden" id="item5_price" value="$130">
  </div>

  <div class="items" id="item6">
    <img src="product6.jpg">
    <input type="button" value="Add To CART" onclick="cart('item6')">
    <p>Slim Track Pant For Jogging</p>
    <p>Price - $90</p>
    <input type="hidden" id="item6_name" value="Slim Track Pant For Jogging">
    <input type="hidden" id="item6_price" value="$90">
  </div>

</div>

</body>
</html>

In this step we create 6 sample items to add in cart.And we made two functions to add items in cart and to display all the items in a cart whenever the user clicks on a cart button.

The first function cart(id) when user clicks on any item this function calls gets the id of that item create a ajax request and send the data to store_items.php to store items.

The Second function show_cart() is used to display the cart whenever user clicks on a cart icon this function makes an ajax request and get the items user added in cart and then display all the items.

We also create an ajax request after page loading to get the total items in cart just to tell the user how many items he added in cart.

You can view our star rating system using PHP and add product rating system.

Step 2. Make a PHP file for storing and retrieving items from Cart System

We make a PHP file named store_items.php

<?php
  session_start();

  if(isset($_POST['total_cart_items']))
  {
	echo count($_SESSION['name']);
	exit();
  }

  if(isset($_POST['item_src']))
  {
    $_SESSION['name'][]=$_POST['item_name'];
    $_SESSION['price'][]=$_POST['item_price'];
    $_SESSION['src'][]=$_POST['item_src'];
    echo count($_SESSION['name']);
    exit();
  }

  if(isset($_POST['showcart']))
  {
    for($i=0;$i<count($_SESSION['src']);$i++)
    {
      echo "<div class='cart_items'>";
      echo "<img src='".$_SESSION['src'][$i]."'>";
      echo "<p>".$_SESSION['name'][$i]."</p>";
      echo "<p>".$_SESSION['price'][$i]."</p>";
      echo "</div>";
    }
    exit();	
  }
?>

In this step we create three isset parts that store and send the data to ajax request.first one is to count the total no of items in cart.

Second one is to store the items in session you can use cookies also or you can store in database but session is the best way to store cart items.Third one is to display all the items present in cart.

Step 3. Make a CSS file and define styling for Cart System

We make a CSS file and save it with name cart_style.css.

body
{
	background-color:#E6E6E6;
	font-family:helvetica;
	margin:0px auto;
	padding:0px;
}
#cart_button
{
	margin-top:20px;
	margin-left:80px;
	cursor:pointer;
}
#cart_button img
{
	width:40px;
	height:40px;
}
#cart_button input[type="button"]
{
	background:none;
	border:none;
	background-color:red;
	border-radius:100%;
	height:30px;
	width:30px;
	margin-top:0px;
	color:white;
	font-size:17px;
	cursor:pointer;
}
#mycart
{
	display:none;
	background-color:white;
	width:800px;
	margin-left:100px;
}
#mycart .cart_items
{
	border-bottom:1px dashed silver;
	padding:20px;
	padding-left:10px;
}
#mycart .cart_items img
{
	width:70px;
	height:50px;
	float:left;
}
#mycart .cart_items p
{
	margin:0px;
	font-size:17px;
	color:green;
}
h1
{
	margin-top:100px;
	color:green;
	text-align:center;
}
#item_div
{
	float:left;
	margin-left:60px;
}
.items
{
	padding:20px;
	background-color:white;
	width:250px;
	height:350px;
	margin-top:20px;
	box-shadow:0px 0px 10px 0px #A4A4A4;
	box-sizing:border-box;
	float:left;
	margin:20px;
	position:relative;
}
.items:hover input[type="button"]
{
	display:block;
}
.items input[type="button"]
{
	display:none;
	background:none;
	background-color:#3ADF00;
	width:200px;
	height:50px;
	border:none;
	font-size:20px;
	color:white;
	position:absolute;
	top:150px;
	left:25px;
	cursor:pointer;
}
.items img
{
	width:200px;
	height:200px;
}
.items p
{
	color: green;
}

Thats all, this is how to create a simple add to cart system using PHP,jQuery and Ajax. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on shopping cart in php using jquery and ajax helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪