Khái niệm
Trong một trang web bán hàng bất kì luôn có một số lượng lớn sản phẩm, việc người dùng có thể tìm ra đúng sản phẩm mà họ muốn củng như lọc ra được những dòng sản phẩm mà họ quan tâm sẽ giúp người dùng tiết kiệm được thời gian hơn, nâng cao giá trị và bán được nhiều đơn hàng hơn. Bộ lọc sản phẩm là một chức năng mở rộng bằng HTML CSS và Javascript cho phép người dùng tìm kiếm và lọc ra những sản phẩm phù hợp với nhu cầu của họ.
Bộ lọc sản phẩm thường được sử dụng để lọc các thông tin như:
- Tên sản phẩm.
- Màu sắc sản phẩm.
- giá sản phẩm.
- Loại sản phẩm.
- Kích thước sản phẩm.
Xây dựng chức năng bộ lọc sản phẩm với Javascript
Tạo form cho bộ lọc ở HTML và CSS
Found 5 results
body{
min-height: 100vh;
font-family: monospace;
background-image:
linear-gradient(
to bottom right, #EFD7F4, #c5c7f1);
margin: 0;
}
.container{
background-color: #E9E0F7;
width: 1000px;
max-width: 100%;
margin: 50px auto 0;
border-radius: 10px;
}
.filter{
padding: 20px;
display: grid;
grid-template-columns: 32.666% 32.666% 32.666%;
column-gap: 1%;
row-gap: 10px;
}
.filter .item{
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.filter .item select,
.filter .item input,
.filter .item button{
width: 100%;
padding: 5px;
border: none;
background-color: transparent;
border-left: 1px solid #ddd;
outline: none;
}
.filter .item label{
display: block;
width: 40%;
padding: 0 10px;
}
.filter .item.submit button{
background-color: #AA82ED;
color: #fff;
}
.countResults{
font-size: xx-large;
text-align: center;
padding: 20px;
}
#list{
padding: 20px;
display: grid;
column-gap: 1%;
grid-template-columns: 32.66% 32.66% 32.66%;
row-gap: 10px;
}
#list .item img{
width: 90%;
height:300px;
object-fit: cover;
margin: 20px 0;
border-radius: 10px;
}
#list .item{
background-color: #fff5;
text-align: center;
border-radius: 10px;
}
#list .item .title{
font-weight: bold;
}
#list .item .price{
color: #F5B976;
letter-spacing: 1px;
padding: 20px;
}
Xây dựng các trường input và select ở HTML để tạo bộ lọc có name lần lược là: category, color, name, minPrice, minPrice.
- Category dùng để lọc theo loại sản phẩm.
- Color dùng để lọc theo màu sắc.
- Name dùng để lọc theo tên.
- MinPrice và maxPrice dùng để lọc giá trị sản phẩm ( minPrice <= giá sản phẩm <= maxPrice).
Ngoài ra ở HTML ta tạo một elment có id là list, id này dùng để chứa toàn bộ sản phẩm đã tìm được.
Tiến hành xây dựng chức năng bộ lọc sản phẩm với Javascript
Gọi lại những element bên HTML mà ta cần sử dụng để làm chức năng bộ lọc với Javascript.
let list = document.getElementById('list');
let filter = document.querySelector('.filter');
let count = document.getElementById('count');
Với list là nơi để hiển thị danh sách sản phẩm, filter là form input sử dụng cho bộ lọc ở HTML và count là element chứa số lượng sản phẩm trả về.
let listProducts = [
{
id: 1,
name: 'Name product white-black',
price: 205600,
quantity: 0,
image: 'img1.jpg',
nature: {
color: ['white', 'black'],
size: ['S', 'M', 'L'],
type: 'T-shirt'
}
},
{
id: 2,
name: 'Name product white-black-grey',
price: 300000,
quantiy: 30,
image: 'img2.jpg',
nature: {
color: ['white', 'black', 'grey'],
size: ['S', 'M', 'L'],
type: 'Polo'
}
},
{
id: 3,
name: 'Name product black',
price: 200000,
quantiy: 30,
image: 'img3.jpg',
nature: {
color: ['black'],
size: ['S', 'M', 'L'],
type: 'T-shirt'
}
},
{
id: 4,
name: 'Name product blue-black',
price: 400000,
quantiy: 30,
image: 'img4.jpg',
nature: {
color: ['black', 'blue'],
size: ['S', 'M', 'L'],
type: 'T-shirt'
}
},
{
id: 5,
name: 'Name product brown',
price: 320000,
quantiy: 30,
image: 'img5.jpg',
nature: {
color: ['brown'],
size: ['S', 'M', 'L'],
type: 'Polo'
}
},
{
id: 6,
name: 'Name product white-black',
price: 100000,
quantiy: 30,
image: 'img6.jpg',
nature: {
color: ['white', 'black'],
size: ['S', 'M', 'L'],
type: 'Shirt'
}
},
];
listsProduct là danh sách sản phẩm mặc định chưa qua bộ lọc. Mỗi item trong listsProduct sẽ tương ứng với một sản phẩm và mỗi sản phẩm sẽ gồm có các thuộc tính sau: id, name, price, quantity, image, color, size, và type.
let productFilter = listProducts;
showProduct(productFilter);
filter.addEventListener('submit', function(event){
event.preventDefault();
let valueFilter = event.target.elements;
productFilter = listProducts.filter(item => {
// check category
if(valueFilter.category.value != ''){
if(item.nature.type != valueFilter.category.value){
return false;
}
}
// check color
if(valueFilter.color.value != ''){
if(!item.nature.color.includes(valueFilter.color.value)){
return false;
}
}
// check name
if(valueFilter.name.value != ''){
if(!item.name.includes(valueFilter.name.value)){
return false;
}
}
// check min price
if(valueFilter.minPrice.value != ''){
if(item.price < valueFilter.minPrice.value){
return false;
}
}
// check max price
if(valueFilter.maxPrice.value != ''){
if(item.price > valueFilter.maxPrice.value){
return false;
}
}
return true;
})
showProduct(productFilter);
})
function showProduct(productFilter){
count.innerText = productFilter.length;
list.innerHTML = '';
productFilter.forEach(item => {
let newItem = document.createElement('div');
newItem.classList.add('item');
// create image
let newImage = new Image();
newImage.src = item.image;
newItem.appendChild(newImage);
// create name product
let newTitle = document.createElement('div');
newTitle.classList.add('title');
newTitle.innerText = item.name;
newItem.appendChild(newTitle);
// create price
let newPrice = document.createElement('div');
newPrice.classList.add('price');
newPrice.innerText = item.price.toLocaleString() + ' đ';
newItem.appendChild(newPrice);
list.appendChild(newItem);
});
}
Filter là form bên HTML khi nhận được sự kiện submit tức là sự kiện gửi dử liệu đi, nó sẽ thực hiện một function. Để ngăn tiến trình load trang mặc định mỗi lần ấn submit ta sẽ sử dụng preventDefault. Khi này toàn bộ dử liệu bên trong form sẽ đều nằm gọn trong event.target.elements.
Để thực hiện lọc một array trong javascript ta sử dụng filter, với item chính là từng row trong array sản phẩm, nếu trong quá trình lọc trả về true thì sản phẩm đó được lọc thành công và ngược lại thì sản phẩm đó sẽ không được lọc. Tức là với bất cứ một sản phẩm nào trong filter return false thì tức là sản phẩm đó không thỏa mãn điều kiện lọc sản phẩm trong Javascript.
Lần lược dựa vào các name trong form input để tiến hành tạo bộ lọc sản phẩm bằng javascript. Điều kiện đầu tiên là value của các trường này khác rổng, tức là khi này người dùng đã nhập gì đó để tìm kiếm rồi. Và nếu khi đối chiếu với các item mà nó không trùng nhau thì sẽ bỏ qua nó bằng cách return false.
Includes trong array được sử dụng để kiểm tra xem có tồn tại một value đầu vào trùng với mảng array bên Javascript hay không, nếu không tồn tại một giá trị được nhập từ input HTML trùng với mảng sản phẩm bên Javascript thì trả về false.
Includes trong string được dùng để đối chiếu hai đoạn văn bản, để xem trong đoạn văn bản nguồn có tồn tại một đoạn văn nhỏ thứ hai được lấy từ value bên HTML không, nếu không trả về false.
Cúi cùng kết quả của filter sẽ trả về những row sản phẩm thỏa mãn hết toàn bộ điều kiện, đây củng chính là kết quả lọc được.