Ajax Product Filter php

Ajax Product Filter php

Ajax Product Filter php :- 

Live Product Filter in php using Jquery ajax ,code written in vary simple way here  product filter according to price range brand,colour,size, via multiple checkbox filter. Download full source code free and use your ecommerce project.

creat database phpcooker_script and import this


--
-- Database: `phpcooker_script`
--

-- --------------------------------------------------------

--
-- Table structure for table `product`
--

CREATE TABLE IF NOT EXISTS `product` (
  `product_id` int(20) NOT NULL AUTO_INCREMENT,
  `product_category_id` int(10) NOT NULL,
  `product_sku` varchar(80) NOT NULL,
  `product_name` varchar(120) NOT NULL,
  `product_brand` varchar(100) NOT NULL,
  `product_price` decimal(8,2) NOT NULL,
  `product_size` char(5) NOT NULL,
  `product_color` varchar(50) NOT NULL,
  `product_image` varchar(100) NOT NULL,
  `product_quantity` mediumint(5) NOT NULL,
  `product_status` enum('0','1') NOT NULL COMMENT '0-active,1-inactive',
  PRIMARY KEY (`product_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;

--
-- Dumping data for table `product`
--

INSERT INTO `product` (`product_id`, `product_category_id`, `product_sku`, `product_name`, `product_brand`, `product_price`, `product_size`, `product_color`, `product_image`, `product_quantity`, `product_status`) VALUES
(1, 1, 'FRD00F1', 'Sangria Collar 3/4Th Sleeves Embroidered Flared Anarkali', 'Sangria', '1750.00', 'M', 'Black', 'Sangria-Collar.jpg', 2, '1'),
(2, 1, 'FRD00F3', 'Aurelia Navy Blue Printed Cotton Kurta', 'Aurelia', '900.00', 'L', 'Blue', 'Aurelia-Navy-Blue-Printed-Cotton-Kurta.jpg', 1, '1'),
(3, 1, 'RO100', 'Biba White Printed Viscose Kurta', 'Biba', '900.00', 'S', 'White', 'Biba-White-Printed-Viscose-Kurta.jpg', 3, '1'),
(4, 1, 'HND0E1', 'Aurelia Yellow Printed Cotton Kurta', 'Aurelia', '700.00', 'M', 'Yellow', 'Aurelia-Yellow-Printed-Cotton-Kurta.jpg', 2, '1'),
(5, 1, 'MST0G1', 'Biba Blue Printed Kurta', 'Biba', '1040.00', 'S', 'Blue', 'Biba-Blue-Printed-Kurta.jpg', 5, '1'),
(6, 1, 'NS0A1', 'Aurelia Navy Blue Printed Cotton Kurta', 'Aurelia', '699.00', 'M', 'Blue', 'Aurelia-Navy-Blue-Printed-Cotton-Kurta1.jpg', 1, '1'),
(7, 1, 'NS2S1', 'Sangria Round Neck 3/4Th Sleeves Anarkali', 'Sangria', '999.00', 'M', 'Black', 'Sangria-Round-Neck-3-4Th-Sleeves-Anarkali-8650-797031003-1-catalog_s.jpg', 4, '1'),
(8, 1, 'HND1A2', 'Biba Dark Grey Solid Cotton Kurta', 'Biba', '1320.00', 'L', 'Black', 'Biba-Dark-Grey-Solid-Cotton-Kurta-1317-2851182-1-catalog_s.jpg', 1, '1'),
(9, 1, 'DGE0C1', 'Sangria Henley Neck Full Sleeves Printed Anarkali', 'Sangria', '650.00', 'L', 'White', 'Sangria-Henley-Neck-Full-Sleeves-Printed-Anarkali-6253-155890003-1-catalog_s.jpg', 3, '1'),
(10, 1, 'FRD01T3', 'Rangmanch By Pantaloons Off White Solid Cotton Blend Kurta', 'Rangmanch', '800.00', 'M', 'White', 'Rangmanch-By-Pantaloons-Off-White-Solid-Cotton-Blend-Kurta-7882-762960003-1-catalog_s.jpg', 3, '1');

 

conf.php


<?php
$conn = @mysql_connect("localhost","root","");
mysql_select_db("phpcooker_script",$conn);
?>

index.php



<?php include"conf.php";

?>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Product filter in php</title>

    <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

 

    <!-- Page Content -->
    <div class="container" style="padding-top:2%;" >

        <div class="row">
            <div class="col-md-3">
                <p class="lead">Product filter</p>
                
                  <div class="list-group">
                <h3>Price</h3>

<input type="hidden" class="price1" value="0" >
                <input type="hidden" class="price2" value="3000"  >

                <p id="priceshow"></p>
                <div id="slider-range"></div>
                
                </div>
                
                <div class="list-group">
                <h3>Colour</h3>
                <?php
                    $query = "select distinct(product_color) from product where product_status = '1'";  
                    $rs = mysql_query($query,$conn) or die("Error : ".mysql_error());
                    while($color_data = mysql_fetch_assoc($rs)){
                
                ?>
                    <a href="javascript:void(0);" class="list-group-item">
                    <input type="checkbox" class="item_filter colour" value="<?php echo $color_data['product_color']; ?>"  >
                    &nbsp;&nbsp; <?php echo $color_data['product_color']; ?></a>
                <?php } ?>    
                </div>
                
                
                <div class="list-group">
                <h3>Brand</h3>
                <?php
                    $query = "select distinct(product_brand) from product where product_status = '1'";  
                    $rs = mysql_query($query,$conn) or die("Error : ".mysql_error());
                    while($brand_data = mysql_fetch_assoc($rs)){
                
                ?>
                    <a href="javascript:void(0);" class="list-group-item">
                    <input type="checkbox" class="item_filter brand" value="<?php echo $brand_data['product_brand']; ?>" >
                    &nbsp;&nbsp; <?php echo $brand_data['product_brand']; ?></a>
                <?php } ?>    
                </div>
                
                <div class="list-group">
                <h3>Size</h3>
                <?php
                    $query = "select distinct(product_size) from product where product_status = '1'";  
                    $rs = mysql_query($query,$conn) or die("Error : ".mysql_error());
                    while($size_data = mysql_fetch_assoc($rs)){
                
                ?>
                    <a href="javascript:void(0);" class="list-group-item">
                    <input type="checkbox" class="item_filter size" value="<?php echo $size_data['product_size']; ?>"  >
                    &nbsp;&nbsp; <?php echo $size_data['product_size']; ?></a>
                <?php } ?>    
                </div>
                
                
            </div>

            <div class="col-md-9">

                
                <div class="row product-data"  >
                  
                  <?php
                    $query = "select * from product where product_status = '1'";
                      
                     $rs = mysql_query($query,$conn) or die("Error : ".mysql_error());
                    
                     while($product_data = mysql_fetch_assoc($rs)){
                  ?>
                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img src="image/<?php echo $product_data['product_image']; ?>" alt="">
                            <div class="caption">
                               
                                <p><strong><a href="#"><?php echo $product_data['product_name']; ?></a>
                                </strong></p>
                                 <h4 style="text-align:center;" >$ <?php echo $product_data['product_price']; ?></h4>
                                <p>Color : <?php echo $product_data['product_color']; ?> &nbsp; &nbsp; &nbsp; &nbsp;  Brand : <?php echo $product_data['product_brand']; ?> </p>
                                
                                <p>Size : <?php echo $product_data['product_size']; ?> &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity : <?php echo $product_data['product_quantity']; ?> </p>
                                
                            </div>
                            <div class="ratings">
                                <p class="pull-right">15 reviews</p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                     <?php  } ?>
                    
                    
                </div>

            </div>

        </div>

    </div>
    <!-- /.container -->

    <div class="container">

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; PHP Cooker 2017</p>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>
<style>
#loaderpro{text-align:center; background: url('loader.gif') no-repeat center; height: 150px;}
</style>
    <script>
    var colour,brand,size;
    $(function(){
        $('.item_filter').click(function(){
            $('.product-data').html('<div id="loaderpro" style="" ></div>');
        
             colour = multiple_values('colour');
             brand  = multiple_values('brand');
             size   = multiple_values('size');
            
            $.ajax({
                url:"ajax.php",
                type:'post',
           data:{colour:colour,brand:brand,size:size,sprice:$(".price1" ).val(),eprice:$( ".price2" ).val()},,
                success:function(result){
                    $('.product-data').html(result);
                }
            });
        });
        
    });
    
    
    function multiple_values(inputclass){
        var val = new Array();
        $("."+inputclass+":checked").each(function() {
            val.push($(this).val());
        });
        return val;
    }
    
    
  $(function() {
        $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 3000,
          values: [ 100, 3000 ],
          slide: function( event, ui ) {
            $( "#priceshow" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            $( ".price1" ).val(ui.values[ 0 ]);
            $( ".price2" ).val(ui.values[ 1 ]);
            $('.product-data').html('<div id="loaderpro" style="" ></div>');
             colour = multiple_values('colour');
             brand  = multiple_values('brand');
             size   = multiple_values('size');
            $.ajax({
                url:"ajax.php",
                type:'post',
                data:{colour:colour,brand:brand,size:size,sprice:ui.values[ 0 ],eprice:ui.values[ 1 ]},
                success:function(result){
                    $('.product-data').html(result);
                }
            });
          }
        });
        
        $( "#priceshow" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
         " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });    
    
</script>
    
    
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

ajax.php



<?php
include"conf.php";
$colour="";
$brand="";
$size="";
$eprice="";
$colour = isset($_REQUEST['colour'])?$_REQUEST['colour']:"";
$brand = isset($_REQUEST['brand'])?$_REQUEST['brand']:"";
$size = isset($_REQUEST['size'])?$_REQUEST['size']:"";
$sprice = isset($_REQUEST['sprice'])?$_REQUEST['sprice']:"";
$eprice = isset($_REQUEST['eprice'])?$_REQUEST['eprice']:"";

         $query = "select * from product where product_status = '1'";
        
                   //filter query start
                      if(!empty($colour)){
                          $colordata =implode("','",$colour);
                          $query  .= " and product_color in('$colordata')";
                      }
                      
                       if(!empty($brand)){
                          $branddata =implode("','",$brand);
                          $query  .= " and product_brand in('$branddata')";
                      }
                      
                      if(!empty($size)){
                          $sizedata =implode("','",$size);
                          $query  .= " and product_size in('$sizedata')";
                      }
                      
                      if(!empty($sprice) && !empty($eprice)){
                          $query  .= " and product_price >='$sprice' and product_price <='$eprice'";
                      }
                      
                     $rs = mysql_query($query,$conn) or die("Error : ".mysql_error());
                    
                     while($product_data = mysql_fetch_assoc($rs)){
                  ?>
                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img src="image/<?php echo $product_data['product_image']; ?>" alt="">
                            <div class="caption">
                               
                                <p><strong><a href="#"><?php echo $product_data['product_name']; ?></a>
                                </strong></p>
                                 <h4 style="text-align:center;" >$ <?php echo $product_data['product_price']; ?></h4>
                                <p>Color : <?php echo $product_data['product_color']; ?> &nbsp; &nbsp; &nbsp; &nbsp;  Brand : <?php echo $product_data['product_brand']; ?> </p>
                                
                                <p>Size : <?php echo $product_data['product_size']; ?> &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity : <?php echo $product_data['product_quantity']; ?> </p>
                                
                            </div>
                            <div class="ratings">
                                <p class="pull-right">15 reviews</p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                     <?php  } ?>

 

smileysmileysmileysmiley

Demo

Download Hare

Total Coments (1)

  1. Bizzzkit
    • 29 Oct 2017

    Great tutorial, thanks. Since it works perfectly how could I add pagination?