E-commerce site from the scratch-part4

The way to display the products based on the product category, display the product of the wish list and transfer the product from the wish list to cart have been shown in this tutorial. You have to complete the part1, part2 and part3 of this project before starting this tutorial.

Step-1:

Create category.php inside the project folder and add the following content at the beginning of the file.

<?php
session_start();
error_reporting(0);
$message="";
include('includes/config.php');
$cid=intval($_GET['cid']);
if(isset($_GET['action']) && $_GET['action']=="add"){
$id=intval($_GET['id']);
if(isset($_SESSION['cart'][$id])){
$_SESSION['cart'][$id]['quantity']++;
}else{
$sql_p="SELECT * FROM products WHERE id={$id}";
$query_p=mysqli_query($con,$sql_p);
if(mysqli_num_rows($query_p)!=0){
$row_p=mysqli_fetch_array($query_p);
$_SESSION['cart'][$row_p['id']]=array("quantity" => 1, "price" => $row_p['productPrice']);
header('location:my-cart.php');
}else{
$message="Product ID is invalid";
}
}
}
if(isset($_GET['pid']) && $_GET['action']=="wishlist" ){
if(strlen($_SESSION['login'])==0)
{
header('location:login.php');
}
else
{
mysqli_query($con,"insert into wishlist(userId,productId) values('".$_SESSION['id']."','".$_GET['pid']."')");
$message='Product aaded in wishlist';
header('location:my-wishlist.php');
}
}
?>

Step-2:

Add the following content as the second part of the file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="MediaCenter, Template, eCommerce">
<meta name="robots" content="all">
<title>Product Category</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Customizable CSS -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/green.css">
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.transitions.css">
<!--<link rel="stylesheet" href="assets/css/owl.theme.css">-->
<link href="assets/css/lightbox.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/rateit.css">
<link rel="stylesheet" href="assets/css/bootstrap-select.min.css">

<link rel="stylesheet" href="assets/css/config.css">
<link href="assets/css/green.css" rel="alternate stylesheet" title="Green color">
<link href="assets/css/blue.css" rel="alternate stylesheet" title="Blue color">
<link href="assets/css/red.css" rel="alternate stylesheet" title="Red color">
<link href="assets/css/orange.css" rel="alternate stylesheet" title="Orange color">
<link href="assets/css/dark-green.css" rel="alternate stylesheet" title="Darkgreen color">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="assets/images/favicon.ico">
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
</head>
<body class="cnt-home">
<header class="header-style-1">
<?php include('includes/top-header.php');?>
<?php include('includes/main-header.php');?>
<?php include('includes/menu-bar.php');?>
</header>
</div><!-- /.breadcrumb -->
<?php
if($message!="")
{
echo "<center><div class='alert alert-success' role='alert'><h3>$message</h3></div><center>";
$message="";
}
?>

Step-3:

Add the following content as the third part of the file.

<div class="body-content outer-top-xs">
<div class='container'>
<div class='row outer-bottom-sm'>
<div class='col-md-3 sidebar'>
<div class="side-menu animate-dropdown outer-bottom-xs">
</div><!-- /.side-menu -->
<div class="sidebar-module-container">
<h3 class="section-title">shop by</h3>
<div class="sidebar-filter">
<div class="sidebar-widget wow fadeInUp outer-bottom-xs ">
<div class="sidebar-widget-body m-t-10">
<?php $sql=mysqli_query($con,"select id,categoryName  from category");
while($row=mysqli_fetch_array($sql))
{
?>
<div class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a href="category.php?cid=<?php echo $row['id'];?>"  class="accordion-toggle collapsed">
<?php echo $row['categoryName'];?>
</a>
</div>
</div>
</div>
<?php } ?>
</div><!-- /.sidebar-widget-body -->
</div><!-- /.sidebar-widget -->
</div><!-- /.sidebar-filter -->
</div><!-- /.sidebar-module-container -->
</div><!-- /.sidebar -->
<div class='col-md-9'>
<div id="category">
<div class="item">
<div class="container-fluid">
<div >
<?php $sql=mysqli_query($con,"select categoryName from category where id='$cid'");
while($row=mysqli_fetch_array($sql))
{
?>

Step-4:

Add the following content as the fourth part of the file.

<div >
<h3><?php echo htmlentities($row['categoryName']);?></h3>
</div>
<?php } ?>
</div><!-- /.caption -->
</div><!-- /.container-fluid -->
</div>
</div>
<div class="search-result-container">
<div id="myTabContent" class="tab-content">
<div class="tab-pane active " id="grid-container">
<div class="category-product  inner-top-vs">
<div class="row">
<?php
$ret=mysqli_query($con,"select * from products where category='$cid'");
$num=mysqli_num_rows($ret);
if($num>0)
{
while ($row=mysqli_fetch_array($ret))
{?>
<div class="col-sm-6 col-md-4 wow fadeInUp">
<div class="products">
<div class="product">
<div class="product-image">
<div class="image">
<a href="product-details.php?pid=<?php echo htmlentities($row['id']);?>">
<img  src="assets/images/blank.gif" data-echo="admin/productimages/<?php echo htmlentities($row['productImage']);?>" alt="" width="200" height="300"></a>
</div><!-- /.image -->
</div><!-- /.product-image -->
<div class="product-info text-left">
<h3 class="name"><a href="product-details.php?pid=<?php echo htmlentities($row['id']);?>"><?php echo htmlentities($row['productName']);?></a></h3>
<div class="rating rateit-small"></div>
<div class="description"></div>
<div class="product-price">
<span class="price">
Tk. <?php echo htmlentities($row['productPrice']);?>
</span>
<span class="price-before-discount">Tk. <?php echo htmlentities($row['productPriceBeforeDiscount']);?></span>
</div><!-- /.product-price -->
</div><!-- /.product-info -->
<div class="cart clearfix animate-effect">
<div class="action">
<ul class="list-unstyled">
<li class="add-cart-button btn-group">
<button class="btn btn-primary icon" data-toggle="dropdown" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<a href="category.php?page=product&action=add&id=<?php echo $row['id']; ?>">
<button class="btn btn-primary" type="button">Add to cart</button></a>
</li>
<li class="lnk wishlist">
<a class="add-to-cart" href="category.php?pid=<?php echo htmlentities($row['id'])?>&&action=wishlist" title="Wishlist">
<i class="icon fa fa-heart"></i>
</a>
</li>
</ul>
</div><!-- /.action -->
</div><!-- /.cart -->
</div>
</div>
</div>
<?php } } else {?>
<div class="col-sm-6 col-md-4 wow fadeInUp"> <h3>No Product Found</h3>
</div>
<?php } ?>
</div><!-- /.row -->
</div><!-- /.category-product -->
</div><!-- /.tab-pane -->
</div><!-- /.search-result-container -->
</div><!-- /.col -->
</div></div>
<?php include('includes/brands-slider.php');?>
</div>
</div>

Step-5:

Add the following content as the fifth part of the file.

<?php include('includes/footer.php');?>
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/echo.min.js"></script>
<script src="assets/js/jquery.easing-1.3.min.js"></script>
<script src="assets/js/bootstrap-slider.min.js"></script>
<script src="assets/js/jquery.rateit.min.js"></script>
<script type="text/javascript" src="assets/js/lightbox.min.js"></script>
<script src="assets/js/bootstrap-select.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!-- For demo purposes – can be removed on production -->
<script src="switchstylesheet/switchstylesheet.js"></script>
<script>
$(document).ready(function(){
$(".changecolor").switchstylesheet( { seperator:"color"} );
$('.show-theme-options').click(function(){
$(this).parent().toggleClass('open');
return false;
});
});
$(window).bind("load", function() {
$('.show-theme-options').delay(2000).trigger('click');
});
</script>
</body>
</html>

Step-6:

Create my-wishlist.php file inside the project folder and add the following content at the beginning of the file.

<?php
session_start();
error_reporting(0);
$message="";
include('includes/config.php');
if(strlen($_SESSION['login'])==0)
{
header('location:index.php');
}
else{
$wid=intval($_GET['del']);
if(isset($_GET['del']))
{
$query=mysqli_query($con,"delete from wishlist where id='$wid'");
}
if(isset($_GET['action']) && $_GET['action']=="add"){
$id=intval($_GET['id']);
$query=mysqli_query($con,"delete from wishlist where productId='$id'");
if(isset($_SESSION['cart'][$id])){
$_SESSION['cart'][$id]['quantity']++;
}else{
$sql_p="SELECT * FROM products WHERE id={$id}";
$query_p=mysqli_query($con,$sql_p);
if(mysqli_num_rows($query_p)!=0){
$row_p=mysqli_fetch_array($query_p);
$_SESSION['cart'][$row_p['id']]=array("quantity" => 1, "price" => $row_p['productPrice']);
header('location:my-wishlist.php');
}
else{
$message="Product ID is invalid";
}
}
}
?>

Step-7:

Add the following content as the second part of the file.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="MediaCenter, Template, eCommerce">
<meta name="robots" content="all">
<title>My Wishlist</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Customizable CSS -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/green.css">
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.transitions.css">
<!--<link rel="stylesheet" href="assets/css/owl.theme.css">-->
<link href="assets/css/lightbox.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/rateit.css">
<link rel="stylesheet" href="assets/css/bootstrap-select.min.css">
<link rel="stylesheet" href="assets/css/config.css">
<link href="assets/css/green.css" rel="alternate stylesheet" title="Green color">
<link href="assets/css/blue.css" rel="alternate stylesheet" title="Blue color">
<link href="assets/css/red.css" rel="alternate stylesheet" title="Red color">
<link href="assets/css/orange.css" rel="alternate stylesheet" title="Orange color">
<link href="assets/css/dark-green.css" rel="alternate stylesheet" title="Darkgreen color">
<!-- Icons/Glyphs -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="assets/images/favicon.ico">
</head>
<body class="cnt-home">
<header class="header-style-1">
<?php include('includes/top-header.php');?>
<?php include('includes/main-header.php');?>
<?php include('includes/menu-bar.php');?>
</header>
<div class="breadcrumb">
<div class="container">
<div class="breadcrumb-inner">
<ul class="list-inline list-unstyled">
<li><a href="home.html">Home</a></li>
<li class='active'>Wishlish</li>
</ul>
</div><!-- /.breadcrumb-inner -->
</div><!-- /.container -->
</div><!-- /.breadcrumb -->

Step-8:

Add the following content as the third part of the file.

<div class="body-content outer-top-bd">
<div class="container">
<div class="my-wishlist-page inner-bottom-sm">
<div class="row">
<div class="col-md-12 my-wishlist">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan="4">my wishlist</th>
</tr>
</thead>
<tbody>
<?php
$ret=mysqli_query($con,"select products.productName as pname,products.productName as proid,products.productImage as pimage,products.productPrice as pprice,wishlist.productId as pid,wishlist.id as wid from wishlist join products on products.id=wishlist.productId where wishlist.userId='".$_SESSION['id']."'");
$num=mysqli_num_rows($ret);
if($num>0)
{
while ($row=mysqli_fetch_array($ret)) {
?>
<tr>
<td class="col-md-2"><img src="admin/productimages/<?php echo htmlentities($row['pimage']);?>" alt="<?php echo htmlentities($row['pname']);?>" width="60" height="100"></td>
<td class="col-md-6">
<div class="product-name"><a href="product-details.php?pid=<?php echo htmlentities($pd=$row['pid']);?>"><?php echo htmlentities($row['pname']);?></a></div>
<?php $rt=mysqli_query($con,"select * from productreviews where productId='$pd'");
$num=mysqli_num_rows($rt);
{
?>	
<div class="rating">
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star rate"></i>
<i class="fa fa-star non-rate"></i>
<span class="review">( <?php echo htmlentities($num);?> Reviews )</span>
</div>
<?php } ?>
<div class="price">Tk.
<?php echo htmlentities($row['pprice']);?>.00
<span>$900.00</span>
</div>
</td>
<td class="col-md-2">
<a href="my-wishlist.php?page=product&action=add&id=<?php echo $row['pid']; ?>" class="btn-upper btn btn-primary">Add to cart</a>
</td>
<td class="col-md-2 close-btn">
<a href="my-wishlist.php?del=<?php echo htmlentities($row['wid']);?>" onClick="return confirm('Are you sure you want to delete?')" class=""><i class="fa fa-times"></i></a>
</td>
</tr>
<?php } } else{ ?>
<tr><td style="font-size: 18px; font-weight:bold ">Your Wishlist is Empty</td></tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.sigin-in-->
<?php include('includes/brands-slider.php');?>
</div>
</div>
<?php include('includes/footer.php');?>
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/echo.min.js"></script>
<script src="assets/js/jquery.easing-1.3.min.js"></script>
<script src="assets/js/bootstrap-slider.min.js"></script>
<script src="assets/js/jquery.rateit.min.js"></script>
<script type="text/javascript" src="assets/js/lightbox.min.js"></script>
<script src="assets/js/bootstrap-select.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="switchstylesheet/switchstylesheet.js"></script>
<script>
$(document).ready(function(){
$(".changecolor").switchstylesheet( { seperator:"color"} );
$('.show-theme-options').click(function(){
$(this).parent().toggleClass('open');
return false;
});
});
$(window).bind("load", function() {
$('.show-theme-options').delay(2000).trigger('click');
});
</script>
</body>
</html>
<?php } ?>

Step-9:

Now, run the project from the server to check the output.

Next Tutorials–>