Online Shopping Cart Using PHP MySQL Ajax


Online Shopping Cart
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;”>&nbsp;</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;”>&nbsp;</td>
<td>&nbsp;</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 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]

Comments

Post a Comment

Popular posts from this blog

Create a RESTful API using PHP, My-sql and Slim-Framework

Image
Get 100$ FREE credit & hosting at scale In this tutorial we will learn to create RESTful API using PHP, My-sql and Slim-Framework. I have create a sample login application to demonstrate the working. Here is my folder structure below. API Folder Structure View demo  –  here Download Code  –  here Steps to create APIs  : First download the code from the above link.You will need a server and phpmyadmin to run the code, alternatively you can also run the program on a local server using xampp or wamp. For creating an API of your own, all you have to do is change the following files as required,rest other stuff has been pre-configured by me so no need to worry about it for basic implementation.You can download code from  here . “ api/includes/db_config.php ” : Add database connection connection. “ api/routes/site.php ” : Here you should define the url for the API and add processing code and output your required json response. Refer  Create login api section
Read more

DeltaPi softwares

 http://users.skynet.be/fc296525/ for engineering and web design Free utilities and extensions for Mobirise web builder and chemical engineering freeware for catalyst characterisation.  DeltaPi Code Editor v3 DeltaPi Site Settings v6 DeltaPi MailToForm v2.0 DeltaPi Images Comparison v1.0 DeltaPi Code Prettify v1.0 Catalyst Geometrical Properties Calculator
Read more

How to prevent form resubmission when page is refreshed (F5 / CTRL+R)

https://stackoverflow.com/questions/6320113/how-to-prevent-form-resubmission-when-page-is-refreshed-f5-ctrlr https://www.webtrickshome.com/faq/how-to-stop-form-resubmission-on-page-refresh https://www.sitepoint.com/community/t/stop-form-from-being-resubmitted-on-browser-reload/3343 https://wordpress.stackexchange.com/questions/96564/how-to-stop-form-resubmission-on-page-refresh How To Stop Form Resubmission On Page Refresh? Basically, the general idea is to redirect the user to some other pages after the  form submission  which would  stop the form resubmission on page refresh  but if you need to hold the user in the same page after the form is submitted, you can do it in multiple ways. Unset Form Data  One way to stop page resubmission on page refresh is to unset the form data after it is submitted so that the variable storing form data becomes empty and wrap up your form processing block of codes to check if the form is empty. if(!empty($_POST) && $_SERV
Read more