Streaming live at 10am (PST)

Isotope filter buttons don't work!


#1

Hi there!

Can anybody check my link : https://preview.webflow.com/preview/tcpremier?utm_source=tcpremier&preview=fddf4582cfbba2f0c58276889650cfe3

Buttons dont work!

What am I doing wrong?

PLEASE HELP ME!


#2

Which buttons do not work, and what should they do but currently don’t?


#3

Hi!
On this link http://tcpremier.webflow.io/deti should work isotope filters, search is working, but filter buttons dont

PLEASE HELP)


#4

Hi @Andrew_Antoshkin,

I had the same problem. I find the solution by adding some code.

The Code:

<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
<script>
// document ready wrapper
$(document).ready( function() {

  // find all filter buttons
  const filterToggles = document.querySelectorAll('[data-filter]');

  // go over each filter button
  filterToggles.forEach(function(toggle) {
    
    let attrVal = toggle.getAttribute(['data-filter']); // find the filter attr
    let newVal = attrVal.toLowerCase().replace(' ', '-'); // hyphenate filter attr val
    toggle.setAttribute('data-filter', newVal); // set filter attr with new val
    
  });

  // go over all collection item category label elems
  $('.w-dyn-item .category').each(function(index, element) {
  		var _this = $( element );
      // lowercase, hyphenate and add as a class to dyn-item for isotope filtering
  		_this.closest('.w-dyn-item').addClass( _this.text().toLowerCase().replace(' ', '-'));      
  });


  // quick search regex
  let qsRegex;
  let buttonFilter;

  // init Isotope
  const $grid = $('.grid').isotope({
      itemSelector: '.w-dyn-item',
      stagger: 30,
  		filter: function() {
      	var $this = $(this);        
      	var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
      	var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
        return searchResult && buttonResult;
    	}
  });

  // reveal all items after init
  const $items = $grid.find('.w-dyn-item');
  $grid.addClass('is-showing-items').isotope( 'revealItemElements', $items );

  $('#filters').on('click', 'button', function() {
      buttonFilter = $( this ).attr('data-filter');
      $grid.isotope();
  });

  // use value of search field to filter
  const $quicksearch = $('#quicksearch').keyup(debounce(function() {
    qsRegex = new RegExp($quicksearch.val(),'gi');
    $grid.isotope();
  }));

  // change is-checked class on buttons
  $('.button-group').each(function( i, buttonGroup ) {
    const $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });


  // debounce so filtering doesn't happen every millisecond
  function debounce(fn, threshold) {
      let timeout;
      return function debounced() {
        if ( timeout ) {
          clearTimeout( timeout );
        }
        function delayed() {
          fn();
          timeout = null;
        }
        setTimeout( delayed, threshold || 100 );
      };
  };


  // disable search from submitting
  $('#quicksearch').on('keyup keypress', function(e) {
    const keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
      e.preventDefault();
      return false;
    }
  });

});
</script>

#5

Thank You!!!) Yeah!
I spent so much time for it, you just save me!)
Can I ask you help in one more thing?
On this page in isotope filter button ALL dont showing http://tcpremier.webflow.io/deti
Whats the proplem?
How to styling the button ALL?
Thanks in advance!


#6

Hi @Andrew_Antoshkin,

I can have a look at your preview link. Have you already add margin or padding?


#7

Hi!

Yes! please.

Check my preview : https://preview.webflow.com/preview/tcpremier?utm_source=tcpremier&preview=fddf4582cfbba2f0c58276889650cfe3

ISOTOPE is set on the page DETI

Thank you!


#8

Hi @Andrew_Antoshkin, sorry I was not able to find the problem. I suggest you to take the steps again. Sometimes when I can’t find the problem I create a new project and start this part from scratch. It must work hopefully, Good luck!


#9

Thanks anyway, man!))