js сортировка по цене в зависимость от хэша страницы

Question

Помогите с кодом Как изменять метод сортировки в зависимости от хэша страницы Есть вывод товаров, у каждого товара есть своя ценя, при нажатие на кнопку "Sort by Price" товары сортируются от меньшего к большему, по повторному нажатию наоборот, от большего к меньшему -- это работает

Мне нужно сделать таким образом, что если у меня меняется хэш страницы, на на пример: ?order=price - товары сортируются от меньшему к большему ?order=descending_price - товары сортируются от большего к меньшему

И можно ли это сделать без перезагрузки страницы, ведь хэш может измениться при выборе select'a например, при этом что бы сортировка срабатывала

Пример моего кода:

var ascending = false;

$('.tab-content').on('click', '.sortByPrice', function() {

  var sorted = $('.product').sort(function(a, b) {
    return (ascending ==
      (convertToNumber($(a).find('.price').html()) <
        convertToNumber($(b).find('.price').html()))) ? 1 : -1;
  });
  ascending = ascending ? false : true;

  $('.results').html(sorted);
});

var convertToNumber = function(value) {
  return parseFloat(value.replace('$', ''));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >

<div class="container pb-4 tab-content">
  <a class="sortByPrice" href="#">Sort by Price</a>
</div>

<div>
  <div class="container">
    <div class="row mb-4 results">
    
      <div class="col-md-3 product">
        <div class="card card-product p-3">
          <div class="info-wrap">
            <h6 class="title">Good product 1</h6>
          </div>
          <div class="d-flex flex-column">
            <span class="price-new price">$1280</span> 
            <del class="price-old">$1980</del>
          </div>
        </div>
      </div>
      
      <div class="col-md-3 product">
        <div class="card card-product p-3">
          <div class="info-wrap">
            <h6 class="title">Good product 2</h6>
          </div>
          <div class="d-flex flex-column">
            <span class="price-new price">$1180</span> 
            <del class="price-old">$1880</del>
          </div>
        </div>
      </div>
      
      <div class="col-md-3 product">
        <div class="card card-product p-3">
          <div class="info-wrap">
            <h6 class="title">Good product 3</h6>
          </div>
          <div class="d-flex flex-column">
            <span class="price-new price">$1080</span> 
            <del class="price-old">$1780</del>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Так в редакторе. https://jsfiddle.net/synapse3/n2tx6svk/8/

Заранее спасибо

БЛОГ НА HUSL

js сортировка по цене в зависимость от хэша страницы

Ответы (0 шт):