Closed unijez closed 2 years ago
@unijez — I've run into this as well, and I typically just write a small bit of custom code myself to cover it, since it's not too difficult.
I'll usually just have a small div, something like this—
<p class="isotope__no-results" id="isotope__no-results">
The current filter selection resulted in no matches... (or whatever)
</p>
And then in the JS I'll add an event listener on layout complete (reference)—
isoptope.on('layoutComplete', function(items) {
document.getElementById('isotope__no-results').style.display = items?.length ? 'block' : 'none'
})
The listener passes items
as an argument, which is the active set of filtered items currently in the Isotope instance. So basically I just check to see if there are more or less than 1 elements in the current filters: if not, I display the no results HTML, and if there is, I hide it again. You can do this a lot of different ways too, so whatever works for you.
Let me know if you have any other questions!
Is there any way or documentation for showing some content when there are no results.
I've tried the following but i think its from isotope 2 code and doesn't work?
Thank you for any help.