[Resolved] setting up the search portion of a view

[Author]

Posts

[jessieB-2]

Tell us what you are trying to do?
I need to be able to have a visitor select one of two search boxes - then depending on that selection - a set of. CPT's are shown and the second set of criteria is shown.

So the visitor would choose single or choose couples - Above the list
and then another list to choose from shows on the side of the list returned -

How can I make this possible

Is there any documentation that you are following?
no
Is there a similar example that we can see?
no I have not been able to find one

What is the link to your site?
hidden link

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Jessie,

Thank you for contacting us and I'd be happy to assist.

To suggest the best way to achieve this, I'll need to see exactly how this search form (with all the fields) is set up.

Can you please share temporary admin login details along with the link to the page with this search form?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the admin access.

At this point, I'm not sure exactly which view or page are you referring to, but the first step would be to set the search form with all the fields ( regardless of the fact that they should appear for "single" or "couples" choice ).

Related guide on search filters: https://toolset.com/documentation/user-guides/views/front-page-filters/

Once this search form is working, the next step would to group or structure those fields in a way that they are in special div containers that can be hidden or shown, based on the "single" or "couples" field selection through, some custom script.

Here is how the structure of fields will look like in the "Search and Pagination" section:

<!-- Section for the common fields -->

Common fields which should show always will appear here

<!-- Section for the single option fields -->
<div id="single-fields-container">

Fields which should show only when the "single" option is selected will appear here

</div>

<!-- Section for the couples option fields -->
<div id="couples-fields-container">

Fields which should show only when the "couples" option is selected will appear here

</div>

Once this search form is ready in this structure, please share the link to its page and I'll share an example of a custom script that can be used to show/hide fields.

[jessieB-2]

Okay,
The view that I am working on is the Coach Search View
I have the fields input as you requested.
I am attaching a screenshot to show what they are actually wanting.
The resulting url is:
hidden link

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Jessie,

Thank you for waiting and sorry about the delay in getting back on this.

I've reviewed the view's search form and here are steps to show or hide special field containers, based on the "Coaching Focus" checkboxes.

1. Please change the special field container divs to use a class instead of an ID:

<div class="single-fields-container">

....

<div class="couples-fields-container">

2. Next, include a class name "wpcf-coaching-focus" in the div that wraps the "Coaching Focus" search field, so that the checkboxes inside can be easily targeted through a custom script:
( screenshot: hidden link )

<div class="form-group wpcf-coaching-focus">

3. In the "JS editor" tab below the search fields, you can include a script that hides those special fields containers and only show them, when the respective checkbox is checked.
( screenshot: hidden link )

jQuery( document ).ready(function() {
  searchFilterHideFunction();
});

function searchFilterHideFunction() {
  jQuery('.single-fields-container').hide();
  jQuery('.couples-fields-container').hide();
    
  var selectedOptions = [];
  jQuery.each(jQuery(".wpcf-coaching-focus input[type='checkbox']:checked"), function(){
    selectedOptions.push(jQuery(this).val());
  });
  
  if( selectedOptions.indexOf('Singles Coach') >= 0 ) {
    jQuery('.single-fields-container').show();
  }
  
  if( selectedOptions.indexOf('Couples Coach') >= 0 ) {
    jQuery('.couples-fields-container').show();
  } 
}

4. The last step would be to include the function name from that custom script "searchFilterHideFunction", in the "will run after updating the results" field, in the "Custom Search Settings" section.
( screenshot: hidden link )

This will make sure that the same custom script is also executed, every time the search results update, due to a change in any search filter.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[jessieB-2]

Thank you SO much for helping me - I feel like we are almost there!
I duplicated the setup - so as to not mess with the one that is default for now.
The new page is hidden link
and the new view is coachsearchTestEnter

The script does hide the other categories - however, once I select single or couple then the appropriate new select options become available for a split second - and then disappear. So something is still a little off.

Here is a link to how it is functioning now
hidden link

There are a couple of other little things that I need to change as well - hoping you can help me with these - as they are probably simple. I included an image to show the other two things I need.

AND - how do you put spaces between the check boxes and the labels

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Jessie,

Thanks for the update and glad that my message helped.

I just wanted to let you know that I'm currently reviewing the points from your recent reply and will share my detailed answer shortly.

Thank you for your patience.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Jessie,

I've noticed that on the search page ( hidden link ), you've already implemented an elegant solution of using two separate views for "singles" and "couples", which are hidden/shown, through some custom script.

It seems to work great and looks like you've managed to take care of all the items from your last message - well done.

Again my sincere apologies for the long waiting time and please let me know if you have any follow up questions.

For a new or different question/concern, you're welcome to start a new ticket.

regards,
Waqar