Сортируйте товары по цене в раскрывающемся списке - PullRequest
0 голосов
/ 06 мая 2020

У меня есть раскрывающийся список и список свойств. Выпадающий список содержит два варианта: от низкого к высокому и от высокого к низкому. Если какой-либо пользователь нажимает на любой из раскрывающихся элементов, перечисленные свойства должны быть отсортированы по его цене. Как я могу добиться этого, используя свойство javascript?

. 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>

Значения динамически поступают из серверной части.

Ответы [ 2 ]

1 голос
/ 06 мая 2020

Вы можете сделать это с помощью Javascript (переупорядочивание элементов DOM) или с ответом, который вы получаете от вашего сервера.

JS:

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

Вы можете установить добавьте обработчик событий onclick JS в родительский DIV элементов, чтобы отменить все дочерние элементы.

Источник: { ссылка }

OR

Вы можете отправить ответ с сервера, используя метод фильтрации .order_by() с флагом в запросе, чтобы определить, является ли он обратным или нет.

Например:

Без обратного - Item.objects.all().order_by('price')

Обратное - 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)
0 голосов
/ 08 мая 2020

Приведенный ниже код работал отлично, как я хотел.

$(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 код

<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>
...