Show 'No Matching Results' text with MixItUp Plugin

Design help Custom code
1

Greetings All,

I’m trying to figure out a way to show ‘no matching results’ text when no results are found from select fields on the workouts page. Wondering if it’s something I could add to the code or if it would be best to do something within the designer to accomplish.

Any help is appreciated. Thanks all!

Screenshot Attached of how it currently looks when no results are matching/found.

52%20AM
52%20AM1440×900 77 KB

Here is my site Read-Only: **[https://preview.webflow.com/preview/rowgatta-full-website?preview=72a6979b553406faf469845fec7d7204]

2

Tuturial (By HTML) -

Take this ideas to webflow

A

HTML side (webflow tree)

Create an alert message - with id of #noItemsFoundMessage

<div id="noItemsFoundMessage"><h1>No Items Found! <a class="filter-btn" href="#" data-filter="all">clear all filters</a></h1></div>

image

B javascript side

1. simple hide/show by display:none / block;

Later we put this code inside the “if” statement + hide the alert by deafult

    var noItemsFoundMessage = document.getElementById("noItemsFoundMessage");
    noItemsFoundMessage.style.display = "none";

2. ## MixItIP API - onMixEnd event

onMixEnd. A custom event triggered after any MixItUp operation has completed, and the state has been updated. docs

callbacks:

3. ## MixItIP API - state-object → hasFailed

Use state-object

hasFailed - A boolean indicating whether the last operation “failed”, i.e. no targets could be found matching the filter.

Great :slight_smile: we use this state to show/hide the alert message.


// ## 1 - hide alert message by deafult 
var noItemsFoundMessage = document.getElementById("noItemsFoundMessage");
noItemsFoundMessage.style.display = "none";

//  MIXITUP 3 plugin settings
    mixitup('#mix-wrapper', {   
          // ## 2 - callbacks onMixEnd 
         callbacks: {
         onMixEnd: function(state){
           // ## 3 - hasFailed true? show alert
           if(state.hasFailed){  
              noItemsFoundMessage.style.display = "block";
              alert("No items found");
           }
           // ## 3 - hasFailed false? hide alert
           else{
              noItemsFoundMessage.style.display = "none";
              alert("Items found");
           }
         },
      
      }, //end of callback

    /// rest of the code....

Extra effects

If you want to show/hide the message with some fade animation - one way is by jquery show/hide functions:

Collapse height

You want the message to “collapse” (no height) otherwise you get “jump” effect - so set the parent to position: relative and the text to position: absolute;

<div style="position: relative;" id="noItemsFoundMessage"><h1 style="position:absolute;">No Items Found!</h1></div>

1 Like
3

@Siton_Systems Thank you so much for providing all this great info. I’m going to try to apply it to my project today and let you know how it goes. Really appreciate the extra effects and collapse height info.

4

@Siton_Systems When you have a moment could you please take a look at my project (https://preview.webflow.com/preview/rowgatta-full-website?utm_source=rowgatta-full-website&preview=72a6979b553406faf469845fec7d7204) to see where I might’ve gone wrong because the message is not showing when there are no matching filters?

Workout Page URL (Not showing in errors in console): http://rowgatta-full-website.webflow.io/workouts

Please and Thank you.

5

Create new/empty page. And do tests (Like my simple codepen) until it will work. Its hard to debbug your example (Endless options and menus).

Working webflow example:

http://new-landing-page-94e5db.webflow.io/mixitup

Readonly example (please copy-past this. 3-4 days from now i delete this link)
https://preview.webflow.com/preview/new-landing-page-94e5db?utm_source=new-landing-page-94e5db&preview=494ede11904b1e031d52b06fdae80dee

By the way - you could ask this Q in mixitup forums -or- stackoverflow (Maybe thier is easier way to solve this).

I thinks you could check if “collection-list” number of childres is “zero” - and thats it (Without mixitup API):
https://stackoverflow.com/questions/14535733/how-to-check-if-div-element-is-empty

1 Like