How to apply a product filter for sizes using checkboxes and jQuery/javascript.
Live page filtering without a refresh can be done upon interaction with checkboxes that can apply an array of sizes to filter for.
Javascript / jQuery
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 appliedEach 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 filtersshowItemsFiltered() 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.
The functions
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
}
}
}Mock product data
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"
]
}
]HTML
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>