Hello
i am working on a project where i have some products that i can sort by low to high price and low to high area the template i have, already have a low to high sorting. but have no sense on javascript so do not know how to make a high to low sort
JavaScript:
function initIsotope()
{
if($(‘.listings_container’).length)
{
var grid = $(‘.listings_container’);
grid.isotope(
{
itemSelector:’.listing_box’,
layoutMode: ‘fitRows’,
getSortData:
{
price: function(itemElement)
{
var priceEle = $(itemElement).find(‘.listing_price’).text().replace( ‘$’, ” );
priceEle = priceEle.replace(/s/g, ”);
return parseFloat(priceEle);
},
area: function(itemElement)
{
var propertyArea = $(itemElement).find(‘.property_area span’).text().replace(‘ sq ft’, ”);
console.log(propertyArea);
return parseFloat(propertyArea);
}
}
});
var sortingButtons = $(‘.sorting_button’);
sortingButtons.each(function()
{
$(this).on(‘click’, function()
{
var parent = $(this).parent().parent().find(‘span’);
parent.text($(this).text());
var option = $(this).attr(‘data-isotope-option’);
option = JSON.parse( option );
grid.isotope( option );
});
});
}
}
HTML:
<div class=”sorting_container”>
<div class=”sort”>
<span>Sort By</span>
<ul>
<li class=”sorting_button” data-isotope-option='{ “sortBy”: “original-order” }’>default</li>
<li class=”sorting_button” data-isotope-option='{ “sortBy”: “price” }’>price</li>
<li class=”sorting_button” data-isotope-option='{ “sortBy”: “area” }’>area</li>
</ul>
</div>
</div>