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 (13)

  1. toushif kagzi
    • 05 Mar 2018

    Error : You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'and color=Array' at line 1 Some error like this appear while making some changes.... please need a help....

  2. Bizzzkit
    • 29 Oct 2017

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

  3. riz
    • 08 Jan 2018

    that was awesome

  4. RiZ
    • 08 Jan 2018

    You are working great and awesome it was really helpful for me , now can you please upload tutorial for Dynamic Product slider like flikart, Amazon, indiamart (must see) , i would like to use it on as homepage

  5. Ganesh Deshmukh
    • 21 Feb 2018

    Thanks alot sir.... its a great tutorial.....

  6. neha harshwal
    • 21 Feb 2018

    really nice thanks alot

  7. Castle
    • 04 Apr 2018

    Great tutorial. It would be fantastic if you can make this tutorial using CodeIgniter

  8. anuj
    • 09 Apr 2018

    thank, bro it'is working

  9. arvind aada
    • 11 Apr 2018

    Great Working ..Man Thanks Alot...!

  10. Amran
    • 17 Apr 2018

    Thanks you so much for sharing this.. it's save my day

  11. Jeebandeep Mahapatra
    • 27 Apr 2018

    Thanks..I really needed this.

  12. Syon
    • 13 Jul 2018

    Hi, Can you please add pagination too? Tank you so much