Filters
eCommerce filters
Filter component designed for eCommerce projects.
See also a page fully composed of the following elements.
Filter basic example
Filters
Condition
Avg. Customer Review
Price
Price
Size
Color
<!-- Section: Sidebar -->
<section>
<!-- Section: Filters -->
<section>
<h5>Filters</h5>
<!-- Section: Condition -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Condition</h6>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="new">
<label class="form-check-label small text-uppercase card-link-secondary" for="new">New</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="used">
<label class="form-check-label small text-uppercase card-link-secondary" for="used">Used</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="collectible">
<label class="form-check-label small text-uppercase card-link-secondary" for="collectible">Collectible</label>
</div>
<div class="form-check pl-0 mb-3 pb-1">
<input type="checkbox" class="form-check-input filled-in" id="renewed">
<label class="form-check-label small text-uppercase card-link-secondary" for="renewed">Renewed</label>
</div>
</section>
<!-- Section: Condition -->
<!-- Section: Average -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>
<a href="#!">
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">& Up</p>
</li>
</ul>
</a>
<a href="#!">
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">& Up</p>
</li>
</ul>
</a>
<a href="#!">
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">& Up</p>
</li>
</ul>
</a>
<a href="#!">
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">& Up</p>
</li>
</ul>
</a>
</section>
<!-- Section: Average -->
<!-- Section: Price -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Price</h6>
<div class="form-check pl-0 mb-3">
<input type="radio" class="form-check-input" id="under25" name="materialExampleRadios">
<label class="form-check-label small text-uppercase card-link-secondary" for="under25">Under $25</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="radio" class="form-check-input" id="2550" name="materialExampleRadios">
<label class="form-check-label small text-uppercase card-link-secondary" for="2550">$25 to $50</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="radio" class="form-check-input" id="50100" name="materialExampleRadios">
<label class="form-check-label small text-uppercase card-link-secondary" for="50100">$50 to $100</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="radio" class="form-check-input" id="100200" name="materialExampleRadios">
<label class="form-check-label small text-uppercase card-link-secondary" for="100200">$100 to $200</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="radio" class="form-check-input" id="200above" name="materialExampleRadios">
<label class="form-check-label small text-uppercase card-link-secondary" for="200above">$200 & Above</label>
</div>
<form>
<div class="d-flex align-items-center mt-4 pb-1">
<div class="md-form md-outline my-0">
<input id="from" type="text" class="form-control mb-0">
<label for="form">$ Min</label>
</div>
<p class="px-2 mb-0 text-muted"> - </p>
<div class="md-form md-outline my-0">
<input id="to" type="text" class="form-control mb-0">
<label for="to">$ Max</label>
</div>
</div>
</form>
</section>
<!-- Section: Price -->
<!-- Section: Price version 2 -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Price</h6>
<div class="slider-price d-flex align-items-center my-4">
<span class="font-weight-normal small text-muted mr-2">$0</span>
<form class="multi-range-field w-100 mb-1">
<input id="multi" class="multi-range" type="range" />
</form>
<span class="font-weight-normal small text-muted ml-2">$100</span>
</div>
</section>
<!-- Section: Price version 2 -->
<!-- Section: Size -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Size</h6>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="34">
<label class="form-check-label small text-uppercase card-link-secondary" for="34">34</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="36">
<label class="form-check-label small text-uppercase card-link-secondary" for="36">36</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="38">
<label class="form-check-label small text-uppercase card-link-secondary" for="38">38</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="40">
<label class="form-check-label small text-uppercase card-link-secondary" for="40">40</label>
</div>
<a class="btn btn-link text-muted p-0" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
More
</a>
<div class="collapse pt-3" id="collapseExample">
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="42">
<label class="form-check-label small text-uppercase card-link-secondary" for="42">42</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="44">
<label class="form-check-label small text-uppercase card-link-secondary" for="44">44</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="46">
<label class="form-check-label small text-uppercase card-link-secondary" for="46">46</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="50">
<label class="form-check-label small text-uppercase card-link-secondary" for="50">50</label>
</div>
</div>
</section>
<!-- Section: Size -->
<!-- Section: Color -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Color</h6>
<div class="btn-group btn-group-toggle btn-color-group d-block mt-n2 ml-n2" data-toggle="buttons">
<label class="btn rounded-circle white border-inset-grey p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
<label class="btn rounded-circle grey p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
<label class="btn rounded-circle black p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
<label class="btn rounded-circle green p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
<label class="btn rounded-circle blue p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
<label class="btn rounded-circle purple p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
<label class="btn rounded-circle yellow p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
<label class="btn rounded-circle indigo p-3 m-2">
<input type="checkbox" checked autocomplete="off">
</label>
<label class="btn rounded-circle red p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
<label class="btn rounded-circle orange p-3 m-2">
<input type="checkbox" autocomplete="off">
</label>
</div>
</section>
<!-- Section: Color -->
</section>
<!-- Section: Filters -->
</section>
<!-- Section: Sidebar -->
$('#multi').mdbRange({
single: {
active: true,
multi: {
active: true,
rangeLength: 1
},
}
});
Functionality - filtering
Filtering a product list is an important feature - it increases user experience greatly. In this section we'll show you step by step how to easily create basic filters - we'll start off with static .json file and filtering on the client side and then we'll integrate our app with a simple backend.
Products from .json file
1. Basic layout
Let's start with creating a simple layout:
<body class="skin-light">
<!--Main Navigation-->
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-light fixed-top scrolling-navbar navbar-transparent">
<div class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="https://mdbecommerce.com/">
<i class="fab fa-mdb fa-3x" alt="mdb logo"></i>
</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Right -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#!" class="nav-link navbar-link-2 waves-effect">
<span class="badge badge-pill red">1</span>
<i class="fas fa-shopping-cart pl-0"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<i class="united kingdom flag m-0"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
<a class="dropdown-item" href="#!">Something else here</a>
</div>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Shop
</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Contact
</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Sign in
</a>
</li>
<li class="nav-item pl-2 mb-2 mb-md-0">
<a href="#!" type="button"
class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign
up</a>
</li>
</ul>
</div>
<!-- Links -->
</div>
</nav>
<!-- Navbar -->
<div class="jumbotron jumbotron-image color-grey-light"
style="background-image: url('https://mdbootstrap.com/img/Photos/Others/clothes(5)-crop.jpg'); height: 400px;">
<div class="mask rgba-black-strong d-flex align-items-center h-100">
<div class="container text-center white-text py-5">
<h1 class="mb-0">Shop</h1>
</div>
</div>
</div>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container">
<!--Grid row-->
<div class="row mt-5">
<!--Grid column-->
<div class="col-md-4 mb-4">
<!-- Section: Sidebar -->
<section>
<!-- Section: Categories -->
<section>
<h5>Subcategories</h5>
<div class="text-muted small text-uppercase mb-5">
<p class="mb-4">return to <a href="#!" class="card-link-secondary"><strong>Clothing, Shoes,
Accessories</strong></a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Dresses</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Tops, Tees & Blouses</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Sweaters</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Fashion Hoodies & Sweatshirts</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Jeans</a></p>
</div>
</section>
<!-- Section: Categories -->
<!-- Section: Filters -->
<section class="filters">
<h5>Filters</h5>
<!-- Section: Condition -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Condition</h6>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="new"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="new"
>New</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="used"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="used"
>Used</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="collectible"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="collectible"
>Collectible</label
>
</div>
<div class="form-check pl-0 mb-3 pb-1">
<input
type="checkbox"
class="form-check-input filled-in"
id="renewed"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="renewed"
>Renewed</label
>
</div>
</section>
<!-- Section: Condition -->
<!-- Section: Average -->
<section>
<h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>
<label for="customer-rating-4" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-4"
class="filter-option"
type="checkbox"
/>
</label>
<br />
<label for="customer-rating-3" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-3"
class="filter-option"
type="checkbox"
/>
</label>
<br />
<label for="customer-rating-2" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-2"
class="filter-option"
type="checkbox"
/>
</label>
<br />
<label for="customer-rating-1" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-1"
class="filter-option"
type="checkbox"
/>
</label>
</section>
<!-- Section: Average -->
<!-- Section: Price -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Price</h6>
<div class="form-check pl-0 mb-3">
<input
type="radio"
class="form-check-input"
id="under25"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="under25"
>Under $25</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="radio"
class="form-check-input"
id="2550"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="2550"
>$25 to $50</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="radio"
class="form-check-input"
id="50100"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50100"
>$50 to $100</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="radio"
class="form-check-input"
id="100200"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="100200"
>$100 to $200</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
class="form-check-input"
id="200above"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="200above"
>$200 & Above</label
>
</div>
</section>
<!-- Section: Price -->
<!-- Section: Size -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Size</h6>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="34"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="34"
>34</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="36"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="36"
>36</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="38"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="38"
>38</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="40"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="40"
>40</label
>
</div>
<a
class="btn btn-link text-muted p-0"
data-toggle="collapse"
href="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
More
</a>
<div class="collapse pt-3" id="collapseExample">
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="42"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="42"
>42</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="44"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="44"
>44</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="46"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="46"
>46</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="form-check-input filled-in"
id="50"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50"
>50</label
>
</div>
</div>
</section>
<!-- Section: Size -->
<!-- Section: Color -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Color</h6>
<div
class="btn-group btn-group-toggle btn-color-group d-block mt-n2 ml-n2"
data-toggle="buttons"
>
<label
for="color-1"
class="btn rounded-circle white border-inset-grey p-3 m-2"
>
<input
id="color-1"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-2" class="btn rounded-circle grey p-3 m-2">
<input
id="color-2"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-3" class="btn rounded-circle black p-3 m-2">
<input
id="color-3"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-4" class="btn rounded-circle green p-3 m-2">
<input
id="color-4"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-5" class="btn rounded-circle blue p-3 m-2">
<input
id="color-5"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-6" class="btn rounded-circle purple p-3 m-2">
<input
id="color-6"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-7" class="btn rounded-circle yellow p-3 m-2">
<input
id="color-7"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-8" class="btn rounded-circle indigo p-3 m-2">
<input
id="color-8"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-9" class="btn rounded-circle red p-3 m-2">
<input
id="color-9"
class="filter-option"
type="checkbox"
/>
</label>
<label for="color-10" class="btn rounded-circle orange p-3 m-2">
<input
id="color-10"
class="filter-option"
type="checkbox"
/>
</label>
</div>
</section>
<!-- Section: Color -->
</section>
<!-- Section: Filters -->
</section>
<!-- Section: Sidebar -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-8 mb-4">
<!-- Section: Block Content -->
<section class="mb-3">
<div class="row d-flex justify-content-around align-items-center">
<div class="col-12 col-md-3 text-center text-md-left">
<a href="#!" class="text-reset"><i class="fas fa-th-list fa-lg mr-1"></i></a href="#!">
<a href="#!" class="text-reset"><i class="fas fa-th-large fa-lg"></i></a href="#!">
</div>
<div class="col-12 col-md-5">
<div class="d-flex flex-wrap">
<!-- sorting -->
<div class="select-outline position-relative w-100">
<select id="sort" class="mdb-select md-form md-outline">
<option value="1">Best rating</option>
<option value="2">Lowest price first</option>
<option value="3">Highest price first</option>
</select>
<label>Sort</label>
</div>
<!-- sorting -->
</div>
</div>
<div class="col-12 col-md-4 text-center">
<nav aria-label="Page navigation example">
<ul class="pagination pagination-circle justify-content-center float-md-right mb-0">
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-left"></i></a></li>
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-right"></i></a></li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Section: Block Content -->
<!--Section: Block Content-->
<section>
<!-- Loader -->
<!-- Loader -->
<!-- Grid row -->
<div class="row" id="products">
<!-- Products -->
</div>
<!-- Grid row -->
</section>
<!--Section: Block Content-->
<!-- Section: Block Content -->
<section>
<div class="row d-flex justify-content-around align-items-center">
<div class="col-12 col-md-3 text-center text-md-left">
<a href="#!" class="text-reset"><i class="fas fa-th-list fa-lg mr-1"></i></a href="#!">
<a href="#!" class="text-reset"><i class="fas fa-th-large fa-lg"></i></a href="#!">
</div>
<div class="col-12 col-md-5">
<div class="d-flex flex-wrap">
<div class="select-outline position-relative w-100">
<select class="mdb-select md-outline md-form" searchable="Search here..">
<option value="" disabled selected>Choose category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</select>
<label>Label example</label>
<button class="btn-save btn btn-primary btn-sm mt-2">Save</button>
</div>
</div>
</div>
<div class="col-12 col-md-4 text-center">
<nav aria-label="Page navigation example">
<ul class="pagination pagination-circle justify-content-center float-md-right mb-0">
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-left"></i></a></li>
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-right"></i></a></li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Section: Block Content -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<div class="color-primary">
<div class="container">
<!-- Grid row-->
<div class="row py-4 d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!</h6>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-7 text-center text-md-right">
<!-- Facebook -->
<a class="fb-ic">
<i class="fab fa-facebook-f white-text mr-4"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic">
<i class="fab fa-twitter white-text mr-4"> </i>
</a>
<!-- Google +-->
<a class="gplus-ic">
<i class="fab fa-google-plus-g white-text mr-4"> </i>
</a>
<!--Linkedin -->
<a class="li-ic">
<i class="fab fa-linkedin-in white-text mr-4"> </i>
</a>
<!--Instagram-->
<a class="ins-ic">
<i class="fab fa-instagram white-text"> </i>
</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row-->
</div>
</div>
<!-- Footer Links -->
<div class="container text-center text-md-left pt-4 pt-md-5">
<!-- Grid row -->
<div class="row mt-1 mt-md-0 mb-4 mb-md-0">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>About me</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<p class="foot-desc mb-0">Here you can use rows and columns to organize your footer content. Lorem
ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Products</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled foot-desc">
<li class="mb-2">
<a href="#!">MDBootstrap</a>
</li>
<li class="mb-2">
<a href="#!">MDWordPress</a>
</li>
<li class="mb-2">
<a href="#!">BrandFlow</a>
</li>
<li class="mb-2">
<a href="#!">Bootstrap Angular</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Useful links</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled foot-desc">
<li class="mb-2">
<a href="#!">Your Account</a>
</li>
<li class="mb-2">
<a href="#!">Become an Affiliate</a>
</li>
<li class="mb-2">
<a href="#!">Shipping Rates</a>
</li>
<li class="mb-2">
<a href="#!">Help</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Contacts</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="fa-ul foot-desc ml-4">
<li class="mb-2"><span class="fa-li"><i class="far fa-map"></i></span>New York, Avenue Street 10
</li>
<li class="mb-2"><span class="fa-li"><i class="fas fa-phone-alt"></i></span>042 876 836 908</li>
<li class="mb-2"><span class="fa-li"><i class="far fa-envelope"></i></span>company@example.com</li>
<li><span class="fa-li"><i class="far fa-clock"></i></span>Monday - Friday: 10-17</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
2. Product list
In your app's main folder create a product.json file:
[
{
"id": 1,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40"],
"condition": "new",
"color": "blue",
"price": 12.99,
"keywords": ["t-shirt", "sweatshitrt"],
"discount": 0
},
{
"id": 2,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40", "44"],
"condition": "new",
"color": "red",
"price": 12.99,
"discount": 10
},
{
"id": 3,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 3,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36"],
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 10
},
{
"id": 4,
"category": "jackets",
"name": "Denim Jacket",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 10
},
{
"id": 5,
"category": "jeans",
"name": "Ripped jeans",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/11.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "renewed",
"color": "blue",
"price": 20.99,
"discount": 5
},
{
"id": 6,
"category": "jeans",
"name": "Boyfriend jeans",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/10.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": false,
"size": ["34", "36", "38", "40"],
"condition": "used",
"color": "blue",
"price": 20.99,
"discount": 5
},
{
"id": 7,
"category": "shirts",
"name": "Ripped sweatshirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "collectible",
"color": "white",
"price": 29.99,
"discount": 5
},
{
"id": 8,
"category": "shirts",
"name": "Longsleeve",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40"],
"condition": "collectible",
"color": "black",
"price": 120.99,
"discount": 0
},
{
"id": 8,
"category": "shirts",
"name": "Stripped sweatshirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/6.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "white",
"price": 32.99,
"discount": 10
},
{
"id": 9,
"category": "trousers",
"name": "Red chinos",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "red",
"price": 62.99,
"discount": 10
},
{
"id": 10,
"category": "coats",
"name": "Camel coat",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "used",
"color": "brown",
"price": 62.99,
"discount": 10
},
{
"id": 11,
"category": "jeans",
"name": "Blue jeans",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "blue",
"price": 42.99,
"discount": 0
},
{
"id": 12,
"category": "shirts",
"name": "Orange T-shirt",
"rating": 3,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "orange",
"price": 12.99,
"discount": 0
},
{
"id": 13,
"category": "skirts",
"name": "Ballerina skirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["38", "36"],
"condition": "collectible",
"color": "white",
"price": 12.99,
"discount": 0
}
]
3. Import products
Now we need to import those products in our main.js file:
$(document).ready(() => {
$(".mdb-select").materialSelect();
getProducts();
})
function getProducts() {
$.get("products.json", (products) => {
renderProducts(products);
})
.fail(() => { console.log("error"); }); }
4. Dynamic content
To display products dynamically, we'll create two functions:
createTemplate which will return a product's layout
basing on its data and renderProducts which will
create an entire template:
function createTemplate(product) {
return `
<div class="col-md-4 mb-5">
<div >
<div class="view zoom overlay rounded z-depth-2" style="height: 260px;">
<img class="img-fluid w-100"
src="${product.image}" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="${product.image}">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="text-center pt-4">
<h5>${product.name}</h5>
<p><span class="mr-1"><strong>$${product.price}</strong></span></p>
</div>
</div>
</div>
`;
}
function renderProducts(products) {
const template =
products.length === 0 ? `
<p>No matching results found.</p>
` : products.map((product) => createTemplate(product)).join("\n");
$("#products").html(template);
}
5. Filters
Once our products are displayed, it's time to work on filters.
Each section has a custom attribute filter and its value is used again, as a custom attribute, on each one of inner inputs (along with filter-option class) - this approach will allow us to extend filters later without modifying the javascript code.
Category filter
Section: attribute - filter="condition"
Inputs: attribute - condition="...", class="filter-option"
Condition
<!-- Section: Condition -->
<section filter="condition" class="mb-4">
<h6 class="font-weight-bold mb-3">Condition</h6>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="filter-option form-check-input filled-in"
condition="new"
id="new"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="new"
>New</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
condition="used"
type="checkbox"
class="filter-option form-check-input filled-in"
id="used"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="used"
>Used</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
condition="collectible"
type="checkbox"
class="filter-option form-check-input filled-in"
id="collectible"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="collectible"
>Collectible</label
>
</div>
<div class="form-check pl-0 mb-3 pb-1">
<input
condition="renewed"
type="checkbox"
class="filter-option form-check-input filled-in"
id="renewed"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="renewed"
>Renewed</label
>
</div>
</section>
<!-- Section: Condition -->
Checkbox size filter
Section: attribute - filter="size"
Inputs: attribute - size="...", class="filter-option"
Size
<!-- Section: Size -->
<section class="mb-4" filter="size">
<h6 class="font-weight-bold mb-3">Size</h6>
<div class="form-check pl-0 mb-3">
<input
size="34"
type="checkbox"
class="filter-option form-check-input filled-in"
id="34"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="34"
>34</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="36"
type="checkbox"
class="filter-option form-check-input filled-in"
id="36"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="36"
>36</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="38"
type="checkbox"
class="filter-option form-check-input filled-in"
id="38"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="38"
>38</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="40"
type="checkbox"
class="filter-option form-check-input filled-in"
id="40"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="40"
>40</label
>
</div>
<a
class="btn btn-link text-muted p-0"
data-toggle="collapse"
href="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
More
</a>
<div class="collapse pt-3" id="collapseExample">
<div class="form-check pl-0 mb-3">
<input
size="42"
type="checkbox"
class="filter-option form-check-input filled-in"
id="42"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="42"
>42</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="44"
type="checkbox"
class="filter-option form-check-input filled-in"
id="44"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="44"
>44</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="46"
type="checkbox"
class="filter-option form-check-input filled-in"
id="46"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="46"
>46</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="50"
type="checkbox"
class="filter-option form-check-input filled-in"
id="50"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50"
>50</label
>
</div>
</div>
</section>
<!-- Section: Size -->
Rating filter
Section: attribute - filter="rating"
Inputs: attribute - rating="...", class="filter-option"
Avg. Customer Review
<!-- Section: Average -->
<section filter="rating">
<h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>
<label for="customer-rating-4" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-4"
class="filter-option"
type="checkbox"
rating="4"
/>
</label>
<br />
<label for="customer-rating-3" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-3"
class="filter-option"
type="checkbox"
rating="3"
/>
</label>
<br />
<label for="customer-rating-2" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-2"
class="filter-option"
type="checkbox"
rating="2"
/>
</label>
<br />
<label for="customer-rating-1" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-1"
class="filter-option"
type="checkbox"
rating="1"
/>
</label>
</section>
<!-- Section: Average -->
6. Dynamic filter list
Defining filters by selecting elements with a filter attribute instead of providing a fixed list, will allow us to extend filter panel easily.
<!-- Section: Filters -->
<section class="filters">
<h5>Filters</h5>
<!-- Section: Condition -->
<section filter="condition" class="mb-4">
<h6 class="font-weight-bold mb-3">Condition</h6>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="filter-option form-check-input filled-in"
condition="new"
id="new"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="new"
>New</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
condition="used"
type="checkbox"
class="filter-option form-check-input filled-in"
id="used"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="used"
>Used</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
condition="collectible"
type="checkbox"
class="filter-option form-check-input filled-in"
id="collectible"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="collectible"
>Collectible</label
>
</div>
<div class="form-check pl-0 mb-3 pb-1">
<input
condition="renewed"
type="checkbox"
class="filter-option form-check-input filled-in"
id="renewed"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="renewed"
>Renewed</label
>
</div>
</section>
<!-- Section: Condition -->
<!-- Section: Average -->
<section filter="rating">
<h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>
<label for="customer-rating-4" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-4"
class="filter-option"
type="checkbox"
rating="4"
/>
</label>
<br />
<label for="customer-rating-3" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-3"
class="filter-option"
type="checkbox"
rating="3"
/>
</label>
<br />
<label for="customer-rating-2" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-2"
class="filter-option"
type="checkbox"
rating="2"
/>
</label>
<br />
<label for="customer-rating-1" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-1"
class="filter-option"
type="checkbox"
rating="1"
/>
</label>
</section>
<!-- Section: Average -->
<!-- Section: Price -->
<section class="mb-4" filter="price">
<h6 class="font-weight-bold mb-3">Price</h6>
<div class="form-check pl-0 mb-3">
<input
price="0-25"
type="radio"
class="filter-option form-check-input"
id="under25"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="under25"
>Under $25</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="25-50"
type="radio"
class="filter-option form-check-input"
id="2550"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="2550"
>$25 to $50</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="50-100"
type="radio"
class="filter-option form-check-input"
id="50100"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50100"
>$50 to $100</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="100-200"
type="radio"
class="filter-option form-check-input"
id="100200"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="100200"
>$100 to $200</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="200-*"
type="radio"
class="filter-option form-check-input"
id="200above"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="200above"
>$200 & Above</label
>
</div>
</section>
<!-- Section: Price -->
<!-- Section: Size -->
<section class="mb-4" filter="size">
<h6 class="font-weight-bold mb-3">Size</h6>
<div class="form-check pl-0 mb-3">
<input
size="34"
type="checkbox"
class="filter-option form-check-input filled-in"
id="34"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="34"
>34</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="36"
type="checkbox"
class="filter-option form-check-input filled-in"
id="36"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="36"
>36</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="38"
type="checkbox"
class="filter-option form-check-input filled-in"
id="38"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="38"
>38</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="40"
type="checkbox"
class="filter-option form-check-input filled-in"
id="40"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="40"
>40</label
>
</div>
<a
class="btn btn-link text-muted p-0"
data-toggle="collapse"
href="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
More
</a>
<div class="collapse pt-3" id="collapseExample">
<div class="form-check pl-0 mb-3">
<input
size="42"
type="checkbox"
class="filter-option form-check-input filled-in"
id="42"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="42"
>42</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="44"
type="checkbox"
class="filter-option form-check-input filled-in"
id="44"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="44"
>44</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="46"
type="checkbox"
class="filter-option form-check-input filled-in"
id="46"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="46"
>46</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="50"
type="checkbox"
class="filter-option form-check-input filled-in"
id="50"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50"
>50</label
>
</div>
</div>
</section>
<!-- Section: Size -->
<!-- Section: Color -->
<section class="mb-4" filter="color">
<h6 class="font-weight-bold mb-3">Color</h6>
<div
class="btn-group btn-group-toggle btn-color-group d-block mt-n2 ml-n2"
data-toggle="buttons"
>
<label
for="color-1"
class="btn rounded-circle white border-inset-grey p-3 m-2"
>
<input
id="color-1"
class="filter-option"
type="checkbox"
color="white"
/>
</label>
<label for="color-2" class="btn rounded-circle grey p-3 m-2">
<input
id="color-2"
class="filter-option"
type="checkbox"
color="grey"
/>
</label>
<label for="color-3" class="btn rounded-circle black p-3 m-2">
<input
id="color-3"
class="filter-option"
type="checkbox"
color="black"
/>
</label>
<label for="color-4" class="btn rounded-circle green p-3 m-2">
<input
id="color-4"
class="filter-option"
type="checkbox"
color="green"
/>
</label>
<label for="color-5" class="btn rounded-circle blue p-3 m-2">
<input
id="color-5"
class="filter-option"
type="checkbox"
color="blue"
/>
</label>
<label for="color-6" class="btn rounded-circle purple p-3 m-2">
<input
id="color-6"
class="filter-option"
type="checkbox"
color="purple"
/>
</label>
<label for="color-7" class="btn rounded-circle yellow p-3 m-2">
<input
id="color-7"
class="filter-option"
type="checkbox"
color="yellow"
/>
</label>
<label for="color-8" class="btn rounded-circle indigo p-3 m-2">
<input
id="color-8"
class="filter-option"
type="checkbox"
color="indigo"
/>
</label>
<label for="color-9" class="btn rounded-circle red p-3 m-2">
<input
id="color-9"
class="filter-option"
type="checkbox"
color="red"
/>
</label>
<label for="color-10" class="btn rounded-circle orange p-3 m-2">
<input
id="color-10"
class="filter-option"
type="checkbox"
color="orange"
/>
</label>
</div>
</section>
<!-- Section: Color -->
</section>
<!-- Section: Filters -->
$(document).ready(() => {
let filters = getFilters();
getProducts();
});
});
function getFilters() {
const filters = Array.from($("[filter]")).map(
(el) => el.attributes.filter.value
);
const dict = {};
filters.forEach((filter) => {
dict[filter] = [];
});
return dict;
}
7. Filter product list
Firstly, we need to add onchange event listener to filter options - the handler will update filters and call the getProducts method with new values.
$(document).ready(() => {
$(".mdb-select").materialSelect();
let filters = getFilters();
getProducts(filters);
$(".filter-option").change((e) => {
e.stopImmediatePropagation();
for (let filter of Object.keys(filters)) {
if (e.target.attributes[filter]) {
filters = updateFilters(
filters,
filter,
e.target.attributes[filter].value,
e.target.checked
);
}
}
getProducts(filters);
});
});
function getFilters() {
const filters = Array.from($("[filter]")).map(
(el) => el.attributes.filter.value
);
const dict = {};
filters.forEach((filter) => {
dict[filter] = [];
});
return dict;
}
function updateFilters(filters, filter, option, value) {
const dict = { ...filters };
if (filter === "price") {
dict.price = [option];
} else if (filter === "rating") {
dict.rating = [option];
} else if (value && filters[filter].indexOf(option) === -1)
dict[filter].push(option);
else if (!value)
dict[filter] = dict[filter].filter((entry) => entry !== option);
return dict;
}
function getProducts(filters) {
$.get("products.json", (products) => {
renderProducts(applyFilters(products, filters));
})
.fail(() => {
console.log("error");
});
}
function applyFilters(products, filters) {
return products.filter((product) => {
for (let filter of Object.keys(filters)) {
if (filters[filter].length > 0 && !matchFilters(filter, filters, product))
return false;
}
return true;
});
}
function matchFilters(filter, filters, data) {
if (filter === "price") {
let [min, max] = filters.price[0].split("-");
if (max === "*") return data.price > min;
else return data.price > min && data.price < max;
} else if (filter === "rating") {
return data.rating >= filters.rating[0];
}
if (!Array.isArray(data[filter]))
return filters[filter].indexOf(data[filter]) !== -1;
for (let value of data[filter]) {
if (filters[filter].indexOf(value) !== -1) return true;
}
return false;
}
function createTemplate(product) {
return `
<div class="col-md-4 mb-5">
<div >
<div class="view zoom overlay rounded z-depth-2" style="height: 260px;">
<img class="img-fluid w-100"
src="${product.image}" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="${product.image}">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="text-center pt-4">
<h5>${product.name}</h5>
<p><span class="mr-1"><strong>$${product.price}</strong></span></p>
</div>
</div>
</div>
`
}
function renderProducts(products) {
const template =
products.length === 0
? `<p>No matching results found.</p>`
: products.map((product) => createTemplate(product)).join("\n");
$("#products").html(template);
}
As you've might noticed, price and rating require customized approach - in those cases we're matching range not exact value.
8. Sort products
Now we'll extend the getProducts to include sorting logic and add a select to allow user to alter it.
<!-- Sorting -->
<div class="select-outline position-relative w-100">
<select id="sort" class="mdb-select md-form md-outline">
<option value="1">Best rating</option>
<option value="2">Lowest price first</option>
<option value="3">Highest price first</option>
</select>
<label>Sort</label>
</div>
<!-- Sorting -->
$(document).ready(() => {
$(".mdb-select").materialSelect();
let filters = getFilters();
getProducts(filters);
$(".mdb-select").change((e) => {
e.stopImmediatePropagation();
const property = e.target.value === '1' ? 'rating' : 'price';
const increase = e.target.value === '2'
getProducts(filters, property, increase);
});
$(".filter-option").change((e) => {
e.stopImmediatePropagation();
for (let filter of Object.keys(filters)) {
if (e.target.attributes[filter]) {
filters = updateFilters(
filters,
filter,
e.target.attributes[filter].value,
e.target.checked
);
}
}
getProducts(filters);
});
});
function getFilters() {
//...
}
function updateFilters(filters, filter, option, value) {
//...
}
function getProducts(filters, sortProperty = "rating", increase = false) {
$.get("products.json", (products) => {
let productList;
productList = products.sort((a, b) => {
if (a[sortProperty] === b[sortProperty]) return 0;
if (increase ? a[sortProperty] > b[sortProperty] : a[sortProperty] < b[sortProperty])
return 1;
else return -1;
});
renderProducts(applyFilters(productList, filters));
})
.fail(() => {
console.log("error");
});
}
function applyFilters(products, filters) {
//...
}
function matchFilters(filter, filters, data) {
//...
}
function createTemplate(product) {
//...
}
function renderProducts(products) {
//..
}
Setting the initial values for sortProperty and increase enables the initial sorting
9. Final effect with loader
<body class="skin-light">
<!--Main Navigation-->
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-light fixed-top scrolling-navbar navbar-transparent">
<div class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="https://mdbecommerce.com/">
<i class="fab fa-mdb fa-3x" alt="mdb logo"></i>
</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Right -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#!" class="nav-link navbar-link-2 waves-effect">
<span class="badge badge-pill red">1</span>
<i class="fas fa-shopping-cart pl-0"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<i class="united kingdom flag m-0"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
<a class="dropdown-item" href="#!">Something else here</a>
</div>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Shop
</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Contact
</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Sign in
</a>
</li>
<li class="nav-item pl-2 mb-2 mb-md-0">
<a href="#!" type="button"
class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign
up</a>
</li>
</ul>
</div>
<!-- Links -->
</div>
</nav>
<!-- Navbar -->
<div class="jumbotron jumbotron-image color-grey-light"
style="background-image: url('https://mdbootstrap.com/img/Photos/Others/clothes(5)-crop.jpg'); height: 400px;">
<div class="mask rgba-black-strong d-flex align-items-center h-100">
<div class="container text-center white-text py-5">
<h1 class="mb-0">Shop</h1>
</div>
</div>
</div>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container">
<!--Grid row-->
<div class="row mt-5">
<!--Grid column-->
<div class="col-md-4 mb-4">
<!-- Section: Sidebar -->
<section>
<!-- Section: Categories -->
<section>
<h5>Subcategories</h5>
<div class="text-muted small text-uppercase mb-5">
<p class="mb-4">return to <a href="#!" class="card-link-secondary"><strong>Clothing, Shoes,
Accessories</strong></a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Dresses</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Tops, Tees & Blouses</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Sweaters</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Fashion Hoodies & Sweatshirts</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Jeans</a></p>
</div>
</section>
<!-- Section: Categories -->
<!-- Section: Filters -->
<section class="filters">
<h5>Filters</h5>
<!-- Section: Condition -->
<section filter="condition" class="mb-4">
<h6 class="font-weight-bold mb-3">Condition</h6>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="filter-option form-check-input filled-in"
condition="new"
id="new"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="new"
>New</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
condition="used"
type="checkbox"
class="filter-option form-check-input filled-in"
id="used"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="used"
>Used</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
condition="collectible"
type="checkbox"
class="filter-option form-check-input filled-in"
id="collectible"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="collectible"
>Collectible</label
>
</div>
<div class="form-check pl-0 mb-3 pb-1">
<input
condition="renewed"
type="checkbox"
class="filter-option form-check-input filled-in"
id="renewed"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="renewed"
>Renewed</label
>
</div>
</section>
<!-- Section: Condition -->
<!-- Section: Average -->
<section filter="rating">
<h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>
<label for="customer-rating-4" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-4"
class="filter-option"
type="checkbox"
rating="4"
/>
</label>
<br />
<label for="customer-rating-3" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-3"
class="filter-option"
type="checkbox"
rating="3"
/>
</label>
<br />
<label for="customer-rating-2" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-2"
class="filter-option"
type="checkbox"
rating="2"
/>
</label>
<br />
<label for="customer-rating-1" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-1"
class="filter-option"
type="checkbox"
rating="1"
/>
</label>
</section>
<!-- Section: Average -->
<!-- Section: Price -->
<section class="mb-4" filter="price">
<h6 class="font-weight-bold mb-3">Price</h6>
<div class="form-check pl-0 mb-3">
<input
price="0-25"
type="radio"
class="filter-option form-check-input"
id="under25"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="under25"
>Under $25</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="25-50"
type="radio"
class="filter-option form-check-input"
id="2550"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="2550"
>$25 to $50</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="50-100"
type="radio"
class="filter-option form-check-input"
id="50100"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50100"
>$50 to $100</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="100-200"
type="radio"
class="filter-option form-check-input"
id="100200"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="100200"
>$100 to $200</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="200-*"
type="radio"
class="filter-option form-check-input"
id="200above"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="200above"
>$200 & Above</label
>
</div>
</section>
<!-- Section: Price -->
<!-- Section: Size -->
<section class="mb-4" filter="size">
<h6 class="font-weight-bold mb-3">Size</h6>
<div class="form-check pl-0 mb-3">
<input
size="34"
type="checkbox"
class="filter-option form-check-input filled-in"
id="34"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="34"
>34</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="36"
type="checkbox"
class="filter-option form-check-input filled-in"
id="36"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="36"
>36</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="38"
type="checkbox"
class="filter-option form-check-input filled-in"
id="38"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="38"
>38</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="40"
type="checkbox"
class="filter-option form-check-input filled-in"
id="40"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="40"
>40</label
>
</div>
<a
class="btn btn-link text-muted p-0"
data-toggle="collapse"
href="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
More
</a>
<div class="collapse pt-3" id="collapseExample">
<div class="form-check pl-0 mb-3">
<input
size="42"
type="checkbox"
class="filter-option form-check-input filled-in"
id="42"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="42"
>42</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="44"
type="checkbox"
class="filter-option form-check-input filled-in"
id="44"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="44"
>44</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="46"
type="checkbox"
class="filter-option form-check-input filled-in"
id="46"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="46"
>46</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="50"
type="checkbox"
class="filter-option form-check-input filled-in"
id="50"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50"
>50</label
>
</div>
</div>
</section>
<!-- Section: Size -->
<!-- Section: Color -->
<section class="mb-4" filter="color">
<h6 class="font-weight-bold mb-3">Color</h6>
<div
class="btn-group btn-group-toggle btn-color-group d-block mt-n2 ml-n2"
data-toggle="buttons"
>
<label
for="color-1"
class="btn rounded-circle white border-inset-grey p-3 m-2"
>
<input
id="color-1"
class="filter-option"
type="checkbox"
color="white"
/>
</label>
<label for="color-2" class="btn rounded-circle grey p-3 m-2">
<input
id="color-2"
class="filter-option"
type="checkbox"
color="grey"
/>
</label>
<label for="color-3" class="btn rounded-circle black p-3 m-2">
<input
id="color-3"
class="filter-option"
type="checkbox"
color="black"
/>
</label>
<label for="color-4" class="btn rounded-circle green p-3 m-2">
<input
id="color-4"
class="filter-option"
type="checkbox"
color="green"
/>
</label>
<label for="color-5" class="btn rounded-circle blue p-3 m-2">
<input
id="color-5"
class="filter-option"
type="checkbox"
color="blue"
/>
</label>
<label for="color-6" class="btn rounded-circle purple p-3 m-2">
<input
id="color-6"
class="filter-option"
type="checkbox"
color="purple"
/>
</label>
<label for="color-7" class="btn rounded-circle yellow p-3 m-2">
<input
id="color-7"
class="filter-option"
type="checkbox"
color="yellow"
/>
</label>
<label for="color-8" class="btn rounded-circle indigo p-3 m-2">
<input
id="color-8"
class="filter-option"
type="checkbox"
color="indigo"
/>
</label>
<label for="color-9" class="btn rounded-circle red p-3 m-2">
<input
id="color-9"
class="filter-option"
type="checkbox"
color="red"
/>
</label>
<label for="color-10" class="btn rounded-circle orange p-3 m-2">
<input
id="color-10"
class="filter-option"
type="checkbox"
color="orange"
/>
</label>
</div>
</section>
<!-- Section: Color -->
</section>
<!-- Section: Filters -->
</section>
<!-- Section: Sidebar -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-8 mb-4">
<!-- Section: Block Content -->
<section class="mb-3">
<div class="row d-flex justify-content-around align-items-center">
<div class="col-12 col-md-3 text-center text-md-left">
<a href="#!" class="text-reset"><i class="fas fa-th-list fa-lg mr-1"></i></a href="#!">
<a href="#!" class="text-reset"><i class="fas fa-th-large fa-lg"></i></a href="#!">
</div>
<div class="col-12 col-md-5">
<div class="d-flex flex-wrap">
<!-- Sorting -->
<div class="select-outline position-relative w-100">
<select id="sort" class="mdb-select md-form md-outline">
<option value="1">Best rating</option>
<option value="2">Lowest price first</option>
<option value="3">Highest price first</option>
</select>
<label>Sort</label>
</div>
<!-- Sorting -->
</div>
</div>
<div class="col-12 col-md-4 text-center">
<nav aria-label="Page navigation example">
<ul class="pagination pagination-circle justify-content-center float-md-right mb-0">
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-left"></i></a></li>
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-right"></i></a></li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Section: Block Content -->
<!--Section: Block Content-->
<section>
<!-- Loader -->
<div id="loader" class="loader-overlay">
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<!-- Loader -->
<!-- Grid row -->
<div class="row" id="products">
</div>
<!-- Grid row -->
</section>
<!--Section: Block Content-->
<!-- Section: Block Content -->
<section>
<div class="row d-flex justify-content-around align-items-center">
<div class="col-12 col-md-3 text-center text-md-left">
<a href="#!" class="text-reset"><i class="fas fa-th-list fa-lg mr-1"></i></a href="#!">
<a href="#!" class="text-reset"><i class="fas fa-th-large fa-lg"></i></a href="#!">
</div>
<div class="col-12 col-md-5">
<div class="d-flex flex-wrap">
<div class="select-outline position-relative w-100">
<select class="mdb-select md-outline md-form" searchable="Search here..">
<option value="" disabled selected>Choose category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</select>
<label>Label example</label>
<button class="btn-save btn btn-primary btn-sm mt-2">Save</button>
</div>
</div>
</div>
<div class="col-12 col-md-4 text-center">
<nav aria-label="Page navigation example">
<ul class="pagination pagination-circle justify-content-center float-md-right mb-0">
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-left"></i></a></li>
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-right"></i></a></li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Section: Block Content -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<div class="color-primary">
<div class="container">
<!-- Grid row-->
<div class="row py-4 d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!</h6>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-7 text-center text-md-right">
<!-- Facebook -->
<a class="fb-ic">
<i class="fab fa-facebook-f white-text mr-4"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic">
<i class="fab fa-twitter white-text mr-4"> </i>
</a>
<!-- Google +-->
<a class="gplus-ic">
<i class="fab fa-google-plus-g white-text mr-4"> </i>
</a>
<!--Linkedin -->
<a class="li-ic">
<i class="fab fa-linkedin-in white-text mr-4"> </i>
</a>
<!--Instagram-->
<a class="ins-ic">
<i class="fab fa-instagram white-text"> </i>
</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row-->
</div>
</div>
<!-- Footer Links -->
<div class="container text-center text-md-left pt-4 pt-md-5">
<!-- Grid row -->
<div class="row mt-1 mt-md-0 mb-4 mb-md-0">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>About me</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<p class="foot-desc mb-0">Here you can use rows and columns to organize your footer content. Lorem
ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Products</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled foot-desc">
<li class="mb-2">
<a href="#!">MDBootstrap</a>
</li>
<li class="mb-2">
<a href="#!">MDWordPress</a>
</li>
<li class="mb-2">
<a href="#!">BrandFlow</a>
</li>
<li class="mb-2">
<a href="#!">Bootstrap Angular</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Useful links</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled foot-desc">
<li class="mb-2">
<a href="#!">Your Account</a>
</li>
<li class="mb-2">
<a href="#!">Become an Affiliate</a>
</li>
<li class="mb-2">
<a href="#!">Shipping Rates</a>
</li>
<li class="mb-2">
<a href="#!">Help</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Contacts</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="fa-ul foot-desc ml-4">
<li class="mb-2"><span class="fa-li"><i class="far fa-map"></i></span>New York, Avenue Street 10
</li>
<li class="mb-2"><span class="fa-li"><i class="fas fa-phone-alt"></i></span>042 876 836 908</li>
<li class="mb-2"><span class="fa-li"><i class="far fa-envelope"></i></span>company@example.com</li>
<li><span class="fa-li"><i class="far fa-clock"></i></span>Monday - Friday: 10-17</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
$(document).ready(() => {
$(".mdb-select").materialSelect();
let filters = getFilters();
getProducts(filters);
$("#sort").change((e) => {
e.stopImmediatePropagation();
const property = e.target.value === '1' ? 'rating' : 'price';
const increase = e.target.value === '2'
getProducts(filters, property, increase);
});
$(".filter-option").change((e) => {
e.stopImmediatePropagation();
for (let filter of Object.keys(filters)) {
if (e.target.attributes[filter]) {
filters = updateFilters(
filters,
filter,
e.target.attributes[filter].value,
e.target.checked
);
}
}
getProducts(filters);
});
});
function getFilters() {
const filters = Array.from($("[filter]")).map(
(el) => el.attributes.filter.value
);
const dict = {};
filters.forEach((filter) => {
dict[filter] = [];
});
return dict;
}
function updateFilters(filters, filter, option, value) {
const dict = { ...filters };
if (filter === "price") {
dict.price = [option];
} else if (filter === "rating") {
dict.rating = [option];
} else if (value && filters[filter].indexOf(option) === -1)
dict[filter].push(option);
else if (!value)
dict[filter] = dict[filter].filter((entry) => entry !== option);
return dict;
}
function getProducts(filters, sortProperty = "rating", increase = false) {
$('#loader').css('display', 'flex');
$.get("products.json", (products) => {
let productList;
productList = products.sort((a, b) => {
if (a[sortProperty] === b[sortProperty]) return 0;
if (increase ? a[sortProperty] > b[sortProperty] : a[sortProperty] < b[sortProperty])
return 1;
else return -1;
});
renderProducts(applyFilters(productList, filters));
})
.fail(() => {
console.log("error");
$('#loader').css('display', 'none');
renderProducts([]);
});
}
function applyFilters(products, filters) {
return products.filter((product) => {
for (let filter of Object.keys(filters)) {
if (filters[filter].length > 0 && !matchFilters(filter, filters, product))
return false;
}
return true;
});
}
function matchFilters(filter, filters, data) {
if (filter === "price") {
let [min, max] = filters.price[0].split("-");
if (max === "*") return data.price > min;
else return data.price > min && data.price < max;
} else if (filter === "rating") {
return data.rating >= filters.rating[0];
}
if (!Array.isArray(data[filter]))
return filters[filter].indexOf(data[filter]) !== -1;
for (let value of data[filter]) {
if (filters[filter].indexOf(value) !== -1) return true;
}
return false;
}
function createTemplate(product) {
return `
<div class="col-md-4 mb-5">
<div >
<div class="view zoom overlay rounded z-depth-2" style="height: 260px;">
<img class="img-fluid w-100"
src="${product.image}" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="${product.image}">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="text-center pt-4">
<h5>${product.name}</h5>
<p><span class="mr-1"><strong>$${product.price}</strong></span></p>
</div>
</div>
</div> `
}
function renderProducts(products) {
setTimeout(() => {
$('#loader').css('display', 'none');
}, 300)
const template =
products.length === 0
? `<p>No matching results found.</p>`
: products.map((product) => createTemplate(product)).join("\n");
$("#products").html(template);
}
.loader-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
z-index: 998;
}
.loader-overlay .preloader-wrapper {
position: fixed;
top: 50%;
}
[
{
"id": 1,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40"],
"condition": "new",
"color": "blue",
"price": 12.99,
"keywords": ["t-shirt", "sweatshitrt"],
"discount": 0
},
{
"id": 2,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40", "44"],
"condition": "new",
"color": "red",
"price": 12.99,
"discount": 10
},
{
"id": 3,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 3,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36"],
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 10
},
{
"id": 4,
"category": "jackets",
"name": "Denim Jacket",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 10
},
{
"id": 5,
"category": "jeans",
"name": "Ripped jeans",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/11.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "renewed",
"color": "blue",
"price": 20.99,
"discount": 5
},
{
"id": 6,
"category": "jeans",
"name": "Boyfriend jeans",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/10.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": false,
"size": ["34", "36", "38", "40"],
"condition": "used",
"color": "blue",
"price": 20.99,
"discount": 5
},
{
"id": 7,
"category": "shirts",
"name": "Ripped sweatshirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "collectible",
"color": "white",
"price": 29.99,
"discount": 5
},
{
"id": 8,
"category": "shirts",
"name": "Longsleeve",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40"],
"condition": "collectible",
"color": "black",
"price": 120.99,
"discount": 0
},
{
"id": 8,
"category": "shirts",
"name": "Stripped sweatshirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/6.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "white",
"price": 32.99,
"discount": 10
},
{
"id": 9,
"category": "trousers",
"name": "Red chinos",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "red",
"price": 62.99,
"discount": 10
},
{
"id": 10,
"category": "coats",
"name": "Camel coat",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "used",
"color": "brown",
"price": 62.99,
"discount": 10
},
{
"id": 11,
"category": "jeans",
"name": "Blue jeans",
"rating": 5,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "blue",
"price": 42.99,
"discount": 0
},
{
"id": 12,
"category": "shirts",
"name": "Orange T-shirt",
"rating": 3,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "orange",
"price": 12.99,
"discount": 0
},
{
"id": 13,
"category": "skirts",
"name": "Ballerina skirt",
"rating": 4,
"image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.jpg",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["38", "36"],
"condition": "collectible",
"color": "white",
"price": 12.99,
"discount": 0
}
]
Backend integration
1. Move filtering and sorting logic to the application's backend
In this example, we'll be using node.js syntax - but the solution should work equally well with other programmic languages.
We won't be going into details of creating an entire backend here - we'll assume that, in a technology of choice, you'll create a route /products which executes a getProducts function upon get requests.
In this example we are using products.json file again - although this time it's located on the server. In real life application you will make a request to a database with parameters based on a request's query.
const products = require("../../products.json");
module.exports = {
getProducts(req, res) {
const { filters, sort } = req.query;
let productList = this.applyFilters((products), filters);
if (productList.length > 0) {
productList = this.sortProducts(productList, sort);
res.status(200).send(productList);
}
else {
res.sendStatus(404);
}
},
applyFilters(products = [], filters = []) {
return products.filter((product) => {
for (let filter of Object.keys(filters)) {
if (
filters[filter].length > 0 &&
!this.matchFilters(filter, filters, product)
)
return false;
}
return true;
});
},
matchFilters(filter, filters, data) {
if (filter === "price") {
let [min, max] = filters.price[0].split("-");
if (max === "*") return data.price > min;
else return data.price > min && data.price < max;
} else if (filter === "rating") {
return data.rating >= filters.rating[0];
}
if (!Array.isArray(data[filter]))
return filters[filter].indexOf(data[filter]) !== -1;
for (let value of data[filter]) {
if (filters[filter].indexOf(value) !== -1) return true;
}
return false;
},
sortProducts(products, { property = 'rating', increase = false }) {
return products.sort((a, b) => {
if (a[property] === b[property]) return 0;
if (increase === 'true' ? a[property] > b[property] : a[property] < b[property])
return 1;
else return -1;
});
}
};
2. API request
Now we just need to update the getProducts function to make a request to your app's backend:
function getProducts(filters, property = "rating", increase = false) {
$('#loader').css("display", "flex")
$.get(
YOUR_URL,
{ filters, sort: { property, increase } },
(products) => {
renderProducts(products);
}
)
.fail(() => {
renderProducts([])
})
}
3. Final effect
<body class="skin-light">
<!--Main Navigation-->
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-light fixed-top scrolling-navbar navbar-transparent">
<div class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="https://mdbecommerce.com/">
<i class="fab fa-mdb fa-3x" alt="mdb logo"></i>
</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Right -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#!" class="nav-link navbar-link-2 waves-effect">
<span class="badge badge-pill red">1</span>
<i class="fas fa-shopping-cart pl-0"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<i class="united kingdom flag m-0"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
<a class="dropdown-item" href="#!">Something else here</a>
</div>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Shop
</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Contact
</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link waves-effect">
Sign in
</a>
</li>
<li class="nav-item pl-2 mb-2 mb-md-0">
<a href="#!" type="button"
class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign
up</a>
</li>
</ul>
</div>
<!-- Links -->
</div>
</nav>
<!-- Navbar -->
<div class="jumbotron jumbotron-image color-grey-light"
style="background-image: url('https://mdbootstrap.com/img/Photos/Others/clothes(5)-crop.jpg'); height: 400px;">
<div class="mask rgba-black-strong d-flex align-items-center h-100">
<div class="container text-center white-text py-5">
<h1 class="mb-0">Shop</h1>
</div>
</div>
</div>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container">
<!--Grid row-->
<div class="row mt-5">
<!--Grid column-->
<div class="col-md-4 mb-4">
<!-- Section: Sidebar -->
<section>
<!-- Section: Categories -->
<section>
<h5>Subcategories</h5>
<div class="text-muted small text-uppercase mb-5">
<p class="mb-4">return to <a href="#!" class="card-link-secondary"><strong>Clothing, Shoes,
Accessories</strong></a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Dresses</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Tops, Tees & Blouses</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Sweaters</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Fashion Hoodies & Sweatshirts</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Jeans</a></p>
</div>
</section>
<!-- Section: Categories -->
<!-- Section: Filters -->
<section class="filters">
<h5>Filters</h5>
<!-- Section: Condition -->
<section filter="condition" class="mb-4">
<h6 class="font-weight-bold mb-3">Condition</h6>
<div class="form-check pl-0 mb-3">
<input
type="checkbox"
class="filter-option form-check-input filled-in"
condition="new"
id="new"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="new"
>New</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
condition="used"
type="checkbox"
class="filter-option form-check-input filled-in"
id="used"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="used"
>Used</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
condition="collectible"
type="checkbox"
class="filter-option form-check-input filled-in"
id="collectible"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="collectible"
>Collectible</label
>
</div>
<div class="form-check pl-0 mb-3 pb-1">
<input
condition="renewed"
type="checkbox"
class="filter-option form-check-input filled-in"
id="renewed"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="renewed"
>Renewed</label
>
</div>
</section>
<!-- Section: Condition -->
<!-- Section: Average -->
<section filter="rating">
<h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>
<label for="customer-rating-4" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-4"
class="filter-option"
type="checkbox"
rating="4"
/>
</label>
<br />
<label for="customer-rating-3" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-3"
class="filter-option"
type="checkbox"
rating="3"
/>
</label>
<br />
<label for="customer-rating-2" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-2"
class="filter-option"
type="checkbox"
rating="2"
/>
</label>
<br />
<label for="customer-rating-1" class="z-depth-0 py-0">
<ul class="rating waves-light mb-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">
& Up
</p>
</li>
</ul>
<input
id="customer-rating-1"
class="filter-option"
type="checkbox"
rating="1"
/>
</label>
</section>
<!-- Section: Average -->
<!-- Section: Price -->
<section class="mb-4" filter="price">
<h6 class="font-weight-bold mb-3">Price</h6>
<div class="form-check pl-0 mb-3">
<input
price="0-25"
type="radio"
class="filter-option form-check-input"
id="under25"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="under25"
>Under $25</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="25-50"
type="radio"
class="filter-option form-check-input"
id="2550"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="2550"
>$25 to $50</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="50-100"
type="radio"
class="filter-option form-check-input"
id="50100"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50100"
>$50 to $100</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="100-200"
type="radio"
class="filter-option form-check-input"
id="100200"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="100200"
>$100 to $200</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
price="200-*"
type="radio"
class="filter-option form-check-input"
id="200above"
name="materialExampleRadios"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="200above"
>$200 & Above</label
>
</div>
</section>
<!-- Section: Price -->
<!-- Section: Size -->
<section class="mb-4" filter="size">
<h6 class="font-weight-bold mb-3">Size</h6>
<div class="form-check pl-0 mb-3">
<input
size="34"
type="checkbox"
class="filter-option form-check-input filled-in"
id="34"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="34"
>34</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="36"
type="checkbox"
class="filter-option form-check-input filled-in"
id="36"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="36"
>36</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="38"
type="checkbox"
class="filter-option form-check-input filled-in"
id="38"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="38"
>38</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="40"
type="checkbox"
class="filter-option form-check-input filled-in"
id="40"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="40"
>40</label
>
</div>
<a
class="btn btn-link text-muted p-0"
data-toggle="collapse"
href="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
More
</a>
<div class="collapse pt-3" id="collapseExample">
<div class="form-check pl-0 mb-3">
<input
size="42"
type="checkbox"
class="filter-option form-check-input filled-in"
id="42"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="42"
>42</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="44"
type="checkbox"
class="filter-option form-check-input filled-in"
id="44"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="44"
>44</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="46"
type="checkbox"
class="filter-option form-check-input filled-in"
id="46"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="46"
>46</label
>
</div>
<div class="form-check pl-0 mb-3">
<input
size="50"
type="checkbox"
class="filter-option form-check-input filled-in"
id="50"
/>
<label
class="form-check-label small text-uppercase card-link-secondary"
for="50"
>50</label
>
</div>
</div>
</section>
<!-- Section: Size -->
<!-- Section: Color -->
<section class="mb-4" filter="color">
<h6 class="font-weight-bold mb-3">Color</h6>
<div
class="btn-group btn-group-toggle btn-color-group d-block mt-n2 ml-n2"
data-toggle="buttons"
>
<label
for="color-1"
class="btn rounded-circle white border-inset-grey p-3 m-2"
>
<input
id="color-1"
class="filter-option"
type="checkbox"
color="white"
/>
</label>
<label for="color-2" class="btn rounded-circle grey p-3 m-2">
<input
id="color-2"
class="filter-option"
type="checkbox"
color="grey"
/>
</label>
<label for="color-3" class="btn rounded-circle black p-3 m-2">
<input
id="color-3"
class="filter-option"
type="checkbox"
color="black"
/>
</label>
<label for="color-4" class="btn rounded-circle green p-3 m-2">
<input
id="color-4"
class="filter-option"
type="checkbox"
color="green"
/>
</label>
<label for="color-5" class="btn rounded-circle blue p-3 m-2">
<input
id="color-5"
class="filter-option"
type="checkbox"
color="blue"
/>
</label>
<label for="color-6" class="btn rounded-circle purple p-3 m-2">
<input
id="color-6"
class="filter-option"
type="checkbox"
color="purple"
/>
</label>
<label for="color-7" class="btn rounded-circle yellow p-3 m-2">
<input
id="color-7"
class="filter-option"
type="checkbox"
color="yellow"
/>
</label>
<label for="color-8" class="btn rounded-circle indigo p-3 m-2">
<input
id="color-8"
class="filter-option"
type="checkbox"
color="indigo"
/>
</label>
<label for="color-9" class="btn rounded-circle red p-3 m-2">
<input
id="color-9"
class="filter-option"
type="checkbox"
color="red"
/>
</label>
<label for="color-10" class="btn rounded-circle orange p-3 m-2">
<input
id="color-10"
class="filter-option"
type="checkbox"
color="orange"
/>
</label>
</div>
</section>
<!-- Section: Color -->
</section>
<!-- Section: Filters -->
</section>
<!-- Section: Sidebar -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-8 mb-4">
<!-- Section: Block Content -->
<section class="mb-3">
<div class="row d-flex justify-content-around align-items-center">
<div class="col-12 col-md-3 text-center text-md-left">
<a href="#!" class="text-reset"><i class="fas fa-th-list fa-lg mr-1"></i></a href="#!">
<a href="#!" class="text-reset"><i class="fas fa-th-large fa-lg"></i></a href="#!">
</div>
<div class="col-12 col-md-5">
<div class="d-flex flex-wrap">
<!-- Sorting -->
<div class="select-outline position-relative w-100">
<select id="sort" class="mdb-select md-form md-outline">
<option value="1">Best rating</option>
<option value="2">Lowest price first</option>
<option value="3">Highest price first</option>
</select>
<label>Sort</label>
</div>
<!-- Sorting -->
</div>
</div>
<div class="col-12 col-md-4 text-center">
<nav aria-label="Page navigation example">
<ul class="pagination pagination-circle justify-content-center float-md-right mb-0">
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-left"></i></a></li>
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-right"></i></a></li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Section: Block Content -->
<!--Section: Block Content-->
<section>
<!-- Loader -->
<div id="loader" class="loader-overlay">
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<!-- Loader -->
<!-- Grid row -->
<div class="row" id="products">
</div>
<!-- Grid row -->
</section>
<!--Section: Block Content-->
<!-- Section: Block Content -->
<section>
<div class="row d-flex justify-content-around align-items-center">
<div class="col-12 col-md-3 text-center text-md-left">
<a href="#!" class="text-reset"><i class="fas fa-th-list fa-lg mr-1"></i></a href="#!">
<a href="#!" class="text-reset"><i class="fas fa-th-large fa-lg"></i></a href="#!">
</div>
<div class="col-12 col-md-5">
<div class="d-flex flex-wrap">
<div class="select-outline position-relative w-100">
<select class="mdb-select md-outline md-form" searchable="Search here..">
<option value="" disabled selected>Choose category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</select>
<label>Label example</label>
<button class="btn-save btn btn-primary btn-sm mt-2">Save</button>
</div>
</div>
</div>
<div class="col-12 col-md-4 text-center">
<nav aria-label="Page navigation example">
<ul class="pagination pagination-circle justify-content-center float-md-right mb-0">
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-left"></i></a></li>
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link"><i class="fas fa-chevron-right"></i></a></li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Section: Block Content -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<div class="color-primary">
<div class="container">
<!-- Grid row-->
<div class="row py-4 d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!</h6>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-7 text-center text-md-right">
<!-- Facebook -->
<a class="fb-ic">
<i class="fab fa-facebook-f white-text mr-4"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic">
<i class="fab fa-twitter white-text mr-4"> </i>
</a>
<!-- Google +-->
<a class="gplus-ic">
<i class="fab fa-google-plus-g white-text mr-4"> </i>
</a>
<!--Linkedin -->
<a class="li-ic">
<i class="fab fa-linkedin-in white-text mr-4"> </i>
</a>
<!--Instagram-->
<a class="ins-ic">
<i class="fab fa-instagram white-text"> </i>
</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row-->
</div>
</div>
<!-- Footer Links -->
<div class="container text-center text-md-left pt-4 pt-md-5">
<!-- Grid row -->
<div class="row mt-1 mt-md-0 mb-4 mb-md-0">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>About me</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<p class="foot-desc mb-0">Here you can use rows and columns to organize your footer content. Lorem
ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Products</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled foot-desc">
<li class="mb-2">
<a href="#!">MDBootstrap</a>
</li>
<li class="mb-2">
<a href="#!">MDWordPress</a>
</li>
<li class="mb-2">
<a href="#!">BrandFlow</a>
</li>
<li class="mb-2">
<a href="#!">Bootstrap Angular</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Useful links</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled foot-desc">
<li class="mb-2">
<a href="#!">Your Account</a>
</li>
<li class="mb-2">
<a href="#!">Become an Affiliate</a>
</li>
<li class="mb-2">
<a href="#!">Shipping Rates</a>
</li>
<li class="mb-2">
<a href="#!">Help</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Contacts</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="fa-ul foot-desc ml-4">
<li class="mb-2"><span class="fa-li"><i class="far fa-map"></i></span>New York, Avenue Street 10
</li>
<li class="mb-2"><span class="fa-li"><i class="fas fa-phone-alt"></i></span>042 876 836 908</li>
<li class="mb-2"><span class="fa-li"><i class="far fa-envelope"></i></span>company@example.com</li>
<li><span class="fa-li"><i class="far fa-clock"></i></span>Monday - Friday: 10-17</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
$(document).ready(() => {
$(".mdb-select").materialSelect();
let filters = getFilters();
getProducts(filters);
$(".mdb-select").change((e) => {
e.stopImmediatePropagation();
const property = e.target.value === "1" ? "rating" : "price";
const increase = e.target.value === "2";
getProducts(filters, property, increase);
});
$(".filter-option").change((e) => {
e.stopImmediatePropagation();
for (let filter of Object.keys(filters)) {
if (e.target.attributes[filter]) {
filters = updateFilters(
filters,
filter,
e.target.attributes[filter].value,
e.target.checked
);
}
}
getProducts(filters);
});
});
function getFilters() {
const filters = Array.from($("[filter]")).map(
(el) => el.attributes.filter.value
);
const dict = {};
filters.forEach((filter) => {
dict[filter] = [];
});
return dict;
}
function updateFilters(filters, filter, option, value) {
const dict = { ...filters };
if (filter === "price") {
dict.price = [option];
} else if (filter === "rating") {
dict.rating = [option];
} else if (value && filters[filter].indexOf(option) === -1)
dict[filter].push(option);
else if (!value)
dict[filter] = dict[filter].filter((entry) => entry !== option);
return dict;
}
function getProducts(filters, property = "rating", increase = false) {
$('#loader').css("display", "flex")
$.get(
YOUR_URL,
{ filters, sort: { property, increase } },
(products) => {
renderProducts(products);
}
)
.fail(() => {
renderProducts([])
})
}
function createTemplate(product) {
return `
<div class="col-md-4 mb-5">
<div >
<div class="view zoom overlay rounded z-depth-2" style="height: 260px;">
<img class="img-fluid w-100"
src="${product.image}" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="${product.image}">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="text-center pt-4">
<h5>${product.name}</h5>
<p><span class="mr-1"><strong>$${product.price}</strong></span></p>
</div>
</div>
</div>
`;
}
function renderProducts(products) {
$('#loader').css('display', 'none');
const template =
products.length === 0
? `<p>No matching results found.</p>`
: products.map((product) => createTemplate(product)).join("\n");
$("#products").html(template);
}
.loader-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
z-index: 998;
}
.loader-overlay .preloader-wrapper {
position: fixed;
top: 50%;
}
Questions or feedback?
Let us know