Doing a min and max price product filtering for items using javascript/jQuery.
This is very similar to the size filtering post, however instead of checkboxes, it is 2 range sliders for a minimum and maximum price value.
Start by defining a default min and max price value and loading in all the items in the grid unfiltered:
let min_price = 0;
let max_price = 100;
$(document).ready(function () {
showAllItems();//Display all items with no filter applied
}); The default max price should be equal to or higher than the highest-priced item.
Next is to catch and make changes when the range sliders are moved/interacted with.
Get the value as an integer, apply it to a span text as a visual guide and then use the new min or max value with the item filter.
$('#min-price').on("change mousemove", function () {
min_price = parseInt($('#min-price').val());//Get the value
$('#min-price-txt').text('$' + min_price);//Set the value
showItemsFiltered();//Apply the filter
}); The showItemsFiltered() function with the conditions for the price min and max filtering applied:
function showItemsFiltered() {//Default grid to show all items on page load in
$("#display-items-div").empty();
for (let i = 0; i < category_items.length; i++) {//Go through the items but only show items that have size from show_sizes_array
if (category_items[i]['price'] <= max_price && category_items[i]['price'] >= min_price) {
let item_content = '<div class="col-12 col-md-4 text-center product-card" data-available-sizes="' + category_items[i]['sizes'] + '"><b>' + category_items[i]['title'] + '</b><br><img src="' + category_items[i]['thumbnail'] + '" height="64" width="64" alt="shoe thumbnail"><p>$' + category_items[i]['price'] + '</p></div>';
$("#display-items-div").append(item_content);//Display in grid
}
}
} let min_price = 0;
let max_price = 100;
$(document).ready(function () {
showAllItems();//Display all items with no filter applied
});
$('#min-price').on("change mousemove", function () {
min_price = parseInt($('#min-price').val());
$('#min-price-txt').text('$' + min_price);
showItemsFiltered();
});
$('#max-price').on("change mousemove", function () {
max_price = parseInt($('#max-price').val());
$('#max-price-txt').text('$' + max_price);
showItemsFiltered();
});
let category_items = [
{
"id": 1,
"category_id": 8,
"price": 39.42,
"title": "Shoes with id #1",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-10",
"US-MEN-11"
]
},
{
"id": 2,
"category_id": 8,
"price": 31.93,
"title": "Shoes with id #2",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-13"
]
},
{
"id": 3,
"category_id": 8,
"price": 49.44,
"title": "Shoes with id #3",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-14"
]
},
{
"id": 4,
"category_id": 58,
"price": 65.38,
"title": "Shoes with id #4",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-13"
]
},
{
"id": 5,
"category_id": 8,
"price": 27.21,
"title": "Shoes with id #5",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-9",
"US-MEN-8",
"US-MEN-10",
"US-MEN-11",
"US-MEN-12"
]
},
{
"id": 6,
"category_id": 8,
"price": 73.05,
"title": "Shoes with id #6",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-9",
"US-MEN-8",
"US-MEN-10",
"US-MEN-11",
"US-MEN-12",
"US-MEN-13"
]
},
{
"id": 7,
"category_id": 8,
"price": 51.96,
"title": "Shoes with id #7",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-9",
"US-MEN-8",
"US-MEN-10",
"US-MEN-11"
]
},
{
"id": 8,
"category_id": 8,
"price": 29.35,
"title": "Shoes with id #8",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-11",
"US-MEN-12",
"US-MEN-13"
]
},
{
"id": 9,
"category_id": 8,
"price": 80.00,
"title": "Shoes with id #9",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-9",
"US-MEN-8",
"US-MEN-10",
"US-MEN-11"
]
},
{
"id": 10,
"category_id": 8,
"price": 70.07,
"title": "Shoes with id #10",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-9",
"US-MEN-8",
"US-MEN-10"
]
},
{
"id": 11,
"category_id": 8,
"price": 79.37,
"title": "Shoes with id #11",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-9",
"US-MEN-8",
"US-MEN-10",
"US-MEN-11",
"US-MEN-12"
]
},
{
"id": 12,
"category_id": 8,
"price": 27.14,
"title": "Shoes with id #12",
"thumbnail": "https://www.transparentpng.com/download/adidas-shoes/a4xO3G-adidas-shoes-adidas-shoe-kids-superstar-daddy-grade.png",
"sizes": [
"US-MEN-9",
"US-MEN-8",
"US-MEN-10",
"US-MEN-11"
]
}
]
function showAllItems() {//Default grid to show all items on page load in
$("#display-items-div").empty();
for (let i = 0; i < category_items.length; i++) {
let item_content = '<div class="col-12 col-md-4 text-center product-card" data-available-sizes="' + category_items[i]['sizes'] + '"><b>' + category_items[i]['title'] + '</b><br><img src="' + category_items[i]['thumbnail'] + '" height="64" width="64" alt="shoe thumbnail"><p>$' + category_items[i]['price'] + '</p></div>';
$("#display-items-div").append(item_content);
}
}
function showItemsFiltered() {//Default grid to show all items on page load in
$("#display-items-div").empty();
for (let i = 0; i < category_items.length; i++) {//Go through the items but only show items that have size from show_sizes_array
if (category_items[i]['price'] <= max_price && category_items[i]['price'] >= min_price) {
let item_content = '<div class="col-12 col-md-4 text-center product-card" data-available-sizes="' + category_items[i]['sizes'] + '"><b>' + category_items[i]['title'] + '</b><br><img src="' + category_items[i]['thumbnail'] + '" height="64" width="64" alt="shoe thumbnail"><p>$' + category_items[i]['price'] + '</p></div>';
$("#display-items-div").append(item_content);//Display in grid
}
}
} <div class="container">
<div class="row">
<div class=" col-12 col-md-2">
<div class="card px-2">
<h2 class="text-center">Filter by</h2>
<hr>
<h4>Price:</h4>
<div class="card-body">
<form id="price-range-form">
<label for="min-price" class="form-label">Min price: </label>
<span id="min-price-txt">$0</span>
<input type="range" class="form-range" min="0" max="99" id="min-price" step="1" value="0">
<label for="max-price" class="form-label">Max price: </label>
<span id="max-price-txt">$100</span>
<input type="range" class="form-range" min="1" max="100" id="max-price" step="1" value="100">
</form>
</div>
</div>
</div>
<div class="col-12 col-md-10">
<div class="card">
<div class="card-body">
<div class="row" id="display-items-div">
</div>
</div>
</div>
</div>
</div>
</div>
A drained and empty Kennington reservoir images from a drone in early July 2024. The…
Merrimu Reservoir from drone. Click images to view larger.
Using FTP and PHP to get an array of file details such as size and…
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views in such a simple manner but making…
Laravel validation for checking if a field value exists in the database. The validation rule…