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 a jquery script for form submit. All the size and brand fetching through the database.

New update: http://www.mostlikers.com/2017/03/product-ajax-search-filter-with.html

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







24 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
    Replies
    1. Check your database connection.

      Delete
    2. दरोगा हप्पू सिंह27 February 2017 at 21:49

      अरे दादा,

      बहुत बढ़िया माराज. मजो आगो जालिम.

      Delete
  6. Hi! Thank you so much for sharing. I will give it a try next week.

    ReplyDelete
  7. Hi,


    I am a able to use your source code for my coursework?


    Thanks
    Danyaal

    ReplyDelete
  8. how to use this in simple numeric pagination

    ReplyDelete
  9. how to do this in simple numeric pagination.please help me

    ReplyDelete
    Replies
    1. Soon i will update. With pagination refer this

      http://www.mostlikers.com/2017/03/product-ajax-search-filter-with.html

      Delete
  10. halo brother, i think the select opti0n if demo run.

    in the select preference always selected "PRICE: HIGH TO LOW"
    and my revition it :

    value="price-asc-rank">Price: Low to High

    value="price-desc-rank">Price: High to Low

    i hope can be help for all, and my bad is how to make search from header form and pagination :D

    ReplyDelete
    Replies
    1. With pagination refer this tutorial

      http://www.mostlikers.com/2017/03/product-ajax-search-filter-with.html

      Delete
  11. hello bro infinite scroll is not working in mobile.

    ReplyDelete
  12. please send me the code for mobile(infinte scroll)

    ReplyDelete
  13. cod work hi nahi ho raha hai sir
    pls send right code in my email hjariwala983@gmail.com

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. can we do pagination for this

    ReplyDelete