ACF custom fields are shown correctly as filter but aren't filtering the results

Trevor Moderator

#185956

This reply has been marked as private.

Add New Note to this Reply

Doron Wolf

#186067

hi Trevor
sorry for the delay
seems like my client is happy using taxonomies more than custom fields so for now i have to leave things they are
Unfortunately this means we wont have the possibility to check the misbehavior of the from with custom fields but since it’s working now and the client is happy i Guess we should move on

But now we have a different problem – one of the filters is about to be populated with many new terms (more than 30) which will probably make the search form look ridiculously long because the client insists on using only checkboxes
is there a way to show only the first 5 and than hide the others under ‘show more’ link?
should I open a new thread for this?

Add New Note to this Reply

Trevor Moderator

#186069

Hi

There is not an option to do that within the plugin, so you would need to install and use (or code for yourself) a javascript solution. Whilst I don’t have any examples, I have seen websites that do this. The best idea is to use the header to collapse or hide the list.

Add New Note to this Reply

Doron Wolf

#186095

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#186097

You need to run your code again. Either duplicate in the snippet below, or make it a function, call it on document load and also in the snippet below:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");

// call your function(s) here

  });
}(jQuery));</script>

Add New Note to this Reply

Doron Wolf

#186099

already done that
my code is

(function($) {
	
	// $ Works! You can test it with next line if you like
$('#search-filter-form-123 > ul > li > h4').click(function() {
    $(this).parent().find('ul').toggle();
});
	
})( jQuery );

and in the beginning the function will work only once and stop working at all after the ajax refreshes the results
so i did as you suggested and now you can click to collapse again even after the results are refreshed
but its eems that there is a built in search and filter css:
.searchandfilter ul {display: block; …} that might be kicking in every time the results are refreshed
is there a way to make this css line “run only once” ? and not every time the page refreshes the results?

Add New Note to this Reply

Trevor Moderator

#186102

The CSS is loaded only once. If you need to change that, make you own css like this:

#search-filter-form-123.searchandfilter ul {display: block; …}

Add New Note to this Reply

Doron Wolf

#186108

if the css is loaded only once than i’m not sure what’s causing the filter titles to expand each time the results are refreshed

if you inspect my page and look at chrome developer console you will see that every time the results are refreshed, the whole form is also refreshed (both result container and form are seem to be refreshed) which make the css styling to apply again (and so display:none become display: block e.g resets the toggle status)

Add New Note to this Reply

Doron Wolf

#186110

UPDATE:
o.k.. it seems that if i disable the ‘auto count’ and the ‘Update the Search Form on user interaction’ in the form settings than the problem go away..but than the toggle will stop working randomly (some time it will work and some other times it wont)

Add New Note to this Reply

Trevor Moderator

#186128

The code I gave you works when the form submits. To also catch when the form performs an Ajax Auto Count, the code looks like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
    console.log("ajax complete");

// call your function(s) here

  });
}(jQuery));</script>

Notice the use of ajaxformfinish instead of ajaxfinish.

Add New Note to this Reply

[Author]

Posts