Products list sort by lowest to highest Price and highest to lowest price using jQuery .

index.php

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Sorting Products  By Products Price</title>
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6. <link href="style.css" type="text/css" rel="stylesheet" />
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9. </head>
  10. <body>
  11. <div class="container">
  12. <div class="row">
  13. <div class="col-sm-12">
  14. <h2>Ecommerce products division sort by price using jQuery .</h2>
  15. </div>
  16. </div>
  17. <div class="row" style="margin-top:15px; margin-bottom:25px;">
  18. <div class="col-sm-12">
  19. <label> <span class="glyphicon glyphicon-sort"></span>&nbsp; Sort By</label>
  20. <select class="form-control" name="filtration" id="filtration">
  21. <option hidden>--Sort--By--Price--</option>
  22. <option value="1">Lowest to Highest</option>
  23. <option value="2">Highest to Lowest</option>
  24. </select>
  25. </div>
  26. </div>
  27. <div class="productsGridView row">
  28. <div class="productsdiv col-sm-3" data-price="100">
  29. <article class="col-item">
  30. <div class="photo">
  31. <div class="options-cart-round">
  32. 	<button class="btn btn-default" title="Add to cart">
  33. 		<span class="fa fa-shopping-cart"></span>
  34. 	</button>
  35. </div>
  36. <a href="#"> <img src="productsImage/270img.jpg" class="img-responsive" alt="Product Image" /> </a>
  37. </div>
  38. <div class="info">
  39. <div class="row">
  40. 	<div class="price-details col-md-6">
  41. 		<p class="details">
  42. 			Lorem ipsum dolor sit amet, consectetur..
  43. 		</p>
  44. 		<h1>Sample Product</h1>
  45. 		<span class="price-new">$110.00</span>
  46. 	</div>
  47. </div>
  48. </div>
  49. </article>
  50. <p class="text-center">Hover over image</p>
  51. </div>
  52. <div class="productsdiv col-sm-3" data-price="440">
  53. <article class="col-item">
  54. <div class="photo">
  55. <div class="options-cart-round">
  56. 	<button class="btn btn-default" title="Add to cart">
  57. 		<span class="fa fa-shopping-cart"></span>
  58. 	</button>
  59. </div>
  60. <a href="#"> <img src="productsImage/281image1.jpg" class="img-responsive" alt="Product Image" /> </a>
  61. </div>
  62. <div class="info">
  63. <div class="row">
  64. 	<div class="price-details col-md-6">
  65. 		<p class="details">
  66. 			Lorem ipsum dolor sit amet, consectetur..
  67. 		</p>
  68. 		<h1>Sample Product</h1>
  69. 		<span class="price-new">$440.00</span>
  70. 	</div>
  71. </div>
  72. </div>
  73. </article>
  74. <p class="text-center">Hover over image</p>
  75. </div>
  76. <div class="productsdiv col-sm-3" data-price="200">
  77. <article class="col-item">
  78. <div class="photo">
  79. <div class="options-cart-round">
  80. 	<button class="btn btn-default" title="Add to cart">
  81. 		<span class="fa fa-shopping-cart"></span>
  82. 	</button>
  83. </div>
  84. <a href="#"> <img src="productsImage/3277image.jpg" class="img-responsive" alt="Product Image" /> </a>
  85. </div>
  86. <div class="info">
  87. <div class="row">
  88. 	<div class="price-details col-md-6">
  89. 		<p class="details">
  90. 			Lorem ipsum dolor sit amet, consectetur..
  91. 		</p>
  92. 		<h1>Sample Product</h1>
  93. 		<span class="price-new">$200.00</span>
  94. 	</div>
  95. </div>
  96. </div>
  97. </article>
  98. <p class="text-center">Hover over image</p>
  99. </div>
  100. <div class="productsdiv col-sm-3" data-price="250">
  101. <article class="col-item">
  102. <div class="photo">
  103. <div class="options-cart-round">
  104. 	<button class="btn btn-default" title="Add to cart">
  105. 		<span class="fa fa-shopping-cart"></span>
  106. 	</button>
  107. </div>
  108. <a href="#"> <img src="productsImage/7498team-4.jpg" class="img-responsive" alt="Product Image" /> </a>
  109. </div>
  110. <div class="info">
  111. <div class="row">
  112. 	<div class="price-details col-md-6">
  113. 		<p class="details">
  114. 			Lorem ipsum dolor sit amet, consectetur..
  115. 		</p>
  116. 		<h1>Sample Product</h1>
  117. 		<span class="price-new">$250.00</span>
  118. 	</div>
  119. </div>
  120. </div>
  121. </article>
  122. <p class="text-center">Hover over image</p>
  123. </div>
  124. <div class="productsdiv col-sm-3" data-price="300">
  125. <article class="col-item">
  126. <div class="photo">
  127. <div class="options-cart-round">
  128. 	<button class="btn btn-default" title="Add to cart">
  129. 		<span class="fa fa-shopping-cart"></span>
  130. 	</button>
  131. </div>
  132. <a href="#"> <img src="productsImage/9242proImg.jpg" class="img-responsive" alt="Product Image" /> </a>
  133. </div>
  134. <div class="info">
  135. <div class="row">
  136. 	<div class="price-details col-md-6">
  137. 		<p class="details">
  138. 			Lorem ipsum dolor sit amet, consectetur..
  139. 		</p>
  140. 		<h1>Sample Product</h1>
  141. 		<span class="price-new">$300.00</span>
  142. 	</div>
  143. </div>
  144. </div>
  145. </article>
  146. <p class="text-center">Hover over image</p>
  147. </div>
  148. <div class="productsdiv col-sm-3" data-price="400">
  149. <article class="col-item">
  150. <div class="photo">
  151. <div class="options-cart-round">
  152. 	<button class="btn btn-default" title="Add to cart">
  153. 		<span class="fa fa-shopping-cart"></span>
  154. 	</button>
  155. </div>
  156. <a href="#"> <img src="productsImage/35553_58.jpg" class="img-responsive" alt="Product Image" /> </a>
  157. </div>
  158. <div class="info">
  159. <div class="row">
  160. 	<div class="price-details col-md-6">
  161. 		<p class="details">
  162. 			Lorem ipsum dolor sit amet, consectetur..
  163. 		</p>
  164. 		<h1>Sample Product</h1>
  165. 		<span class="price-new">$400.00</span>
  166. 	</div>
  167. </div>
  168. </div>
  169. </article>
  170. <p class="text-center">Hover over image</p>
  171. </div>
  172. <div class="productsdiv col-sm-3" data-price="500">
  173. <article class="col-item">
  174. <div class="photo">
  175. <div class="options-cart-round">
  176. 	<button class="btn btn-default" title="Add to cart">
  177. 		<span class="fa fa-shopping-cart"></span>
  178. 	</button>
  179. </div>
  180. <a href="#"> <img src="productsImage/9481383mobile-icon.png" class="img-responsive" alt="Product Image" /> </a>
  181. </div>
  182. <div class="info">
  183. <div class="row">
  184. 	<div class="price-details col-md-6">
  185. 		<p class="details">
  186. 			Lorem ipsum dolor sit amet, consectetur..
  187. 		</p>
  188. 		<h1>Sample Product</h1>
  189. 		<span class="price-new">$500.00</span>
  190. 	</div>
  191. </div>
  192. </div>
  193. </article>
  194. <p class="text-center">Hover over image</p>
  195. </div>
  196. <div class="productsdiv col-sm-3" data-price="800">
  197. <article class="col-item">
  198. <div class="photo">
  199. <div class="options-cart-round">
  200. 	<button class="btn btn-default" title="Add to cart">
  201. 		<span class="fa fa-shopping-cart"></span>
  202. 	</button>
  203. </div>
  204. <a href="#"> <img src="productsImage/227771521275042team-1.jpg" class="img-responsive" alt="Product Image" /> </a>
  205. </div>
  206. <div class="info">
  207. <div class="row">
  208. 	<div class="price-details col-md-6">
  209. 		<p class="details">
  210. 			Lorem ipsum dolor sit amet, consectetur..
  211. 		</p>
  212. 		<h1>Sample Product</h1>
  213. 		<span class="price-new">$800.00</span>
  214. 	</div>
  215. </div>
  216. </div>
  217. </article>
  218. <p class="text-center">Hover over image</p>
  219. </div>
  220. </div>
  221. </div>
  222. </body>
  223. </html>

custom.js

  1. <script>
  2. $(function () {
  3.   $('[data-toggle="tooltip"]').tooltip();
  4. });
  5. </script>
  6. <script>
  7. $(document).ready(function(e) {
  8.   $(document).on('change','#filtration',function(){
  9.      var filterType = $(this).val();
  10. 	 if(filterType==1){
  11. 	     sortProductAscending();
  12. 	   }
  13. 	 if(filterType==2){
  14. 	     sortProductDescending(); 
  15. 	   }  
  16.   });
  17. });
  18. </script>  
  19. <script type="text/javascript">
  20.  
  21. function sortProductAscending(){
  22.     var products = $('.productsdiv');
  23.     products.sort(function(a, b){
  24. 	   var first = parseInt($(a).data("price"));
  25. 	   var second = parseInt($(b).data("price"));
  26. 	   return first - second ;	
  27. 	});
  28.     $(".productsGridView").html(products);
  29. }
  30.  
  31. function sortProductDescending(){
  32.     var products = $('.productsdiv');
  33.     products.sort(function(a, b){ 
  34. 	  var first = parseInt($(a).data("price"));
  35. 	  var second = parseInt($(b).data("price"));
  36. 	  return second - first ;
  37. 	});
  38.     $(".productsGridView").html(products);
  39. }
  40. </script>

style.css

  1. /* font Awesome http://fontawesome.io*/
  2. @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
  3. /* Animation.css*/
  4. @import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css);
  5.  
  6. .col-item {
  7.   border: 1px solid #E1E1E1;
  8.   background: #FFF;
  9.   margin-bottom:12px;
  10. }
  11. .col-item .options {
  12.   position:absolute;
  13.   top:6px;
  14.   right:22px;
  15. }
  16. .col-item .photo {
  17.   overflow: hidden;
  18. }
  19. .col-item .photo .options {
  20.   display:none;
  21. }
  22. .col-item .photo img {
  23.   margin: 0 auto;
  24.   width: 100%;
  25. }
  26.  
  27. .col-item .options-cart {
  28.   position:absolute;
  29.   left:22px;
  30.   top:6px;
  31.   display:none;
  32. }
  33. .col-item .photo:hover .options,
  34. .col-item .photo:hover .options-cart {
  35.   display:block;
  36.   -webkit-animation: fadeIn .5s ease;
  37.   -moz-animation: fadeIn .5s ease;
  38.   -ms-animation: fadeIn .5s ease;
  39.   -o-animation: fadeIn .5s ease;
  40.   animation: fadeIn .5s ease;
  41. }
  42. .col-item .options-cart-round {
  43.   position:absolute;
  44.   left:42%;
  45.   top:22%;
  46.   display:none;
  47. }
  48. .col-item .options-cart-round button {
  49.   border-radius: 50%;
  50.   padding:14px 16px;
  51.   
  52. }
  53. .col-item .options-cart-round button .fa {
  54.   font-size:22px;
  55. }
  56. .col-item .photo:hover .options-cart-round {
  57.   display:block;
  58.   -webkit-animation: fadeInDown .5s ease;
  59.   -moz-animation: fadeInDown .5s ease;
  60.   -ms-animation: fadeInDown .5s ease;
  61.   -o-animation: fadeInDown .5s ease;
  62.   animation: fadeInDown .5s ease;
  63. }
  64. .col-item .info {
  65.   padding: 10px;
  66.   margin-top: 1px;
  67. }
  68. .col-item .price-details {
  69.   width: 100%;
  70.   margin-top: 5px;
  71. }
  72. .col-item .price-details h1 {
  73.   font-size: 14px;
  74.   line-height: 20px;
  75.   margin: 0;
  76.   float:left;
  77. }
  78. .col-item .price-details .details {
  79.   margin-bottom: 0px;
  80.   font-size:12px;
  81. }
  82. .col-item .price-details span {
  83.   float:right;
  84. }
  85. .col-item .price-details .price-new {
  86.   font-size:16px;
  87. }
  88. .col-item .price-details .price-old {
  89.   font-size:18px;
  90.   text-decoration:line-through;
  91. }
  92. .col-item .separator {
  93.   border-top: 1px solid #E1E1E1;
  94. }
  95.  
  96. .col-item .clear-left {
  97.   clear: left;
  98. }
  99. .col-item .separator a {
  100.   text-decoration:none;
  101. }
  102. .col-item .separator p {
  103.   margin-bottom: 0;
  104.   margin-top: 6px;
  105.   text-align: center;
  106. }
  107.  
  108. .col-item .separator p i {
  109.   margin-right: 5px;
  110. }
  111. .col-item .btn-add {
  112.   width: 60%;
  113.   float: left;
  114. }
  115. .col-item .btn-add a {
  116.   display:inline-block !important;
  117. }
  118. .col-item .btn-add {
  119.   border-right: 1px solid #E1E1E1;
  120. }
  121. .col-item .btn-details {
  122.   width: 40%;
  123.   float: left;
  124.   padding-left: 10px;
  125. }
  126. .col-item .btn-details a {
  127.   display:inline-block !important;
  128. }
  129. .col-item .btn-details a:first-child {
  130.   margin-right:12px;
  131. }

Tags

PHP 23   Javascript 7   Jquery 10   Html 2   Laravel 11   php array method 1   PHP magic method 2   Programs 5   Interview questions 0   Programming Language 0   Laravel 8 2   Vue js 6   GIT    Laravel Artisan Command
See Demo Download

Vuejs Article

How to create new or separate routes file in Vue Js?

How to define Middleware in Vue js?

How to define named route in vue js?

What is components? Component in vue js.

How to install vue js using CLI?

How to check the version of vue cli ?

Laravel Article

CRUD operation using Laravel + React js

PHP artisan list commands

How to install React in Laravel 8

How to create laravel seeder?

What is new in laravel 8?

How to define route in laravel ?

Laravel User Auth Logout

How to install laravel set up in your machine

How to ON/OFF your laravel project debugging .

How to image upload in laravel

How to laravel framework project switch from development mode to Production mode

how to redirect http to https in laravel using middleware