[Resolved] Search – do not show items before using filters

[Author]

Posts

[dzemalN]

I'm trying to make search filter on the top of the page but i'm getting all items listed! See attached photo "show-all.jpg"
I do not want to show any item before user start to use filters. See attached photo "no-search.jpg".

I have filters with some categories listed in dropdown. f.ex:
- Select target group
Group 1
Group 2
Group 3

I want to show only filters but not items.
- Select target group - - Choose dentists - - Search - - x Clear filters -
No content below.
See attached photo "no-search.jpg"

If user make search than i will list those items from that category below filters.
See attached photo "show-all.jpg"

[Minesh]

Hello. Thank you for contacting the Toolset support.

Here is the section how you can display search form and search result side by side:
=> https://toolset.com/course-lesson/creating-a-custom-search/#set-up-the-view-search-and-results-side-by-side

To display no results on page load, you should try to add the following code to "Custom Code" section offered by Toolset:
- https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/

add_filter('wpv_filter_query', 'func_hide_result_until_search', 99, 3);
function func_hide_result_until_search($query, $setting,$view_id) {
   
    if($view_id == 99999) {
        
             $query['post__in'] = array(0);
         
        
    }
   
      
    return $query;
}

Where:
- Adjust the 99999 with your original view ID
- adjust the post__in so that it should be called only when there in no URL param available.

If you do not know how to do it, please share problem URL where you added the view and access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

The thing is that, you are using Custom Search option "Show only filter options that would produce results" and when we set the results to display only no results on first page load, the filters will not display any values as there is no results there will be no values for the filters.

Is that OK if I change the filters to search with "Submit" button, then we can track the submit action using the URL param and switch the case to no result to display the results.

Is that OK with you?

[dzemalN]

Ok you can try what is necessary.

[Minesh]

Ok, I found a better way.

As you can see with the following screenshot;
=> hidden link

I've added the following CSS code to Custom CSS section to hide the results:

.js-wpv-loop-wrapper {
display:none;
}

And added the following JS code to Custom JS section to show the results:

>
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
jQuery(".js-wpv-loop-wrapper").show();
  
});

[dzemalN]

Ok i will test it and let you know

[Minesh]

Ok sure, once you see it working, Please feel free to mark this ticket resolved 🙂

[dzemalN]

Dear Minesh,
i tried that you recommended and it's working unless you press Clear all filters button.
Than it displaying everything.

When press on clear all filters button I will to reset only filters and hide results.
Just like you come first time on the page.

Another issue is if you have more loops on the same page it will hide all of them and show them once you make some filter search.
But that i resolved by adding custom CSS ID to View. You can see that on the front page, i created search filters there.

#custom-search .js-wpv-loop-wrapper {
display:none;
}

.content-area {
    margin-top: 0rem!important;
    margin-bottom: 0rem!important;
}

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
jQuery("#custom-search .js-wpv-loop-wrapper").show();
  
});

[Minesh]

Reset button meaning is to reset the results and obviously when you click on Reset button it will reset the search form and display the results.

[dzemalN]

I know meaning of reset button, but that i want is to manipulate it and just do it like i described in my previous post.
Can you tell me how to do that or where to look to manipulate that.

[Minesh]

Do you mean even when you click on Reset button you do not want to display any posts?

[dzemalN]

Yes, i want reset filters and no post.

[Minesh]

Ok - so to hide the results o Reset button click I've added the following code to Custom JS section:

jQuery(document).ready(function($){
	jQuery("input[name='wpv_filter_reset']").on("click",function(){
   		sessionStorage.setItem("reset_clicked", "1");
     	 
 	});
  
});

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
  
  if(sessionStorage.getItem("reset_clicked")=="1"){
		jQuery(".js-wpv-loop-wrapper").hide();
  }else{
    sessionStorage.setItem("reset_clicked", "0");
  	jQuery(".js-wpv-loop-wrapper").show();
  }
});

You can adjust the code if required as per your requirement.

[dzemalN]

Dear Minesh,
this code working only if you click once on reset button.
Then you can't search any more.

As i can see, you can search first time you come on page.
If you click on reset button then session is set to 1 with

reset_clicked=1

.
If you try to search again nothing showing, and as i can see session is still set to 1

reset_clicked=1

.

Again i tried that script on search on my front page but

reset_clicked=0

is always 0.
I used below code to hide and show wrapper.

 jQuery("#custom-search .js-wpv-loop-wrapper").hide();

 jQuery("#custom-search .js-wpv-loop-wrapper").show();

[Minesh]

Ok - I've adjusted the code as given under within the custom JS section.

jQuery(document).ready(function($){
	jQuery("input[name='wpv_filter_reset']").on("click",function(){
   		sessionStorage.setItem("reset_clicked", "1");
     	 
 	});
  
});

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
  
  jQuery("input[name='wpv_filter_reset']").bind("click",function(){
   		sessionStorage.setItem("reset_clicked", "1");
      	//alert(sessionStorage.getItem("reset_clicked"));
     	 
 	});
  
  if(sessionStorage.getItem("reset_clicked") == "1"){
		jQuery(".js-wpv-loop-wrapper").hide();
    	sessionStorage.setItem("reset_clicked", "0");
  }else{
    sessionStorage.setItem("reset_clicked", "0");
  	jQuery(".js-wpv-loop-wrapper").show();
  }
});

I can see its working as expected now. Can you please confirm.