Membuat Filter Ecommerce Product Dengan Paginasi Menggunakan Vanilla Javascript
Cara menambahkan beberapa Filter Pencarian di PHP dengan pagination untuk filter Produk dalam Web eCommerce menggunakan JavaScript Vanilla murni. Jika mencari bagaimana menerapkan filter pencarian dengan pagination di situs web eCommerce maka telah datang ke tempat yang tepat karena di sini akan dibagikan dalam tutorial ini dengan teknologi web terbaru seperti Vanilla JavaScript dan pustaka Bootstrap 5 untuk membangun filter produk situs web eCommerce dengan pagination.
Sekarang ditunjukkan cara memfilter produk yang berada di bawah filter kisaran harga, merek, atau jenis kelamin. Manfaat utama filter produk Situs Web eCommerce adalah untuk memfilter produk dari sejumlah besar produk dengan filter kisaran harga, filter merek, atau filter jenis kelamin. Jadi sebagian besar situs web eCommerce Online telah menempatkan filter produk di situs web mereka dan dengan bantuan produk pelanggan filter itu dari sejumlah besar produk dan menemukan produk tertentu dalam kisaran harga atau merek mereka. Jika Anda pernah melihat situs Belanja Online, maka di situs web tersebut terdapat sejumlah besar produk yang terdaftar di situs web tersebut, jadi ketika kita masuk ke situs web e-commerce untuk membeli produk maka kita harus menghadapi kesulitan untuk menemukan produk, jadi pada saat itu filter produk akan membantu pengguna untuk mencari produk di situs web dan telah mengurangi waktu pengguna untuk menemukan produk dengan bantuan filter kisaran harga atau filter merek.
Dalam posting ini developer akan mempelajari cara memfilter produk di situs web eCommerce menggunakan PHP dengan JavaScript murni, Bootstrap 5, dan MySQL. Jika Anda telah membuat filter Produk untuk situs web Belanja Online, diperlukan antarmuka Pengguna (UI) yang baik untuk filter produk sehingga pelanggan dapat dengan mudah mencari produk dengan banyak filter. Di bawah tutorial ini, kita akan menggunakan filter Radio Button, filter Price Range dan filter Checkbox menggunakan JavaScript. Ketika pengguna mengklik Tombol Radio atau filter harga atau filter Kotak centang maka JavaScript akan memicu API pengambilan dan itu akan mengambil data dari database MySQL dan ditampilkan di halaman web tanpa menyegarkan halaman web. Jadi di sini untuk operasi Ajax, menggunakan JavaScript Fetch API. Di bawah tutorial ini kita akan meletakkan beberapa filter pencarian di sidebar kiri, dan di sini kita akan membuat filter merek menggunakan tombol radio, filter kisaran harga dan filter merek menggunakan kotak centang. Ini adalah filter produk langsung yang dijalankan berdasarkan permintaan JavaScript Fetch API Ajax dan sebagian besar situs web e-niaga menggunakan Ajax untuk filter pencarian. Di bawah ini terdapat kode sumber yang akan membantu membuat filter produk dengan beberapa filter pencarian dan paginasi untuk proyek situs web e-niaga menggunakan PHP dengan JavaScript, Bootstrap 5, dan Database MySQL.
A. Buat Tabel MySQL
Untuk membangun filter produk, pertama-tama kita harus membuat tabel MySQL untuk menyimpan data produk. Jadi untuk membuat tabel di database MySQL, developer harus menjalankan skrip SQL berikut yang akan membuat tabel sample_data di Database MySQL.
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;
B. Buat file index.html
Di bawah tutorial ini, telah menggunakan JavaScript murni untuk membuat filter produk dengan pagination. Jadi di sini kita menggunakan file .html sebagai file indeks. Di dalam file ini, disertakan pustaka Bootstrap 5 Stylesheet untuk membuat tata letak untuk filter produk dan untuk paginasi dan kode JavaScript untuk menampilkan semua produk dengan link pagination.
Untuk menampilkan semua produk dengan pagination, dibuat satu fungsi load_product(page). Fungsi ini akan dipanggil ketika halaman telah dimuat di browser, kemudian akan mengirimkan permintaan AJAX menggunakan JavaScript Fetch API ke file process.php untuk mengambil data produk dari database. Jadi fungsi ini akan menerima data produk dengan data link pagination dari server dalam format JSON dan mengubah data tersebut menjadi format HTML dan menampilkan semua produk dengan link pagination di halaman web.
Di tutorial Filter Produk ini, juga ditambahkan Skeleton Loading Effect dengan stylesheet Bootstrap 5 dan JavaScript. Jadi ketika halaman akan dimuat, pertama-tama akan memuat Kerangka Produk dan kemudian setelah itu akan menampilkan produk di halaman web dengan tautan paginasi. Di sini efek kerangka juga akan berfungsi ketika kita juga mengklik tautan paginasi.
Dalam Tutorial Filter Produk ini, disertakan jenis filter berikut untuk mencari produk dari sejumlah besar produk.
- Filter Tombol Radio - Dalam tutorial ini, kami telah menggunakan filter Tombol Radio untuk memuat atau menampilkan atau memfilter produk sesuai dengan produk Gender tertentu saja. misalnya, pengguna hanya ingin melihat produk gender "Pria", maka pengguna dapat memilih tombol Gender Radio "Pria", maka pengguna hanya dapat melihat produk Gender "Pria" di halaman web tanpa menyegarkan halaman web.
- Filter Kisaran Harga - Di bawah Proyek PHP ini pada filter produk Lanjutan dan di sini kami juga menyertakan satu opsi filter lagi seperti filter kisaran harga. Jadi dengan filter ranger harga ini, pengguna di situs web e-niaga dapat memfilter produk berdasarkan harga. Jadi pengguna dapat daftar produk yang berada di bawah kisaran harga tertentu. Dalam tutorial ini untuk menerapkan filter kisaran harga, di sini kita telah menggunakan JavaScript murni dengan skrip PHP pustaka Bootstrap 5 dan database MySQL.
- Filter Kotak Centang - Filter kotak centang terutama digunakan untuk memfilter data dengan berbagai kondisi, jadi di sini di tutorial Filter Produk Lanjutan dengan Paginasi, kami juga telah menerapkan filter Kotak Centang untuk daftar produk dari beberapa merek di halaman web tanpa penyegaran halaman web. Di sini menggunakan javascript murni dengan PHP untuk menambahkan filter Multiple Checkbox di bawah tutorial filter produk ini.
- Filter Pencarian - Filter Pencarian digunakan untuk mencari data produk dari database sesuai dengan permintaan pencarian. Dengan menggunakan filter Pencarian ini Pelanggan dapat mencari produk dengan mengetik kueri mereka di kotak teks pencarian dan mereka bisa mendapatkan data filter di halaman web dengan menggunakan JavaScript. Di sini untuk mencari data langsung, kami menggunakan skrip PHP dengan JavaScript murni.
Setelah menerapkan semua filter, misalkan kita ingin menghapus fiter, jadi kita harus me-refresh halaman, tetapi dalam tutorial ini kita juga menambahkan fitur untuk menghapus semua filter atau mengatur ulang filter. Jadi dengan mengklik tombol semua filter yang diterapkan akan dihapus dan itu akan memuat semua data produk di halaman web tanpa menyegarkan halaman web dengan menggunakan JavaScript murni.
Source code:
<!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 - Live Data Search - 8</h1>
<div class="row">
<div class="col-sm-3 p-3 bg-light">
<button type="button" name="clear_filter" class="btn btn-warning btn-sm form-control mb-2" id="clear_filter">Clear Filter</button>
<p class="fs-4 text-center border-bottom text-bold">Gender</p>
<div id="gender_filter" class="mb-2"></div>
<p class="fs-4 text-center border-bottom text-bold">Price</p>
<div id="price_filter" class="mb-2"></div>
<p class="fs-4 text-center border-bottom text-bold">Brand</p>
<div id="brand_filter" class="overflow-auto mb-3" style="height:350px;"></div>
</div>
<div class="col-sm-9">
<div class="input-group mt-3 mb-3">
<input type="text" class="form-control" id="search_textbox" placeholder="Search Product" aria-label="Search Product" aria-describedby="search_button" />
<button type="button" class="btn btn-primary" id="search_button">Search</button>
</div>
<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, query = '')
{
$('#product_area').style.display = 'none';
$('#skeleton_area').style.display = 'block';
$('#skeleton_area').innerHTML = make_skeleton();
fetch('process.php?page='+page+query+'').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;
}
load_filter();
function load_filter()
{
fetch('process.php?action=filter').then(function(response){
return response.json();
}).then(function(responseData){
if(responseData.gender)
{
if(responseData.gender.length > 0)
{
var html = '<div class="list-group">';
for(var i = 0; i < responseData.gender.length; i++)
{
html += '<label class="list-group-item">';
html += '<input type="radio" class="form-check-input me-1 gender_filter" name="gender_filter" value="'+responseData.gender[i].name+'" >';
html += responseData.gender[i].name+' <span class="text-muted">('+responseData.gender[i].total+')</span>';
html += '</label>';
}
html += '</div>';
$('#gender_filter').innerHTML = html;
var gender_elements = document.getElementsByClassName('gender_filter');
for(var i = 0; i < gender_elements.length; i++)
{
gender_elements[i].onclick = function(){
load_product(page = 1, make_query());
}
}
}
}
if(responseData.price)
{
if(responseData.price.length > 0)
{
var html = '<div class="list-group">';
for(var i = 0; i < responseData.price.length; i++)
{
html += '<a href="#" class="list-group-item list-group-item-action price_filter" id="'+responseData.price[i].condition+'"><span>₹</span> '+responseData.price[i].name+' <span class="text-muted">('+responseData.price[i].total+')</a>';
}
html += '</div>';
$('#price_filter').innerHTML = html;
var price_elements = document.getElementsByClassName('price_filter');
for(var i = 0; i < price_elements.length; i++)
{
price_elements[i].onclick = function()
{
remove_active_class(price_elements);
this.classList.add('active');
load_product(page = 1, make_query());
}
}
}
}
if(responseData.brand)
{
if(responseData.brand.length > 0)
{
var html = '<div class="list-group">';
for(var i = 0; i < responseData.brand.length; i++)
{
html += '<label class="list-group-item">';
html += '<input type="checkbox" class="form-check-input me-1 brand_filter" value="'+responseData.brand[i].name+'" />';
html += responseData.brand[i].name + ' <span class="text-muted">('+responseData.brand[i].total+')</span>';
html += '</label>';
}
html += '</div>';
$('#brand_filter').innerHTML = html;
var brand_elements = document.getElementsByClassName("brand_filter");
for(var i = 0; i < brand_elements.length; i++)
{
brand_elements[i].onclick = function(){
load_product(page = 1, make_query());
}
}
}
}
});
}
function make_query()
{
var query = '';
var gender_elements = document.getElementsByClassName('gender_filter');
for(var i = 0; i < gender_elements.length; i++)
{
if(gender_elements[i].checked)
{
query += '&gender_filter='+gender_elements[i].value+'';
}
}
var price_elements = document.getElementsByClassName('price_filter');
for(var i = 0; i < price_elements.length; i++)
{
if(price_elements[i].matches('.active'))
{
query += '&price_filter='+price_elements[i].getAttribute('id')+'';
}
}
var brand_elements = document.getElementsByClassName('brand_filter');
var brandlist = '';
for(var i = 0; i < brand_elements.length; i++)
{
if(brand_elements[i].checked)
{
brandlist += brand_elements[i].value +',';
}
}
if(brandlist != '')
{
query += '&brand_filter='+brandlist+'';
}
var search_query = $('#search_textbox').value;
query += '&search_filter='+search_query+'';
return query;
}
function remove_active_class(element)
{
for(var i = 0; i < element.length; i++)
{
if(element[i].matches('.active'))
{
element[i].classList.remove("active");
}
}
}
$('#clear_filter').onclick = function(){
var gender_elements = document.getElementsByClassName('gender_filter');
for(var count = 0; count < gender_elements.length; count++)
{
gender_elements[count].checked = false;
}
var price_elements = document.getElementsByClassName('price_filter');
remove_active_class(price_elements);
var brand_elements = document.getElementsByClassName('brand_filter');
for(var count = 0; count < brand_elements.length; count++)
{
brand_elements[count].checked = false;
}
$('#search_textbox').value = '';
load_product(1, '');
}
$('#search_button').onclick = function(){
var search_query = $('#search_textbox').value;
if(search_query != '')
{
load_product(page = 1, make_query());
}
}
</script>
C. Buat file proses.php
File ini telah digunakan untuk melakukan operasi sisi server. Di dalam file ini, menggunakan skrip PHP untuk memproses data sisi server. Pada file ini pertama-tama kita telah membuat koneksi database menggunakan kelas PHP PDO().
File ini telah menerima permintaan Ajax untuk mengambil data produk dari database dan membuat link pagination. Jadi, berdasarkan nilai variabel $page number yang telah didapat dari url dan berdasarkan nilai tersebut telah diambil data produk dari database untuk menampilkan produk halaman tertentu di halaman web. File ini juga mengambil data untuk berbagai jenis filter seperti filter jenis kelamin, filter rentang harga, filter pencarian, dan filter merek dari tabel Mysql.
Source code:
<?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;
}
$where = '';
$search_query = '';
if(isset($_GET["gender_filter"]))
{
$where .= ' gender = "'.trim($_GET["gender_filter"]).'" ';
$search_query .= '&gender_filter='.trim($_GET["gender_filter"]);
}
if(isset($_GET["price_filter"]))
{
if($where != '')
{
$where .= ' AND '. $_GET["price_filter"];
}
else
{
$where .= $_GET["price_filter"];
}
$search_query .= '&price_filter='.$_GET["price_filter"];
}
if(isset($_GET["brand_filter"]))
{
$brand_array = explode(",", $_GET["brand_filter"]);
$brand_condition = '';
foreach($brand_array as $brand)
{
$brand_condition .= 'brand = "' .$brand . '" OR ';
}
$brand_condition = substr($brand_condition, 0, -4);
if($where != '')
{
$where .= ' AND ('.$brand_condition.')';
}
else
{
$where .= $brand_condition;
}
$search_query .= '&brand_filter='.$_GET["brand_filter"];
}
if(isset($_GET["search_filter"]))
{
$search_string = str_replace(" ", "%", $_GET["search_filter"]);
if($where != '')
{
$where .= ' AND ( name LIKE "%'.$search_string.'%" ) ';
}
else
{
$where .= 'name LIKE "%'.$search_string.'%" ';
}
$search_query .= '&search_filter='.$_GET["search_filter"].'';
}
if($where != '')
{
$where = 'WHERE ' . $where;
}
$query = "
SELECT name, price, images, brand
FROM sample_data
".$where."
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.', `'.$search_query.'`)">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.', `'.$search_query.'`)">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].', `'.$search_query.'`)">'.$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);
}
if(isset($_GET["action"]))
{
$data = array();
$query = "
SELECT gender, COUNT(sample_id) AS Total
FROM sample_data
GROUP BY gender
";
foreach($connect->query($query) as $row)
{
$sub_data = array();
$sub_data['name'] = $row['gender'];
$sub_data['total'] = $row['Total'];
$data['gender'][] = $sub_data;
}
$price_range = array(
'price < 1000' => 'Under 1000',
'price > 1000 && price < 5000' => '1000 - 5000',
'price > 5000 && price < 10000' => '5000 - 10000',
'price > 10000 && price < 20000'=> '10000 - 20000',
'price > 20000' => 'Over 20000'
);
foreach($price_range as $key => $value)
{
$query = "
SELECT COUNT(sample_id) AS Total
FROM sample_data
WHERE ".$key."
";
$sub_data = array();
foreach($connect->query($query) as $row)
{
$sub_data['name'] = $value;
$sub_data['total'] = $row['Total'];
$sub_data['condition'] = $key;
}
$data['price'][] = $sub_data;
}
$query = "
SELECT brand, COUNT(sample_id) AS Total
FROM sample_data
GROUP BY brand
";
foreach($connect->query($query) as $row)
{
$sub_data = array();
$sub_data['name'] = $row['brand'];
$sub_data['total'] = $row['Total'];
$data['brand'][] = $sub_data;
}
echo json_encode($data);
}
?>
Sumber kode: thank for weblesson
