Sort items by price on clicking dropdown

Question

I have a dropdown and list of property. The dropdown contains two option, Low to High and High to Low. If any user clicks on any one of the dropdown item, the properties listed should sort by its price. How can I achieve that using javascript?

property.html

                <div class="col-sm-6">
                  <div class="pxp-sort-form form-inline float-right">
                      <div class="form-group">
                          <select class="type-regular custom-select" id="pxp-sort-results" name="price-sorting">
                              <option value="" selected="selected disabled">Default Sort</option>
                              <option class="price-sorting" value="l2h" id="l2h">Price (Lo-Hi)</option>
                              <option class="price-sorting" value="h2l">Price (Hi-Lo)</option>

                          </select>
                      </div>

                  </div>
              </div>

            <div class="row products-grid">
              {% for item in properties.all %}
              <div class="col-sm-12 col-md-6 col-xxxl-4 product">
                  <a href="{% pageurl item %}" class="pxp-results-card-1 rounded-lg" data-price="{{ item.price }}" data-prop="1">
                      <div id="property-{{item.id}}" class="carousel slide" data-ride="carousel" data-interval="false">
                          <div class="carousel-inner">
                              {% for j in item.prop_images.all %}
                                {% image j.prop_img original as property_img %}
                                <div class="carousel-item {% if forloop.first %} active {% endif %}" style="background-image: url('{{property_img.url}}')"></div>
                              {% endfor %}
                          </div>
                          <span class="carousel-control-prev" data-href="#{{item.prop_name}}" data-slide="prev">
                              <span class="fa fa-angle-left" aria-hidden="true"></span>
                          </span>
                          <span class="carousel-control-next" data-href="#property-{{item.id}}" data-slide="next">
                              <span class="fa fa-angle-right" aria-hidden="true"></span>
                          </span>
                      </div>
                      <div class="pxp-results-card-1-gradient"></div>
                      <div class="pxp-results-card-1-details" id="prop-dtls">
                          <div class="pxp-results-card-1-details-title">{{item.prop_name}}</div>
                          <div class="pxp-results-card-1-details-price price">{{item.price}}</div>
                      </div>
                      <div class="pxp-results-card-1-features">
                          <span>{{item.bedroom}} BD <span>|</span> {{item.bathroom}} BA <span>|</span> {{item.sqft}} SF</span>
                      </div>
                      <div class="pxp-results-card-1-save"><span class="fa fa-star-o"></span></div>
                  </a>
              </div>
              {% endfor %}

          </div>

The values are coming dynamically from backend.

score 1 · Answer 1 · answered May 06 '20 at 20:08

You can either do this with Javascript (reordering the DOM elements) or with the response you get from your server.

JS:

function reverseChildren(parent) {
    for (var i = 1; i < parent.childNodes.length; i++){
        parent.insertBefore(parent.childNodes[i], parent.firstChild);
    }
}

You can set add an onclick JS event handler on the parent DIV of the elements to reverse all the child elements.

Source: https://stackoverflow.com/a/37860657/3345051

OR

You can send a response back from the server using the .order_by() filter method with a flag in the request to determine if it is reverse or not.

For example:

Non-reverse - Item.objects.all().order_by('price')

Reversed - Item.objects.all().order_by('-price')

class ItemView(View):
    def get(self, request, *args, **kwargs):
        isReversed = '-price' if request.GET['reverse'] is True else 'price'
        items = Item.objects.all().order_by(isReversed)
        return JsonResponse(items)

score 0 · Answer 2 · answered May 08 '20 at 02:46

The below code worked perfectly as I wanted.

$(document).on("change", ".price-sorting", function() {

var sortingMethod = $(this).val();

if(sortingMethod == 'l2h')
{
    sortProductsPriceAscending();
}
else if(sortingMethod == 'h2l')
{
    sortProductsPriceDescending();
}

});
function sortProductsPriceAscending()
{
    var products = $('.product');
    products.sort(function(a, b){
    return $(a).data("price") - $(b).data("price")});
    $(".products-grid").html(products);

}

function sortProductsPriceDescending()
{
    var products = $('.product');
    products.sort(function(a, b){ return $(b).data("price") - $(a).data("price")});
    $(".products-grid").html(products);

}

HTML code

<div class="col-sm-6">
                  <div class="pxp-sort-form form-inline float-right">
                      <div class="form-group">
                          <select class="type-regular custom-select price-sorting" id="pxp-sort-results">
                              <option value="" selected="selected disabled">Default Sort</option>
                              <option value="l2h" id="l2h">Price (Lo-Hi)</option>
                              <option value="h2l">Price (Hi-Lo)</option>

                          </select>
                      </div>
                      <div class="form-group d-flex">
                          <a role="button" class="pxp-map-toggle"><span class="fa fa-map-o"></span></a>
                      </div>
                  </div>
              </div>

<div class="row products-grid">
              {% for item in properties.all %}
              <div class="col-sm-12 col-md-6 col-xxxl-4 product" data-price="{{ item.price }}">
                  <a href="{% pageurl item %}" class="pxp-results-card-1 rounded-lg"  data-prop="1">
                      <div id="property-{{item.id}}" class="carousel slide" data-ride="carousel" data-interval="false">
                          <div class="carousel-inner">
                              {% for j in item.prop_images.all %}
                                {% image j.prop_img original as property_img %}
                                <div class="carousel-item {% if forloop.first %} active {% endif %}" style="background-image: url('{{property_img.url}}')"></div>
                              {% endfor %}
                          </div>
                          <span class="carousel-control-prev" data-href="#{{item.prop_name}}" data-slide="prev">
                              <span class="fa fa-angle-left" aria-hidden="true"></span>
                          </span>
                          <span class="carousel-control-next" data-href="#property-{{item.id}}" data-slide="next">
                              <span class="fa fa-angle-right" aria-hidden="true"></span>
                          </span>
                      </div>
                      <div class="pxp-results-card-1-gradient"></div>
                      <div class="pxp-results-card-1-details" id="prop-dtls">
                          <div class="pxp-results-card-1-details-title">{{item.prop_name}}</div>
                          <div class="pxp-results-card-1-details-price price">&#8377 {{item.price}}</div>
                      </div>
                      <div class="pxp-results-card-1-features">
                          <span>{{item.bedroom}} BD <span>|</span> {{item.bathroom}} BA <span>|</span> {{item.sqft}} SF</span>
                      </div>
                      <div class="pxp-results-card-1-save"><span class="fa fa-star-o"></span></div>
                  </a>
              </div>
              {% endfor %}

          </div>

Sort items by price on clicking dropdown

2 Answers2