Isotope HASH URL filtering not filtering on load

Design help Custom code
1

webflow site
https://andrews-five-star-project-ef5c85.webflow.io/home-copy#filter=.red

Can anyone tell me why my filter wont apply on page load, but will apper in the URL as a # filter when button clicked?

Javascript is below :slight_smile:

// document ready wrapper
$(document).ready( function() {

function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match( /filter=([^&]+)/i );
  var hashFilter = matches && matches[1];
  return hashFilter && decodeURIComponent( hashFilter );
}

$( function() {

  var $grid = $('.isotope');

  // bind filter button click
  var $filters = $('#filters').on( 'click', 'button', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = 'filter=' + encodeURIComponent( filterAttr );
  });

  var isIsotopeInit = false;

	function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
      return;
    }

    isIsotopeInit = true;
    // filter isotope
    $grid.isotope({
      itemSelector: '.element-item',
      filter: hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filters.find('.is-checked').removeClass('is-checked');
      $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
    }
  }


});
	// filter functions
	var filterFns = {
	  // show if number is greater than 50
	  numberGreaterThan50: function() {
	    var number = $(this).find('.number').text();
	    return parseInt( number, 10 ) > 50;
	  },
	  // show if name ends with -ium
	  ium: function() {
	    var name = $(this).find('.name').text();
	    return name.match( /ium$/ );
	  }
	};



  // 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.parent().parent().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();
  });


});
$(window).on( 'hashchange', onHashchange );
// trigger event handler to init Isotope
onHashchange();`