How to apply a product filter for sizes using checkboxes and jQuery/javascript.
First state the filter size array which will store the sizes to filter for:
let show_sizes_array = [];//Where the filtered sizes get stored
The following gets wrapped in a document ready state after the showAllItems() function (code listed below).
$(document).ready(function () {
showAllItems();//Display all items with no filter applied Each checkbox is given a data property: data-size
<div class="form-check">
<input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check"
data-size="US-MEN-9">
<label class="form-check-label" for="size-check">
US mens 8
</label>
</div> Now when there is checkbox interaction, the size parameter for that checkbox can be taken:
$('.size-filter-check').click(function () {//When a checkbox is clicked
let size_clicked = $(this).attr("data-size");//The certain size checkbox clicked
}); This can also be conditioned for if the checkbox is now ticked or it got unticked:
if ($(this).is(':checked')) {
//Became checked
} else {
//Is now unchecked so remove from the array
} If the checkbox got ticked/selected then add that size to the array to filter
show_sizes_array.push(size_clicked);//Was not checked so add to filter array showItemsFiltered();//Show items grid with filters
else remove it from this array:
show_sizes_array = show_sizes_array.filter(function (elem) {
return elem !== size_clicked;
});
showItemsFiltered();//Show items grid with filters showItemsFiltered() is the function that applies the filter array to the products sizes to check for a match. (this function is shown below).
A check can also be made for if there are no checkboxes checked/selected in which to reset and apply no filters:
if (!$('input[type=checkbox]').is(":checked")) {//No checkboxes are checked
show_sizes_array = [];//Clear size filter array
showAllItems();//Show all items with NO filters applied
} This concludes the document ready wrapper.
showAllItems() function simply lists all the items in the grid with no filtering applied:
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);
}
} showItemsFiltered() function filters the items for their sizes from the show_sizes_array which is built from the checkboxes:
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 (show_sizes_array.some(v => category_items[i]['sizes'].includes(v))) {
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
}
}
} Just assume this has come from an API endpoint:
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"
]
}
] The full HTML:
<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>Size:</h4>
<div class="card-body">
<form id="sizes-form">
<div class="form-check">
<input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check"
data-size="US-MEN-9">
<label class="form-check-label" for="size-check">
US mens 8
</label>
</div>
<div class="form-check">
<input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check"
data-size="US-MEN-9">
<label class="form-check-label" for="size-check">
US mens 9
</label>
</div>
<div class="form-check">
<input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check"
data-size="US-MEN-10">
<label class="form-check-label" for="size-check">
US mens 10
</label>
</div>
<div class="form-check">
<input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check"
data-size="US-MEN-11">
<label class="form-check-label" for="size-check">
US mens 11
</label>
</div>
<div class="form-check">
<input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check"
data-size="US-MEN-12">
<label class="form-check-label" for="size-check">
US mens 12
</label>
</div>
<div class="form-check">
<input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check"
data-size="US-MEN-13">
<label class="form-check-label" for="size-check">
US mens 13
</label>
</div>
<div class="form-check">
<input class="form-check-input size-filter-check" type="checkbox" value="" id="size-check"
data-size="US-MEN-14">
<label class="form-check-label" for="size-check">
US mens 14
</label>
</div>
</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…