Product Brand,Size,Material Checkbox Search Filtering Using PHP And Jquery - Mostlikers

18 October, 2016

Product Brand,Size,Material Checkbox Search Filtering Using PHP And Jquery

Recently I have posted Product Search Filtering Using PHP and MySQLi. It's a basic level of product search filter, Later I got a so many request tutorials, a message regarding Product, Brand, Size checkbox Ajax search like amazon, Flipkart search filter. Here I have created similar like sort, search filter. Let see deep discussions on this tutorial.

Product Brand,Size,Material Checkbox Search Filtering Using PHP And Jquery

Download           Live demo

In this tutorial, I have used jquery script for form submit. All the size and brand fetching through the database.

Demo Video

Database

create a product table with the column. insert some product information like brand, size etc..
CREATE TABLE IF NOT EXISTS `products` (
`id` int(11) NOT NULL,
  `sku_id` varchar(50) NOT NULL,
  `category_id` int(11) NOT NULL,
  `product_name` varchar(300) NOT NULL,
  `image` varchar(300) NOT NULL,
  `price` int(11) NOT NULL,
  `brand` varchar(100) NOT NULL,
  `material` varchar(100) NOT NULL,
  `size` varchar(20) NOT NULL,
  `qty` int(11) NOT NULL,
  `created_date` datetime NOT NULL,
  `updated_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

Product table


Database connection (config.php)

Create a new page, Connect your database.
<?php  
   $user = 'root'; 
   $password = ''; 
   $database = 'mostlikers'; 
   $db = new mysqli('localhost',$user,$password,$database); 
 ?>

Here I have created SQL, HTML layout everything on the same page(index.php).


Sql filter and product code(index.php)

<?php 
include("config.php");
$all_brand=$db->query("SELECT distinct brand FROM `products` 
                    WHERE category_id = '1' GROUP BY brand");

$all_material=$db->query("SELECT distinct material FROM `products`
                    WHERE category_id = '1' GROUP BY material");

$all_size=$db->query("SELECT distinct size FROM `products`
                    WHERE category_id = '1' GROUP BY size");
// Filter query
$sql= "SELECT distinct * FROM `products` WHERE category_id = '1'";

if(isset($_GET['brand']) && $_GET['brand']!="") :
    $sql.=" AND brand IN ('".implode("','",$_GET['brand'])."')";
endif;

if(isset($_GET['material']) && $_GET['material']!="") :
    $sql.=" AND material IN ('".implode("','",$_GET['material'])."')";
endif;

if(isset($_GET['size']) && $_GET['size']!="") :
    $sql.=" AND size IN (".implode(',',$_GET['size']).")";
endif;

if(isset($_GET['sort_price']) && $_GET['sort_price']!="") :
    if($_GET['sort_price']=='price-asc-rank') :
        $sql.=" ORDER BY price ASC";
    elseif($_GET['sort_price']=='price-desc-rank') :
        $sql.=" ORDER BY price DESC";
    endif;
endif;

$all_product=$db->query($sql);
?>

SQL WHERE IN - For size, brand, material value filter I have used WHERE IN SQL statement. it will check the array key value.
SELECT distinct * FROM `products` WHERE category_id = '1'
    AND size IN ('28,32,34)

Right sidebar and product HTML layout(index.php)

<form method="get" id="search_form">
<!--right side bar -->
<div class="row">
    <aside class="col-lg-3 col-md-4">
        <div class="panel list">
            <div class="panel-heading">
                <h3 class="panel-title">Shop by Brand</h3></div>
            <div>
            <ul class="list-group">
            <?php foreach ($all_brand as $key => $new_brand) :
                if(isset($_GET['brand'])) :
                    if(in_array($new_brand['brand'],$_GET['brand'])) : 
                        $brand_check='checked="checked"';
                    else : $brand_check="";
                    endif;
                endif;
            ?>
            <li class="list-group-item">
                <div class="checkbox"><label>
                <input type="checkbox" value="<?=$new_brand['brand']; ?>" <?=@$brand_check?>
                 name="brand[]" class="sort_rang">
                <?=$new_brand['brand']; ?></label></div>
            </li>
            <?php endforeach; ?>
            </ul>
            </div>
        </div>
        <div class="panel list">
            <div class="panel-heading"><h3>Shop by Material</h3></div>
            <div>
            <ul class="list-group">
            <?php foreach ($all_material as $key => $new_material) :
                if(isset($_GET['material'])) :
                    if(in_array($new_material['material'],$_GET['material'])) : 
                        $material_check='checked="checked"';
                    else : $material_check="";
                    endif;
                endif;
            ?>
            <li class="list-group-item">
             <div class="checkbox"><label>
             <input type="checkbox" value="<?=$new_material['material']; ?>"
              <?=@$material_check?> name="material[]" class="sort_rang">
              <?=$new_material['material']; ?></label></div>
             </li>
            <?php endforeach; ?>
            </ul>
            </div>
        </div>
        <div class="panel list">
            <div class="panel-heading"><h3>Shop by Size</h3></div>
            <div>
            <ul class="list-group">
                <?php foreach ($all_size as $key => $new_size) : 
                    if(isset($_GET['size'])) :
                        if(in_array($new_size['size'],$_GET['size'])) : 
                            $size_check='checked="checked"';
                        else : $size_check="";
                        endif;
                    endif;
                ?>
                <li class="list-group-item">
                  <div class="checkbox"><label>
                   <input type="checkbox" value="<?=$new_size['size']; ?>" <?=@$size_check?>  
                    name="size[]" class="sort_rang">
                    <?=$new_size['size']; ?></label></div>
                </li>
            <?php endforeach; ?>
            </ul>
            </div>
        </div>
    </aside> <!-- /.sidebar -->

    <!-- listing -->
    <section class="col-lg-9 col-md-8">
        <div class="row">
        <?php if(isset($all_product) && count($all_product)) : ?>
            <?php foreach ($all_product as $key => $products) : ?>
                <article class="col-md-4 col-sm-6">
                    <div class="thumbnail product">
                    <figure>
                       <img src="product_images/<?php echo $products['image']; ?>"/>
                    </figure>
                    <div class="caption">
                    <?php echo $products['product_name']; ?>
                    <div class="price">Rs.<?php echo $products['price']; ?>/-</div>
                    <h5>Brand : <?php echo $products['brand']; ?></h5>
                    <h5>Material : <?php echo $products['material']; ?></h5>
                    <h5>Size : <?php echo $products['size']; ?></h5>
                    </div>
                    </div>
                </article>
            <?php endforeach; ?> 
        <?php else : ?>                                               
                    <h3>Sorry, no results found! </h3>
                    <h5>Please check the spelling or try searching for something else</h5>                           
         <?php endif; ?>

                                 
        </div>
    </section> <!-- /.listing -->
</div>
</form>

in_array - It will check $_GET key value exist or not. Here I have used set select check box value.

SQL GROUP BY -  The SQL GROUP BY clause is used in collaboration with the SELECT statement to arrange identical data into groups







7 comments:

  1. when check last brand in list ,checked all materials and size

    ReplyDelete
  2. If you do an ajax filter is superior

    ReplyDelete
  3. when check last brand in list ,checked all materials and size plz help me

    ReplyDelete
  4. when check last brand in list ,checked all materials and size plz help

    ReplyDelete
  5. Just uploaded the files and ran the sql and all the results come back blank, the filters are blank too, is there something wrong with the php in index.php?

    ReplyDelete