0

I am trying to sort products with price high to low and low to high. I have written code for this, but sorting is not working. After either sorting a blank page appears. i have checked in console, no error here. Placed console.log in function (sortlowTohigh) like console.log(sort low to high....), and it displays message in console the same way.

$(document).ready(function() {
  // Function to sort products by price (low to high)
  function sortByLowToHigh() {
    var $productList = $('#product-list');
    var $products = $productList.children('.product-box-3');

    $products.sort(function(a, b) {
      var priceA = parseFloat($(a).find('.price').text().replace('₹', '').replace(',', ''));
      var priceB = parseFloat($(b).find('.price').text().replace('₹', '').replace(',', ''));
      return priceA - priceB;
    });

    $productList.html($products);

  }

  // Function to sort products by price (high to low)
  function sortByHighToLow() {

    var $productList = $('#product-list');
    var $products = $productList.children('.product-box-3');

    $products.sort(function(a, b) {
      var priceA = parseFloat($(a).find('.price').text().replace('₹', '').replace(',', ''));
      var priceB = parseFloat($(b).find('.price').text().replace('₹', '').replace(',', ''));
      return priceB - priceA;
    });

    $productList.html($products);
  }

  // Handle dropdown item click events
  $('#low').click(function() {
    sortByLowToHigh();
  });

  $('#high').click(function() {
    sortByHighToLow();
  });


  // sortByLowToHigh();  price.
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-filter-menu">
  <div class="category-dropdown">
    <h5 class="text-content">Sort By :</h5>
    <div class="dropdown">
      <button class="dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown">
                    <span>Most Popular</span> <i class="fa-solid fa-angle-down"></i>
                </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li>
          <a class="dropdown-item" id="low" href="javascript:void(0)">Low - High Price</a>
        </li>
        <li>
          <a class="dropdown-item" id="high" href="javascript:void(0)">High - Low Price</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="product-list" class="row g-sm-4 g-3 row-cols-xxl-4 row-cols-xl-3 row-cols-lg-2 row-cols-md-3 row-cols-2 product-list-section">
  <div>
    <div class="product-box-3 h-100 wow fadeInUp">
      <a href="#">
        <h5 class="name">Test 1</h5>
      </a>

      <h5 class="price"><span class="theme-color">₹7</span></h5>
    </div>
    <div class="product-box-3 h-100 wow fadeInUp">
      <a href="#">
        <h5 class="name">Test 2</h5>
      </a>

      <h5 class="price"><span class="theme-color">₹9</span></h5>
    </div>
    <div class="product-box-3 h-100 wow fadeInUp">
      <a href="#">
        <h5 class="name">Test 3</h5>
      </a>

      <h5 class="price"><span class="theme-color">₹1</span></h5>
    </div>
    <div class="product-box-3 h-100 wow fadeInUp">
      <a href="#">
        <h5 class="name">Test 4</h5>
      </a>

      <h5 class="price"><span class="theme-color">₹4</span></h5>
    </div>
  </div>
</div>
WOUNDEDStevenJones
  • 5,150
  • 6
  • 41
  • 53
Ivance Edwards
  • 41
  • 6
  • 1
    Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) – mplungjan Sep 01 '23 at 19:26
  • 3
    Since this is not PHP related, please remove all server code and post only RELEVANT RENDERED HTML, CSS and JS together with relevan frameworks from CDN – mplungjan Sep 01 '23 at 19:27
  • 2
    If you contest the closing as a duplicate please you point out what makes the difference, why this is not answered by the proposed duplicate and its answers. If you do that, your post might be reopened. – Yunnosch Sep 01 '23 at 19:41
  • Code, appraoch for solution, HTML, issue i am having, everything is different. It is not same to pre-asked question. – Ivance Edwards Sep 01 '23 at 19:43
  • 2
    Please do as we ask. There is nothing "arrogant" about closing as a dupe. Your code showing "sorted" is not pure HTML. So if you want to sort on the server it is not a JS question. If you want to sort on the client, remove the server code and let us help you by showing us a [mcve] which you choose to ignore – mplungjan Sep 01 '23 at 19:43
  • i have removed the server code. Pointed out what is different in my question – Ivance Edwards Sep 01 '23 at 19:46
  • i have tried to do which you asked. Kindly look at it. After sorting i get a blank page – Ivance Edwards Sep 01 '23 at 19:48
  • Please update your example to make this a minimal, reproducible example. There isn't any element with an ID of `product-list` nor does it have children matching `.product-box-3`, so the JS you posted won't do anything yet. Of course the HTML will differ somewhat from the duplicate question, but the purpose of marking as duplicate isn't saying that's an exact copy/paste solution, but rather, if you apply the same process and logic from that question to yours, sorting should work as expected. What have you done to debug this yourself so far? Breakpoints? Console logs? – WOUNDEDStevenJones Sep 01 '23 at 19:49
  • again i have edited question. i have posted what console.log is giving. Again console.log giving nothing. no errors. if i write function sortByLowToHigh() { console.log("Sorting low to high..."); } it simply displays in console ("Sorting low to high") – Ivance Edwards Sep 01 '23 at 19:54
  • Now that you confirmed that the function is being called, you need to inspect the next steps that the function does. i.e. what is the value of `$productList`? What is the value of `$products`? etc. `$productList.children('.product-box-3');` returns an object of length 0 because `$productList` has no direct children with a class of `product-box-3` - those are nested under another `
    `. `$productList.find'.product-box-3');` does what you're looking for.
     – WOUNDEDStevenJones Sep 01 '23 at 20:00
  • i first written the full code, then someone asked me to remove it and i did it. Putting the code again so you can see it – Ivance Edwards Sep 01 '23 at 20:05
  • code edited and added – Ivance Edwards Sep 01 '23 at 20:09
  • Please don't. As others have commented, the full code isn't very useful here because this isn't related to PHP. The problem was in JS and the way it was selecting the HTML elements, so a minimal reproducible example is all we needed. `$productList.find('.product-box-3');` fixes things for you. – WOUNDEDStevenJones Sep 01 '23 at 20:20
  • Perfect WOUNDEDStevenJones. Thanks a ton. The issue is resolved. – Ivance Edwards Sep 01 '23 at 20:26

0 Answers0