Hide Fields which would return 0 results

Anonymous

#248675

Is there a way to hide a whole section (the sections you make in Search Form UI) from Search Results if it returns 0 results?

Kind regards,
Matija

Ross Moderator

#248747

Hi Matija

Its not an option in our settings, but it might be possible if you are a developer.

If you can develop in JavaScript, I can take you through the logic I would use to approach this?

Thanks

Anonymous

#248761

Hey Ross, that’s great news! I was thinking that I could probably write a short script that would, for each field, check for the number of items displayed and hide the whole field if the number is sufficiently low. Something along those lines. Glad to hear it’s possible!

Can you please walk me through it?

Thanks!

Ross Moderator

#248804

Hi Matija

Just to be clear on what you are trying to do, you essentially want to hide a field completely, if there are no options with results in it?

For this I would use the sf:ajaxfinish JS event here:
https://searchandfilter.com/documentation/faq/#will-my-lightbox-or-other-fancy-javascript-work-with-this-plugin

Inside the event, as the second param, you have various data, such as the search form ID, results container, etc to help in getting the right elements to perform your checks:

$(document).on("sf:ajaxfinish", ".searchandfilter", function(event, data){
	console.log("ajax complete");
	console.log(data);
});

If your form is updating dynamcally before the results (ie, Update the Search Form on user interaction is enabled, and auto submit is disabled) then we have an undocumented event:

$(document).on("sf:ajaxformfinish", ".searchandfilter", function(event, data){
    console.log("fired finish");
 });

The rest of your logic looks correct. In a future version of S&F, we will be provding the filter data as a JSON object, so you will be able to do easy checks to see if fields have values etc.

Thanks

Anonymous

#248987

Hi Ross,

Yup, that’s what I’m trying to do.

I’ve added the script to the pages where we’re using S&F. Like so:

console.log('1');

document.querySelector(".searchandfilter").addEventListener("sf:ajaxfinish", function (event, data) {
    console.log('ajax complete');
}, false);

document.querySelector(".searchandfilter").addEventListener("sf:ajaxformfinish", function (event, data) {
    console.log('fired finish');
}, false);

However, neither of the events seem to be firing. Instead, each time I change something in the form, the script just executes and logs ‘1’ – probably since the page reloads every time with new results. I’m fine with this. Before contacting you, this is what I expected it to be doing.

However, I’m not sure why the events aren’t firing, so just wanted to check with you to make sure I’m not making a royal mess of this.

Thanks

Ross Moderator

#249034

Hi Matija

As WP always ships with jQuery on the front end, why not use jQuery as I showed in the example?

In addition, you are listening on .searchandfilter directly, but when the search form is replaced (in an ajax request), the object is gone, my example above (attaching to document, and using jQuery, allows for current and all future instances to be caught).

Anyway, try my code exactly as shared, and let me know if you have the same issue?

Thanks

Anonymous

#249129

Hi Ross,

Alright, applied your code exactly as shared.

It fires now… But it always fires 4 times. Is this normal?

Thanks

Ross Moderator

#249194

Do you have a link I could look at?

Please use the “private reply” feature for any sensitive information.

Thanks

[Author]

Posts