index.php
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sorting Products By Products Price</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Ecommerce products division sort by price using jQuery .</h2>
</div>
</div>
<div class="row" style="margin-top:15px; margin-bottom:25px;">
<div class="col-sm-12">
<label> <span class="glyphicon glyphicon-sort"></span> Sort By</label>
<select class="form-control" name="filtration" id="filtration">
<option hidden>--Sort--By--Price--</option>
<option value="1">Lowest to Highest</option>
<option value="2">Highest to Lowest</option>
</select>
</div>
</div>
<div class="productsGridView row">
<div class="productsdiv col-sm-3" data-price="100">
<article class="col-item">
<div class="photo">
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart">
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<a href="#"> <img src="productsImage/270img.jpg" class="img-responsive" alt="Product Image" /> </a>
</div>
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<p class="details">
Lorem ipsum dolor sit amet, consectetur..
</p>
<h1>Sample Product</h1>
<span class="price-new">$110.00</span>
</div>
</div>
</div>
</article>
<p class="text-center">Hover over image</p>
</div>
<div class="productsdiv col-sm-3" data-price="440">
<article class="col-item">
<div class="photo">
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart">
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<a href="#"> <img src="productsImage/281image1.jpg" class="img-responsive" alt="Product Image" /> </a>
</div>
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<p class="details">
Lorem ipsum dolor sit amet, consectetur..
</p>
<h1>Sample Product</h1>
<span class="price-new">$440.00</span>
</div>
</div>
</div>
</article>
<p class="text-center">Hover over image</p>
</div>
<div class="productsdiv col-sm-3" data-price="200">
<article class="col-item">
<div class="photo">
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart">
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<a href="#"> <img src="productsImage/3277image.jpg" class="img-responsive" alt="Product Image" /> </a>
</div>
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<p class="details">
Lorem ipsum dolor sit amet, consectetur..
</p>
<h1>Sample Product</h1>
<span class="price-new">$200.00</span>
</div>
</div>
</div>
</article>
<p class="text-center">Hover over image</p>
</div>
<div class="productsdiv col-sm-3" data-price="250">
<article class="col-item">
<div class="photo">
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart">
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<a href="#"> <img src="productsImage/7498team-4.jpg" class="img-responsive" alt="Product Image" /> </a>
</div>
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<p class="details">
Lorem ipsum dolor sit amet, consectetur..
</p>
<h1>Sample Product</h1>
<span class="price-new">$250.00</span>
</div>
</div>
</div>
</article>
<p class="text-center">Hover over image</p>
</div>
<div class="productsdiv col-sm-3" data-price="300">
<article class="col-item">
<div class="photo">
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart">
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<a href="#"> <img src="productsImage/9242proImg.jpg" class="img-responsive" alt="Product Image" /> </a>
</div>
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<p class="details">
Lorem ipsum dolor sit amet, consectetur..
</p>
<h1>Sample Product</h1>
<span class="price-new">$300.00</span>
</div>
</div>
</div>
</article>
<p class="text-center">Hover over image</p>
</div>
<div class="productsdiv col-sm-3" data-price="400">
<article class="col-item">
<div class="photo">
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart">
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<a href="#"> <img src="productsImage/35553_58.jpg" class="img-responsive" alt="Product Image" /> </a>
</div>
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<p class="details">
Lorem ipsum dolor sit amet, consectetur..
</p>
<h1>Sample Product</h1>
<span class="price-new">$400.00</span>
</div>
</div>
</div>
</article>
<p class="text-center">Hover over image</p>
</div>
<div class="productsdiv col-sm-3" data-price="500">
<article class="col-item">
<div class="photo">
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart">
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<a href="#"> <img src="productsImage/9481383mobile-icon.png" class="img-responsive" alt="Product Image" /> </a>
</div>
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<p class="details">
Lorem ipsum dolor sit amet, consectetur..
</p>
<h1>Sample Product</h1>
<span class="price-new">$500.00</span>
</div>
</div>
</div>
</article>
<p class="text-center">Hover over image</p>
</div>
<div class="productsdiv col-sm-3" data-price="800">
<article class="col-item">
<div class="photo">
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart">
<span class="fa fa-shopping-cart"></span>
</button>
</div>
<a href="#"> <img src="productsImage/227771521275042team-1.jpg" class="img-responsive" alt="Product Image" /> </a>
</div>
<div class="info">
<div class="row">
<div class="price-details col-md-6">
<p class="details">
Lorem ipsum dolor sit amet, consectetur..
</p>
<h1>Sample Product</h1>
<span class="price-new">$800.00</span>
</div>
</div>
</div>
</article>
<p class="text-center">Hover over image</p>
</div>
</div>
</div>
</body>
</html>
custom.js
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$(document).ready(function(e) {
$(document).on('change','#filtration',function(){
var filterType = $(this).val();
if(filterType==1){
sortProductAscending();
}
if(filterType==2){
sortProductDescending();
}
});
});
</script>
<script type="text/javascript">
function sortProductAscending(){
var products = $('.productsdiv');
products.sort(function(a, b){
var first = parseInt($(a).data("price"));
var second = parseInt($(b).data("price"));
return first - second ;
});
$(".productsGridView").html(products);
}
function sortProductDescending(){
var products = $('.productsdiv');
products.sort(function(a, b){
var first = parseInt($(a).data("price"));
var second = parseInt($(b).data("price"));
return second - first ;
});
$(".productsGridView").html(products);
}
</script>
style.css
/* font Awesome http://fontawesome.io*/
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
/* Animation.css*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css);
.col-item {
border: 1px solid #E1E1E1;
background: #FFF;
margin-bottom:12px;
}
.col-item .options {
position:absolute;
top:6px;
right:22px;
}
.col-item .photo {
overflow: hidden;
}
.col-item .photo .options {
display:none;
}
.col-item .photo img {
margin: 0 auto;
width: 100%;
}
.col-item .options-cart {
position:absolute;
left:22px;
top:6px;
display:none;
}
.col-item .photo:hover .options,
.col-item .photo:hover .options-cart {
display:block;
-webkit-animation: fadeIn .5s ease;
-moz-animation: fadeIn .5s ease;
-ms-animation: fadeIn .5s ease;
-o-animation: fadeIn .5s ease;
animation: fadeIn .5s ease;
}
.col-item .options-cart-round {
position:absolute;
left:42%;
top:22%;
display:none;
}
.col-item .options-cart-round button {
border-radius: 50%;
padding:14px 16px;
}
.col-item .options-cart-round button .fa {
font-size:22px;
}
.col-item .photo:hover .options-cart-round {
display:block;
-webkit-animation: fadeInDown .5s ease;
-moz-animation: fadeInDown .5s ease;
-ms-animation: fadeInDown .5s ease;
-o-animation: fadeInDown .5s ease;
animation: fadeInDown .5s ease;
}
.col-item .info {
padding: 10px;
margin-top: 1px;
}
.col-item .price-details {
width: 100%;
margin-top: 5px;
}
.col-item .price-details h1 {
font-size: 14px;
line-height: 20px;
margin: 0;
float:left;
}
.col-item .price-details .details {
margin-bottom: 0px;
font-size:12px;
}
.col-item .price-details span {
float:right;
}
.col-item .price-details .price-new {
font-size:16px;
}
.col-item .price-details .price-old {
font-size:18px;
text-decoration:line-through;
}
.col-item .separator {
border-top: 1px solid #E1E1E1;
}
.col-item .clear-left {
clear: left;
}
.col-item .separator a {
text-decoration:none;
}
.col-item .separator p {
margin-bottom: 0;
margin-top: 6px;
text-align: center;
}
.col-item .separator p i {
margin-right: 5px;
}
.col-item .btn-add {
width: 60%;
float: left;
}
.col-item .btn-add a {
display:inline-block !important;
}
.col-item .btn-add {
border-right: 1px solid #E1E1E1;
}
.col-item .btn-details {
width: 40%;
float: left;
padding-left: 10px;
}
.col-item .btn-details a {
display:inline-block !important;
}
.col-item .btn-details a:first-child {
margin-right:12px;
}
