I have a problem with sorting with Isotope.js using Oxygen Builder. I checked all resources and I don't have any idea what's wrong. Filtering on categories work great. If anyone knows better and easier solution it would help as well.
This is my javascript:
jQuery(document).ready( function() {
var $grid = jQuery('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows',
getSortData: {
tytul_produktu: '[tytul]',
date: '.date'
}
})
jQuery('.category').each( function() {
jQuery(this).closest('.grid-item').addClass(jQuery(this).text().toLowerCase());
jQuery(this).remove();
})
jQuery('[data-filter]').click( function(e) {
e.preventDefault();
$grid.isotope({ filter: jQuery(this).data('filter') })
})
jQuery('#kategorie').on( 'change', function(e) {
e.preventDefault();
// use filterFn if matches value
$grid.isotope({ filter: jQuery( this ).val() })
})
jQuery('#daty').on( 'change', function(e) {
// use filterFn if matches value
e.preventDefault();
const newLocal = jQuery(this).find('option:selected');
var element = newLocal;
var type = element.attr('data-sorttype');
var sortValue = element.attr('data-sort-by');
if( type === 'asc' ) {$grid.isotope({ sortBy: sortValue , sortAscending: true});}
else {$grid.isotope({ sortBy: sortValue , sortAscending: false});}
})
jQuery('#autorzy').on( 'change', function(e) {
e.preventDefault();
// use filterFn if matches value
$grid.isotope({ filter: jQuery( this ).val() })
})
})
and this is my select element
<div class="select-group">
<div class="col-sm-8">
<select id="daty" class="select-css form-control long">
<option value="">Daty</option>
<option data-sorttype="des" data-sort-by="tytul" value="asc">Od najnowszych</option>
<option data-sorttype="asc" data-sort-by="tytul" value="des">Od najstarszych</option>
</select>
<select id="kategorie" class="form-control filter_by_type2 select" placeholder="">
<option value="">Kategoria</option>
<option value=".cialo">Ciało i duch</option>
<option value=".rozum">Serce i rozum</option>
<option value=".zdrowie">Zdrowie i energia</option>
<option value=".relacje">Relacje</option>
<option value=".zamoznosc">Zamoznosc</option>
<option value=".kreatywnosc">Kreatywnosc</option>
<option value=".natura">Natura</option>
</select>
</div>
</div>
I will appreciate any help ;)