How to Add Multiple Search Filter in PHP with pagination for eCommerce Website Products filters using pure Vanilla JavaScript. If you are also looking for How can we implement search filters with pagination in eCommerce website then you have come on the right place because here we have share PHP Project tutorial on How to Create filter in PHP with MySQL, JavaScript and Bootstrap 5 library. Under this tutorial, we have latest web technology like Vanilla JavaScript and Bootstrap 5 library for build eCommerce website product filter with pagination.
Now we have come on the right topic and here we will show you how to filter product which has been come under price range, brand or gender filter. The main benefits of eCommerce Website product filter is for filter product from large number of product by price range filter, brand filter or gender filter. So most of the Online eCommerce website has put product filter on their website and with the help of that filter customer product from large number of product and found the specific product within their price range or brands. If you have seen any Online Shopping website, so on that website there are large number of product has been listed on that website, so when we have come on e-commerce website for buy product then we have to face difficulty for find product, so at that time product filter will help to user for search product on website and it has reduces user time for found product with the help of price range filter or brand filter.
In this post you, we will learn you how to filter product on eCommerce website using PHP with pure JavaScript, Bootstrap 5 and MySQL. If you have build Product filter for Online Shopping website then good User interface (UI) is required for product filter so customer can easily search product with multiple filter. Under this tutorial, we will use Radio Button filter, Price Range filter and Checkbox filter using JavaScript. When user click on Radio Button or price filter or Checkbox filter then JavaScript will trigger fetch API and it will fetch data from MySQL database and display on web page without refresh of web page. So here for Ajax operation we have use JavaScript Fetch API. Under this tutorial we will put multiple search filter at the left sidebar, and here we have will make brand filter using radio button, price range filter and brand filter using checkbox. This is live product filter which has been run based on JavaScript Fetch API Ajax request and most of the e-commerce website use Ajax for search filter. Below you can find the source code which will help you to build product filter with multiple search filter and pagination for you ecommerce website project using PHP with JavaScript, Bootstrap 5 and MySQL Database.
Source Code
Create MySQL Table
For build product filter, first we have to create MySQL table for store product data. So for create table in MySQL database, you have to run following SQL script which will create sample_data table in your MySQL Database.
--
-- Table structure for table `sample_data`
--
CREATE TABLE `sample_data` (
`sample_id` int(11) NOT NULL,
`name` text NOT NULL,
`sku` int(11) NOT NULL,
`mpn` int(11) NOT NULL,
`price` int(11) NOT NULL,
`in_stock` varchar(20) NOT NULL,
`currency` varchar(10) NOT NULL,
`brand` varchar(255) NOT NULL,
`description` text NOT NULL,
`images` text NOT NULL,
`gender` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for table `sample_data`
--
ALTER TABLE `sample_data`
ADD PRIMARY KEY (`sample_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `sample_data`
--
ALTER TABLE `sample_data`
MODIFY `sample_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
index.html
Under this tutorial, we have use pure JavaScript for create product filter with pagination. So here we have use .html file as our index file. Under this file we have only include Bootstrap 5 Stylesheet library for create layout for product filter and for pagination. Under this file you can also find JavaScript code for display all product with pagination link.
For display all product with pagination, here we have create one load_product(page) function. This function will be called when page has been load in browser, then it will send AJAX request using JavaScript Fetch API to process.php file for fetch product data from database. So this function will receive product data with pagination link data from server in JSON format and convert that data into HTML format and display all product with pagination link on web page.
Under this Product Filter tutorial, we have also add Skeleton Loading Effect with Bootstrap 5 stylesheet and JavaScript. So when page will load it will first load Product Skeleton and then after it will display product on web page with pagination link. Here skeleton effect will also work when we have click on pagination link also.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="">
<title>Product Filter in PHP using Vanilla JavaScript</title>
<link rel="canonical" href="">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<div class="col-lg-8 mx-auto">
<main>
<h1 class="text-center mt-3 mb-3">Product Filter in PHP using Vanilla JavaScript - Add Skeleton Loading Effect - 3</h1>
<div class="row">
<div class="col-sm-3 p-3 bg-light"></div>
<div class="col-sm-9">
<div id="product_area"></div>
<div id="skeleton_area"></div>
<div id="pagination_area" class="mt-2 mb-5"></div>
</div>
</div>
</main>
</div>
</body>
</html>
<script>
function $(selector){
return document.querySelector(selector);
}
load_product(1);
function load_product(page = 1)
{
$('#product_area').style.display = 'none';
$('#skeleton_area').style.display = 'block';
$('#skeleton_area').innerHTML = make_skeleton();
fetch('process.php?page='+page+'').then(function(response){
return response.json();
}).then(function(responseData){
var html = '';
if(responseData.data)
{
if(responseData.data.length > 0)
{
html += '<p class="h6">'+responseData.total_data+' Products Found</p>';
html += '<div class="row">';
for(var i = 0; i < responseData.data.length; i++)
{
html += '<div class="col-md-3 mb-2 p-3">';
html += '<img src ="'+responseData.data[i].image+'" class="img-fluid border mb-3 p-3" />';
html += '<p class="fs-6 text-center">'+responseData.data[i].name+' <span class="badge bg-info text-dark">'+responseData.data[i].brand+'</span><br />';
html += '<span class="fw-bold text-danger"><span>₹</span> '+responseData.data[i].price+'</span>';
html += '</div>';
}
html += '</div>';
$('#product_area').innerHTML = html;
}
else
{
$('#product_area').innerHTML = '<p class="h6">No Product Found</p>';
}
}
if(responseData.pagination)
{
$('#pagination_area').innerHTML = responseData.pagination;
}
setTimeout(function(){
$('#product_area').style.display = 'block';
$('#skeleton_area').style.display = 'none';
}, 3000);
});
}
function make_skeleton()
{
var output = '<div class="row">';
for(var count = 0; count < 8; count++)
{
output += '<div class="col-md-3 mb-3 p-4">';
output += '<div class="mb-2 bg-light text-dark" style="height:240px;"></div>';
output += '<div class="mb-2 bg-light text-dark" style="height:50px;"></div>';
output += '<div class="mb-2 bg-light text-dark" style="height:25px;"></div>';
output += '</div>';
}
output += '</div>';
return output;
}
</script>
process.php
This file has been use for perform server side operation. Under this file we have use PHP script for process server side data. In this file first we have make database connection using PHP PDO() class.
This file has been receive Ajax request for fetch product data from database and make pagination link. So based on $page number variable value which has been get from url and based on that value it has been fetch product data from database for display particular page product on web page.
<?php
//process.php
$connect = new PDO("mysql:host=localhost; dbname=test", "root", "");
if(isset($_GET["page"]))
{
$data = array();
$limit = 8;
$page = 1;
if($_GET["page"] > 1)
{
$start = (($_GET["page"] - 1) * $limit);
$page = $_GET["page"];
}
else
{
$start = 0;
}
$query = "
SELECT name, price, images, brand
FROM sample_data
ORDER BY sample_id ASC
";
$filter_query = $query . ' LIMIT ' . $start . ', ' . $limit . '';
$statement = $connect->prepare($query);
$statement->execute();
$total_data = $statement->rowCount();
$result = $connect->query($filter_query);
foreach($result as $row)
{
$image_array = explode(" ~ ", $row["images"]);
$data[] = array(
'name' => $row['name'],
'price' => $row['price'],
'brand' => $row['brand'],
'image' => $image_array[0]
);
}
$pagination_html = '
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
';
$total_links = ceil($total_data/$limit);
$previous_link = '';
$next_link = '';
$page_link = '';
$page_array = '';
if($total_links > 4)
{
if($page < 5)
{
for($count = 1; $count <= 5; $count++)
{
$page_array[] = $count;
}
$page_array[] = '...';
$page_array[] = $total_links;
}
else
{
$end_limit = $total_links - 5;
if($page > $end_limit)
{
$page_array[] = 1;
$page_array[] = '...';
for($count = $end_limit; $count <= $total_links; $count++)
{
$page_array[] = $count;
}
}
else
{
$page_array[] = 1;
$page_array[] = '...';
for($count = $page - 1; $count <= $page + 1; $count++)
{
$page_array[] = $count;
}
$page_array[] = '...';
$page_array[] = $total_links;
}
}
}
else
{
for($count = 1; $count <= $total_links; $count++)
{
$page_array[] = $count;
}
}
for($count = 0; $count < count($page_array); $count++)
{
if($page == $page_array[$count])
{
$page_link .= '
<li class="page-item active">
<a class="page-link" href="#">'.$page_array[$count].'</a>
</li>
';
$previous_id = $page_array[$count] - 1;
if($previous_id > 0)
{
$previous_link = '<li class="page-item"><a class="page-link" href="javascript:load_product('.$previous_id.')">Previous</a></li>';
}
else
{
$previous_link = '
<li class="page-item disabled">
<a class="page-link" href="#">Previous</a>
</li>
';
}
$next_id = $page_array[$count] + 1;
if($next_id > $total_links)
{
$next_link = '
<li class="page-item disabled">
<a class="page-link" href="#">Next</a>
</li>
';
}
else
{
$next_link = '
<li class="page-item"><a class="page-link" href="javascript:load_product('.$next_id.')">Next</a></li>
';
}
}
else
{
if($page_array[$count] == '...')
{
$page_link .= '
<li class="page-item disabled">
<a class="page-link" href="#">...</a>
</li>
';
}
else
{
$page_link .= '
<li class="page-item">
<a class="page-link" href="javascript:load_product('.$page_array[$count].')">'.$page_array[$count].'</a>
</li>
';
}
}
}
$pagination_html .= $previous_link . $page_link . $next_link;
$pagination_html .= '
</ul>
</nav>
';
$output = array(
'data' => $data,
'pagination'=> $pagination_html,
'total_data'=> $total_data
);
echo json_encode($output);
}
?>
