In this example let’s check how to do jQuery sorting by price in an easy way.
Demo:
Its a very important feature in ecommerce platforms to do sorting products by price or any other feature. We can do this very easily by jQuery. This example is completely with jQuery and no backend is used here.
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery sorting by price</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper mt-5">
<div class="container">
<div class="col-12 my-3">
<select class="form-control col-3 sort_by">
<option value="">Sort By</option>
<option value="1">Price Low to High</option>
<option value="2">Price High to Low</option>
</select>
</div>
<div class="row g-1 isotope-grid">
<div class="col-md-3 grid-item">
<div class="card p-3 product-card" data-price="83.00">
<div class="text-center"> <img src="https://i.imgur.com/emb60L5.jpg" width="200"> </div>
<div class="product-details"> <span class="font-weight-bold d-block">$ 83.00</span> <span>Red Redish</span>
<div class="weight"> <small>20 piece 2.5kg</small> </div>
</div>
</div>
</div>
<div class="col-md-3 grid-item">
<div class="card p-3 product-card" data-price="29.00">
<div class="text-center"> <img src="https://i.imgur.com/ZRUetRF.jpg" width="200"> </div>
<div class="product-details"> <span class="font-weight-bold d-block">$ 29.00</span> <span>Red Redish</span>
<div class="weight"> <small>1 piece 2.5kg</small> </div>
</div>
</div>
</div>
<div class="col-md-3 grid-item">
<div class="card p-3 product-card" data-price="17.00">
<div class="text-center"> <img src="https://i.imgur.com/w2rCsEw.jpg" width="200"> </div>
<div class="product-details"> <span class="font-weight-bold d-block">$ 17.00</span> <span>Red Redish</span>
<div class="weight"> <small>1 piece 2.5kg</small> </div>
</div>
</div>
</div>
<div class="col-md-3 grid-item">
<div class="card p-3 product-card" data-price="56.00">
<div class="text-center"> <img src="https://i.imgur.com/0M7pldG.jpg" width="200"> </div>
<div class="product-details"> <span class="font-weight-bold d-block">$ 56.00</span> <span>Red Redish</span>
<div class="weight"> <small>1 piece 2.5kg</small> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).on("change", ".sort_by", function()
{
var sortingMethod = $(this).val();
if(sortingMethod == '1') {
sortProductsPriceAscending();
} else if (sortingMethod == '2') {
sortProductsPriceDescending();
}
else
{
$(".isotope-grid").load(location.href+" .isotope-grid>*","");
}
});
function sortProductsPriceAscending()
{
var gridItems = $('.grid-item');
gridItems.sort(function(a, b) {
return $('.product-card', a).data("price") - $('.product-card', b).data("price");
});
$(".isotope-grid").append(gridItems);
}
function sortProductsPriceDescending()
{
var gridItems = $('.grid-item');
gridItems.sort(function(a, b) {
return $('.product-card', b).data("price") - $('.product-card', a).data("price");
});
$(".isotope-grid").append(gridItems);
}
</script>- Include files jquery and bootstrap.
https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
- Onchange of the dropdown, get selected option and call function according to the value
$(document).on("change", ".sort_by", function()
{
var sortingMethod = $(this).val();
if(sortingMethod == '1') {
sortProductsPriceAscending();
} else if (sortingMethod == '2') {
sortProductsPriceDescending();
}
else
{
$(".isotope-grid").load(location.href+" .isotope-grid>*","");
}
});- sortProductsPriceAscending() – this function takes all the .grid-items and calls sort() function.
- In sort() takes data-price of .product-card and orts the returned values.
- Then its appends to .isotope-grid
function sortProductsPriceAscending()
{
var gridItems = $('.grid-item');
gridItems.sort(function(a, b) {
return $('.product-card', a).data("price") - $('.product-card', b).data("price");
});
$(".isotope-grid").append(gridItems);
}- sortProductsPriceDescending() sorts values in descending order
function sortProductsPriceDescending()
{
var gridItems = $('.grid-item');
gridItems.sort(function(a, b) {
return $('.product-card', b).data("price") - $('.product-card', a).data("price");
});
$(".isotope-grid").append(gridItems);
}Hope this jQuery sorting by price tutorial helps you. This is not limited to price, this jQuery sorting by price can be used for sorting any other feature as well.
