Create Basic Product Filters using jQuery

File Size: 85.4 KB
Views Total: 15502
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Basic Product Filters using jQuery

A basic jQuery implementation of product filters that allow you to filter html elements inside a container using Html5 data-* attributes.

Basic usage:

1. Load the necessary jQuery JavaScript library in the html page.

<script src="//"></script>

2. Create a list of products and group them using data-* attributes.

<div class="sections">
    <li class="grid-products" data-colour="red"><span>Product 1</span></li>
    <li class="grid-products" data-colour="yellow"><span>Product 2</span></li>
    <li class="grid-products" data-colour="green"><span>Product 3</span></li>
    <li class="grid-products" data-colour="red"><span>Product 4</span></li>
    <li class="grid-products" data-colour="blue"><span>Product 5</span></li>

3. Create checkbox based product filters.

<div id="filters" class="sections">
    <input type="checkbox" name="colour" id="red" value="red" >Red</input>
    <input type="checkbox" name="colour" id="blue" value="blue">Blue</input>
    <input type="checkbox" name="colour" id="green" value="green">Green</input>
    <input type="checkbox" name="colour" id="yellow" value="yellow">Yellow</input>
    <input type="button" id="none" value="Clear all"></input>

5. The core JavaScript to enable the product filters.

$(document).ready(function() {
  var $products = $('.grid-products'),
      $filters = $("#filters input[type='checkbox']"),
      product_filter = new ProductFilterLevel1($products, $filters);

function ProductFilterLevel1(products, filters) {
  var _this = this;

  this.init = function() {
    this.products = products;
    this.filters = filters;

  this.bindEvents = function() {;

  this.filterGridProducts = function() {
    var selectedFilters = _this.filters.filter(':checked');
    if (selectedFilters.length) {
      var selectedFiltersValues = [];
      selectedFilters.each(function() {
        var currentFilter = $(this);
        selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
    } else {;

  this.removeAllFilters = function() {
    _this.filters.prop('checked', false);;

This awesome jQuery plugin is developed by yuktikhurana. For more Advanced Usages, please check the demo page or visit the official website.