How To Make Online Shopping Cart Using PHP MySQL Ajax, How to make online shopping cart, How to make php ajax shopping cart, Online shopping cart tutorial, php mysql shopping cart, Shopping cart using session, Shopping cart, Online shopping tutorial, How to make shopping cart using php and ajax,php and ajax shopping cart demo, Shopping cart demo
Cart.sql
— Database: `cart`
—
CREATE DATABASE IF NOT EXISTS `cart` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `cart`;
— ——————————————————–
—
— Table structure for table `product`
—
CREATE TABLE IF NOT EXISTS `product` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`pro_image` text NOT NULL,
`name` varchar(200) NOT NULL,
`price` varchar(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;
—
— Dumping data for table `product`
—
INSERT INTO `product` (`id`, `pro_image`, `name`, `price`) VALUES
(1, ‘1.png’, ‘Mi 4i (Grey, 32 GB)’, ‘20000’),
(2, ‘4.png’, ‘Samsung Galaxy J7 (Gold, 16 GB)’, ‘12657’),
(3, ‘2.png’, ‘Samsung Tab’, ‘26779’),
(4, ‘7.png’, ‘Nokia 5233’, ‘6500’),
(5, ‘5.png’, ‘Microsoft Lumia 950’, ‘12000’),
(6, ‘3.png’, ‘Mi Tab’, ‘15000’),
(7, ‘8.png’, ‘Sandisk Memory Card’, ‘345’),
(8, ‘6.png’, ‘Unitech Digital Laser Distance Meter’, ‘4500’)
head.php
<?php
include(‘config.php’);
session_start();
?>
<div id=”headdown”>
<div class=”logo”><a href=”index.php”>Logo</a></div>
<div class=”srbox”>
<div class=”bk”>
<input type=”text” name=”qu” id=”qu” class=”textbox” placeholder=”What are you looking for ?” tabindex=”1″>
<button type=”submit” class=”query-submit” tabindex=”2″><i class=”fa fa-search” style=”color:#727272; font-size:20px”></i></button>
</div>
</div>
<div class=”acount”>
<div class=”aclogo”><i class=”fa fa-user” style=”color:#fff; font-size:15px; margin-top:2px”></i></div>
<div class=”actext”>My Account</div>
</div>
<a href=”cart.php”><div class=”cart”>
<i class=”fa fa-shopping-cart”></i>
<p class=”cart-e”>Cart</p>
<p class=”cart-f”>
<?php
if(isset($_SESSION[“cartshop”])){
$s=count($_SESSION[“cartshop”]);
}
else{
$s=0;
}
echo $s;
?>
</p>
</div></a>
</div>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block; text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-7013552742369373″
data-ad-slot=”5323679646″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Clear-Session.php
<?php
$db_host=’localhost’;
$db_user=’root’;
$db_pwd=”;
$database=’cart’;
if(!mysql_connect($db_host,$db_user,$db_pwd))
die(“can’t Connect to Database”);
if(!mysql_select_db($database))
die(“can’t Select Database”);
session_start();
session_destroy();
header(‘Location: ‘ . $_SERVER[‘HTTP_REFERER’]);
exit();
?>
To View Product On Next Page:
View.php
<!doctype html>
<html>
<head>
<?php
include(‘config.php’);
$productid=$_GET[‘product’];
?>
<meta charset=”utf-8″>
<title>View Product <?=$productid?></title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css”>
<link href=”https://fonts.googleapis.com/css?family=Roboto+Condensed|Rubik” rel=”stylesheet”>
<style>
#undr{width:100%; height:580px; position:absolute; top:75px; left:0px;}
.bdimg{width:100%; height:100%}
.big-outer{ width:80%; height:100%; background:rgba(255,255,255,0.7); margin:auto}
.big-outer p{text-align:center; font-size:40px; margin:10px auto}
.outer{ width:270px; height:310px; margin:auto;}
.outer img {width:88% !important;}
.price{text-align:center; margin:20px auto; background:#16B472; color:#fff; width:30%; padding:5px 0px;}
.price p{margin:0px; font-size:26px;}
.buy{text-align:center; margin:20px auto; background:#3E8BDC; width:34%; padding:5px 0px; cursor:pointer}
.buy:hover{ background:#2E5AE4;transition:all 0.4s ease-in-out}
#subaz{border:none; background-color:transparent; font-size:32px; color:#fff; font-weight:bold; cursor:pointer}
</style>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
</head>
<body>
<header>
<?php
include(‘head.php’);
?>
</header>
<div id=”undr”>
<img class=”bdimg” src=”bg.jpg”>
</div>
<?php
$select_query=”select * from product where id=’$productid'”;
$sql=mysql_query($select_query) or die (mysql_error());
$row=mysql_fetch_array($sql);
?>
<form id=”form1″ name=”form1″ method=”post” action=”cart.php”>
<input type=”hidden” name=”pid” id=”pid” value=”<?= $productid ?>” />
<div id=”lowrbdy”>
<div class=”big-outer”>
<div class=”outer”>
<img src=”imeg/<?=$row[“pro_image”]?>”/>
</div>
<p><?=$row[“name”]?></p>
<div class=”price”><p>Rs. <?=$row[“price”]?>/-</p></div>
<div class=”buy”><input type=”submit” id=”subaz” value=”Buy Now”/></div>
</div>
</div>
</form>
</body>
</html>
Cart.php
<!doctype html>
<html>
<head>
<?php
include(‘config.php’);
$productid=$_GET[‘product’];
?>
<meta charset=”utf-8″>
<title>Cart</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css”>
<link href=”https://fonts.googleapis.com/css?family=Roboto+Condensed|Rubik” rel=”stylesheet”>
<style>
#undr{width:100%; height:580px; position:absolute; top:75px; left:0px;}
.bdimg{width:100%; height:100%}
.big-outer{ width:80%; height:100%; background:rgba(255,255,255,0.7); margin:auto}
.big-outer p{ font-size:60px; text-align:center; margin:0px;}
.upper-details{background:#EFEFEF;}
.upper-details td{text-align:center;}
td{text-align: center;}
#emptycart{font-size:20px;margin-bottom:15px;color:#111; float:right}
#emptycart:hover{ color:#fff}
</style>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
</head>
<body>
<header>
<?php
include(‘head.php’);
?>
</header>
<div id=”undr”>
<img class=”bdimg” src=”bg.jpg”>
</div>
<?php
if (isset($_POST[‘pid’])) {
$pid = $_POST[‘pid’];
$wasFound = false;
$i = 0;
if (!isset($_SESSION[“cartshop”]) || count($_SESSION[“cartshop”]) < 1) {
$_SESSION[“cartshop”] = array(0 => array(“item_id” => $pid, “quantity” => 1));
} else {
foreach ($_SESSION[“cartshop”] as $each_item) {
$i++;
while (list($key, $value) = each($each_item)) {
if ($key == “item_id” && $value == $pid) {
array_splice($_SESSION[“cartshop”], $i-1, 1, array(array(“item_id” => $pid, “quantity” => $each_item[‘quantity’] + 1)));
$wasFound = true;
}
}
}
if ($wasFound == false) {
array_push($_SESSION[“cartshop”], array(“item_id” => $pid, “quantity” => 1));
}
}
header(“location: cart.php”);
exit();
}
?>
<?php
if (isset($_GET[‘cmd’]) && $_GET[‘cmd’] == “emptycart”) {
unset($_SESSION[“cartshop”]);
}
?>
<?php
if (isset($_POST[‘item_to_adjust’]) && $_POST[‘item_to_adjust’] != “”) {
$item_to_adjust = $_POST[‘item_to_adjust’];
$quantity = $_POST[‘quantity’];
$quantity = preg_replace(‘#[^0-9]#i’, ”, $quantity);
if ($quantity >= 11) { $quantity = 10; }
if ($quantity < 1) { $quantity = 1; }
if ($quantity == “”) { $quantity = 1; }
$i = 0;
foreach ($_SESSION[“cartshop”] as $each_item) {
$i++;
while (list($key, $value) = each($each_item)) {
if ($key == “item_id” && $value == $item_to_adjust) {
array_splice($_SESSION[“cartshop”], $i-1, 1, array(array(“item_id” => $item_to_adjust, “quantity” => $quantity)));
}
}
}
}
?>
<?php
if (isset($_POST[‘index_to_remove’]) && $_POST[‘index_to_remove’] != “”) {
$key_to_remove = $_POST[‘index_to_remove’];
if (count($_SESSION[“cartshop”]) <= 1) {
unset($_SESSION[“cartshop”]);
header(‘Location: ‘ . $_SERVER[‘HTTP_REFERER’]);
} else {
unset($_SESSION[“cartshop”][“$key_to_remove”]);
sort($_SESSION[“cartshop”]);
header(‘Location: ‘ . $_SERVER[‘HTTP_REFERER’]);
}
}
?>
<div id=”lowrbdy”>
<div class=”big-outer”>
<p style=”text-decoration:underline”>Cart</p>
<table width=”100%” border=”0″ style=”border-collapse:collapse”>
<?php
if(isset($_SESSION[‘cartshop’])==!NULL){
?>
<tbody>
<tr class=”upper-details”>
<td height=”36″ colspan=”2″ style=”border-right: 1px solid #000;”>Item</td>
<td width=”16%” style=”border-right: 1px solid #000;”>Quantity</td>
<td width=”16%” style=”border-right: 1px solid #000;”>Unit Price</td>
<td width=”21%”>Sub Total</td>
</tr>
<?php
}
?>
<?php
$cartTotal = “”;
if (!isset($_SESSION[“cartshop”]) || count($_SESSION[“cartshop”]) < 1) {
echo ‘<div class=”empty-cart”><h2 class=”crta”>Your Shopping Cart Is Empty</h2>’;
echo ‘<br><a href=”index.php”><h2 class=”alink”>Continue Shopping</h2></a></div>’;
} else {
$i = 0;
foreach ($_SESSION[“cartshop”] as $each_item) {
$item_id = $each_item[‘item_id’];
$sql = mysql_query(“SELECT * FROM product WHERE id=’$item_id’ LIMIT 1”);
while ($row = mysql_fetch_array($sql)) {
$productname = $row[“name”];
$producttotalprice = $row[“price”];
$productcode = $row[“id”];
$pic=$row[‘pro_image’];
$pdelc=$row[‘pdelc’];
$pr=$row[‘price’];
}
$producttotalpricetotal = $producttotalprice * $each_item[‘quantity’];
$cartTotal = $producttotalpricetotal + $cartTotal;
echo'<tr>
<td width=”7%” rowspan=”3″ style=”border-bottom: 2px solid #000; height:100px”><img src=”imeg/’.$pic.'”/></td>
<td width=”29%” height=”21″ style=”border-right: 1px solid #000;”> </td>
<td rowspan=”2″ style=”border-right: 1px solid #000;”>
<form action=”cart.php” method=”post”>
<input name=”quantity” id=”quantity” type=”text” value=”‘ . $each_item[‘quantity’] . ‘” size=”1″ maxlength=”2″ class=”qnttxt”/></br>
<input id=”adjustBtn” name=”adjustBtn’ . $item_id . ‘” type=”submit” value=”Update” class=”qntbtn”/>
<input name=”item_to_adjust” type=”hidden” value=”‘ . $item_id . ‘” />
</form>
</td>
<td style=”border-right: 1px solid #000;”> </td>
<td> </td>
</tr>
<tr style=”border-bottom: 2px solid #000;”>
<td style=”border-right: 1px solid #000;”>’.$productname.'</td>
<td style=”border-right: 1px solid #000;”>Rs. ‘.number_format($producttotalprice).'</td>
<td><p style=”float:left;margin:0px 0px 0px 20px;font-size:18px;text-decoration:none”>Rs. ‘.number_format($producttotalprice*$each_item[‘quantity’]).'</p>
<form action=”cart.php” method=”post”>
<input name=”deleteBtn’ . $item_id . ‘” type=”submit” value=”X” class=”removebtn”/>
<input name=”index_to_remove” type=”hidden” value=”‘ . $i . ‘” />
</form>
</td>
</tr>
<tr>’;
$i++;
}
echo'<div style=”width:400px; height:40px; background:rgba(100,190,255,1.00); margin:auto; margin-bottom:6px;margin-top:10px”>
<p style=”font-size:20px;text-align:center; color:#fff; line-height:2em”>Cart Total: <strong>Rs. ‘.number_format($cartTotal).’ /-</strong></p></div>
<a href=”clear-session.php”><div style=”width:55%; height:22px;”><p id=”emptycart”>( Empty Cart )</p></div></a>
‘;
}
?>
</tbody>
</table>
</div>
</div>
</body>
</html>
Index.php
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Add to Cart</title>
<?php
include(‘config.php’);
?>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css”>
<link href=”https://fonts.googleapis.com/css?family=Roboto+Condensed|Rubik” rel=”stylesheet”>
<style>
a{text-decoration:none; color:inherit}
#undr{width:100%; height:580px; position:absolute; top:75px; left:0px;}
.bdimg{width:100%; height:100%}
#lowrbdy{ position:absolute; top:90px; left:0px;width:100%; height:100px}
.outer{width:270px; height:270px; background:rgba(255,255,255,0.8); float:left; margin-left:55px; margin-bottom:10px}
.imgdv{width:100px;height:140px;margin:10px auto;}
.imgdv img{width:100%; height:100%}
.pname{ text-align:center; width:100%; height:20px; font-size:15px; margin-top:-14px; margin-bottom:10px}
.prs{ text-align:center; font-size:24px; margin:0px}
.butndv{width:140px; height:40px; margin:auto; margin-top:-10px}
.butn{width:100%; height:100%; background:rgba(78,172,240,1.00); border:none; color:#fff; font-size:18px; border-radius:6px}
.outer:hover{ background:#fff}
.outer:hover .butn{ background:#4A7FDC; transition:all 0.2s ease-in-out; cursor:pointer}
</style>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
</head>
<body>
<header>
<?php
include(‘head.php’);
?>
</header>
<div id=”undr”>
<img class=”bdimg” src=”bg.jpg”>
</div>
<div id=”lowrbdy”>
<?php
$select_query=”select * from product”;
$sql=mysql_query($select_query) or die (mysql_error());
while($row=mysql_fetch_array($sql))
{
?>
<a href=”view.php?product=<?=$row[“id”]?>”>
<div class=”outer”>
<div class=”imgdv”><img src=”imeg/<?=$row[“pro_image”]?>”/></div>
<div class=”pname”><?=$row[“name”]?></div>
<p class=”prs”>Rs. <?=$row[“price”]?>/-</p></br>
<div class=”butndv”><input type=”button” value=”Buy Now” class=”butn”></div>
</div>
</a>
<?php
}
?>
</div>
</body>
</html>
Config.php
<?php
$db_host=’localhost’;
$db_user=’root’;
$db_pwd=”;
$database=’cart’;
if(!mysql_connect($db_host,$db_user,$db_pwd))
die(“can’t Connect to Database”);
if(!mysql_select_db($database))
die(“can’t Select Database”);
?>
Style.css
@charset “utf-8”;
/* CSS Document */
body{
font-family: ‘Rubik’, sans-serif;
background:#222;
}
a{ text-decoration:none}
/***********************************/
#lowrbdy{
width:100%;
height:581px;
position:absolute;
top:74px;
left:0px;
}
#lowrbdy img{
width:100%;
height:100%;
}
/***********************************/
header{
width:100%;
height:auto;
background:#0071b4;
box-shadow:0px 0px 8px 2px #333;
position:fixed;
z-index:99999;
top:0px;
left:0px;
}
/***********************************/
.logo{
width:181px;
height:61px;
position:relative;
top:5px;
left:10px;
float:left;
}
.logo a{
text-decoration:none;
color:#fff;
font-size:60px;
margin:0px 20px;
line-height:0.9em;
}
/***********************************/
.srbox{
width:580px;
height:70px;
float:left;
margin-left:120px;
margin-top:4px;
}
.textbox{
border-radius: 8px 0px 0px 8px;
background-color:#fff;
float:left;
border:none;
height:40px;
padding:1px 12px;
font-size:15px;
line-height: 1.42857;
color:#000;
width:450px;
margin-top:13px;
}
.query-submit{
border-radius: 0px 8px 8px 0px;
cursor:pointer;
background:#fbfbfb;
width:85px;
padding:1px 6px;
float:left;
border:none;
margin-top:13px;
height:42px;
}
/***********************************/
.acount{
width:170px;
height:30px;
float:left;
margin-top:27px;
margin-left:40px;
}
.aclogo{
width:20px;
height:20px;
float:left;
border:2px solid #fff;
border-radius:50%;
text-align:center;
}
.actext{
width:100px;
float:left;
line-height:1.6em;
margin-left:8px;
font-size:15px;
color:#fff;
}
/***********************************/
.cart{
width:120px;
height:36px;
float:left;
border:2px solid #fff;
border-radius:40px;
margin-top:18px;
margin-left:40px;
}
.cart i{
line-height:1.6em;
color:#fff;
font-size:20px;
margin-left:10px;
float:left;
}
.cart-e{
color:#fff;
font-size:20px;
line-height:1.6em;
float:left;
margin:0px;
margin-left:10px;
}
.cart-f{
color:#000;
float:left;
background:#fff;
padding:2px 6px;
border-radius:50%;
margin:5px 0px 0px 11px;
font-size:16px;
line-height: normal;
}
/***********************************/
.crta{
padding:80px 0px;
background:#f6f6f6;
text-align:center; width:80%; margin:40px auto;
}
.alink{
padding:14px 0px;
background:#f93;
text-align:center; width:80%; margin:20px auto; color:#fff;
}
/*************************************/
.qnttxt{
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
box-shadow: 0px -5px 45px rgba(255, 255, 255, 0.2) inset, 0px 1px 1px rgba(255, 255, 255, 0.2);
color: #000;
padding: 6px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
width: 70px;
font-size: 15px;
font-family: “Roboto”,sans-serif;
text-align: center;
}
.qnttxt:active,.qnttxt:focus {
border-color: #66AFE9;
outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
}
.qntbtn{width:60px; height:26px; background:#777; border:none; color:#fff; border-radius:5px; cursor:pointer; margin-top:10px}
.removebtn{
color: #fff;
padding: 4px 6px;
text-align: center;
font-weight: bold;
border: none;
background: #DE0A0F;
border-radius: 50%;
cursor: pointer;
float:right;
margin-right:30px;
}
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block; text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-7013552742369373″
data-ad-slot=”5323679646″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Watch Tutorial: https://youtu.be/YyL5GNg8_ss
Download Project: https://drive.google.com/open?id=1HGLFkgmqI6ScHsSEiZukmVzDcX_QG4oA
Watch PHP Ajax Shopping Cart 2: https://youtu.be/EjzKAK3M1yI
Php Ajax Shopping Cart 2: https://www.ytsolution.in/online-shopping-cart-using-php-ajax-and-jquery/ [Add to cart without page refresh]
With ❤️ By: YT Solution YouTube Channel
