Cách thêm nhiều bộ lọc tìm kiếm trong PHP với phân trang cho các bộ lọc sản phẩm trang web thương mại điện tử bằng cách sử dụng JavaScript Pure Vanilla JavaScript. Nếu bạn cũng đang tìm kiếm làm thế nào chúng tôi có thể triển khai các bộ lọc tìm kiếm với trang web Pagination In thương mại điện tử thì bạn đã đến đúng vì ở đây chúng tôi có Chia sẻ Hướng dẫn dự án PHP về cách tạo bộ lọc trong thư viện PHP với thư viện MySQL, JavaScript và Bootstrap 5. Theo hướng dẫn này, chúng tôi có công nghệ web mới nhất như Vanilla JavaScript và thư viện Bootstrap 5 để xây dựng bộ lọc sản phẩm trang web thương mại điện tử với phân trang.
Bây giờ chúng tôi đã đi đúng chủ đề và ở đây chúng tôi sẽ chỉ cho bạn cách lọc sản phẩm đã nằm trong phạm vi giá, bộ lọc thương hiệu hoặc giới tính. Lợi ích chính của Bộ lọc sản phẩm trang web Thương mại điện tử là dành cho sản phẩm bộ lọc từ số lượng lớn sản phẩm theo bộ lọc phạm vi giá, bộ lọc thương hiệu hoặc bộ lọc giới tính. Vì vậy, hầu hết trang web Thương mại điện tử trực tuyến đã đưa bộ lọc sản phẩm lên trang web của họ và với sự trợ giúp của sản phẩm khách hàng lọc đó từ số lượng lớn sản phẩm và tìm thấy sản phẩm cụ thể trong phạm vi giá hoặc thương hiệu của họ. Nếu bạn đã thấy bất kỳ trang web mua sắm trực tuyến nào, vì vậy trên trang web đó, có một số lượng lớn sản phẩm đã được liệt kê trên trang web đó, vì vậy khi chúng tôi xuất hiện trên trang web thương mại điện tử để mua sản phẩm thì chúng tôi phải đối mặt với khó khăn để tìm sản phẩm, vì vậy Vào thời điểm đó, bộ lọc sản phẩm sẽ giúp người dùng tìm kiếm sản phẩm trên trang web và nó đã giảm thời gian người dùng cho sản phẩm tìm thấy với sự trợ giúp của bộ lọc giá cả hoặc bộ lọc thương hiệu.
₹ '+responseData.price[i].name+' ['+responseData.price[i].total+']';
}
html += '
';
$['#price_filter'].innerHTML = html;
var price_elements = document.getElementsByClassName['price_filter'];
for[var i = 0; i < price_elements.length; i++]
{
price_elements[i]. title = 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 = '';
for[var i = 0; i < responseData.brand.length; i++]
{
html += '';
html += '';
html += responseData.brand[i].name + ' ['+responseData.brand[i].total+']';
html += '';
}
html += '
';
$['#brand_filter'].innerHTML = html;
var brand_elements = document.getElementsByClassName["brand_filter"];
for[var i = 0; i < brand_elements.length; i++]
{
brand_elements[i]. title = 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']. title = 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']. title = function[]{
var search_query = $['#search_textbox'].value;
if[search_query != '']
{
load_product[page = 1, make_query[]];
}
}
Quá trình.phpTệp này đã được sử dụng để thực hiện hoạt động phía máy chủ. Trong tệp này, chúng tôi đã sử dụng tập lệnh PHP cho dữ liệu phía máy chủ quá trình. Trong tệp này trước tiên, chúng tôi có kết nối cơ sở dữ liệu bằng lớp php pdo [].
Tệp này đã nhận được yêu cầu AJAX cho dữ liệu sản phẩm tìm nạp từ cơ sở dữ liệu và liên kết phân trang. Vì vậy, dựa trên giá trị biến số $ page đã được lấy từ URL và dựa trên giá trị đó, nó đã được tìm nạp dữ liệu sản phẩm từ cơ sở dữ liệu để hiển thị sản phẩm trang cụ thể trên trang web.
Tệp này cũng tìm nạp dữ liệu cho các loại bộ lọc khác nhau như bộ lọc giới tính, bộ lọc phạm vi giá, bộ lọc tìm kiếm và bộ lọc thương hiệu từ bảng MySQL.