How do i sort posts using Isotope.js with select element?

Viewed 105

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 ;)

0 Answers
Related