[Resolved] Views: How to create Flexible search with dropdown lists change based on choices

[Author]

Posts

[AtefR7377]

Hi,
I have a CPT called "Bible", where the Bible Books (e.g. Genesis, Exodus...etc) are "parent" posts, and under each book, there are chapter child posts (e.g. Genesis 1, Genesis 2..etc).
These chapter posts are parents to another CPT called "Books" and another CPT called "Sermons".

So if I have a "Book" that has commentaries about "Genesis 15", I make it a child to the "Genesis 15" post.

then in these chapter posts, i have views showing the commentary posts i have for this chapter (books, sermons..etc).

I am trying to build a custom search where a visitor can choose the Bible book from a dropdown menu, then choose the chapter he/she want to get books or sermons about, then click "search", so they get a view with the available material for this chapter.

I know that views has a flexible searches:
https://toolset.com/2014/06/learn-build-flexible-parametric-searches/

but I don't know how to create dropdown lists that change based on the choice of book.

For example: Genesis has 50 chapters, while Exodus has 40..etc so if the chapters dropdown menu is static, this will lead to some visitors choose "Exodus" then chapter 45 or so, which is invalid.

can you please direct me as to how to achieve this?

please note that the total number of Bible chapters across all the books is 1189 chapters. so any "smart" way of doing this is much appreciated.

i am still building the website, so if I need to add custom fields or so to help in this process, I can easily do so now.

thanks in advance.

[Christian Cox]

I don't know how to create dropdown lists that change based on the choice of book.
This is called Limiting Inputs According to Available Results, and is described in the following guide:
https://toolset.com/documentation/user-guides/front-page-filters/advanced-settings-custom-search/

The Real Estate demo site you can create at discover-wp.com implements this type of search (see City and State in the main property search). Feel free to examine how that works by creating your own Real Estate site demo at http://discover-wp.com/site-templates/

[AtefR7377]

Hi Christian,

I can't thank you enough for your continuous support in all my tickets.

Since this ticket is dedicated to the flexible search, it will help breaking the Bible Study tool creation ticket into smaller sections, as per your advice.

So far, what I achieved is:
- Created a CPT called "Bible Commentaries", with Custom Taxonomy called "Bible Books" and another one called "Bible Chapters"
- Populated the Bible books with 2 taxonomies (Genesis and Exodus) and Bible Chapters with 3 taxonomies (Chapter 01, Chapter 02 and Chapter 03)
- Created one main post for the book of Genesis, and 2 child posts (Genesis 01 and Genesis 02).
- Assigned "Genesis" and "chapter 01" to the Child Post "Genesis 01", same for Genesis 02.
- Created another main post called "Exodus" and a child post called "Exodus 03" and assigned appropriate taxonomy.

The results so far are good.
hidden link

The problems I need help with:

1- Hiding the results until I choose the chapter. I know you gave me this code in the other support ticket, but when I replace the "1, 2, 3" with my view id (which is 16102) all what i get is one sentence "No results found", but I can't even choose any Book or chapter from the dropdown menu. it stops the view from working at all.
I also tried replacing

wpv_post_search

with

wpv_view_count

, but still no difference.
This is the complete code I used, but did not work:

add_filter( 'wpv_filter_query', 'drop_empty_search_query', 10, 3 );
function drop_empty_search_query( $query_args, $view_settings, $view_id ) {
    $ids = array(16102);
    if (in_array($view_id, $ids)){
      if ( isset($_GET['wpv_post_search']) && $_GET['wpv_post_search'] != '' )
      {
      } else {
        $query_args['post__in'] = array(0);
      }
    }
    return $query_args;
}

.
2- Regarding Choosing different translations for the same chapters. I think that for translations, it is better to have all the translations for each chapter in one post. this is because the Bible chapters are around 1100. if I have only 5 translations, I will end up with 5500 post, just for the translations, while most chapters are just a few paragraphs.

To solve this, I created a custom fields group called "Bible Translations".
In it, I added 3 WYSIWAG editor, one for each translation.

However, I found out that I can't add them to the custom search, because when I go to add another filter, I can see 3 individual fields.
So I added another custom taxonomy called "Bible Translations" and added 2 different translations.
I was able to show this in another dropdown list, but what I can't find a solution for is:
How to show the specific translation based on the dropdown list choice?

Without the translations, I pasted the content in the post body, and had the loop wizard showing the post title and post body.
when I introduced the translations, I moved the text of "Genesis 1" from the post body to the custom field, and added the that field to the view instead of the post body. I tried using conditional output, but failed.

also, the problem with using taxonomy for translations is that the posts will have multiple translations assigned to it. there is now way to assign a certain taxonomy to a certain custom field.

So, How to show the content of a specific custom field based on the dropdown list choice?

I think if we solved these 2 points, we will achieve a lot towards the Bible study tool and can progress a bit more afterwards.

Thanks a lot for this.

[AtefR7377]

Just to be more accurate, here is the latest trial I have, but it failed too:

Loop Output editor:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		[types field='kjv-translation'][/types]
		[types field='lsg-translation'][/types]
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Loop item:

[wpv-post-title]
[wpv-conditional if="( '[wpv-bible-translation]' eq 'kjv' )"][types field='kjv-translation'][/types][/wpv-conditional]
[wpv-conditional if="( '[wpv-bible-translation]' eq 'lsg' )"][types field='lsg-translation'][/types][/wpv-conditional]

Even if I put the conditionals in the loop, it still doesn't work

here is the test page:
hidden link

Genesis chapter 01 has 2 translation fields filled, so I am expecting when I choose "Kind James Version" from the translation menu, I see the text that starts with: "Genesis 01 KJV", and when I choose "Louis Segond", I get the text that starts with "Genesis 01 LSG".

However, what I get is both texts in both choices, so the conditional is not working.

Thanks.

[Christian Cox]

1- Hiding the results until I choose the chapter. I know you gave me this code in the other support ticket, but when I replace the "1, 2, 3" with my view id (which is 16102) all what i get is one sentence "No results found"
The code I sent earlier is meant for a specific case where the only search form input is a text search field. Instead, you need to test both the book and chapter fields. They should both have a value selected. Here's the code you should use instead for this View:

add_filter( 'wpv_filter_query', 'drop_empty_book_chapter_search_query', 10, 3 );
function drop_empty_book_chapter_search_query( $query_args, $view_settings, $view_id ) {
    // comma-separated list of View IDs
    $ids = array(16102);
    
    if (in_array($view_id, $ids)){
      if (
        // check bible book selection
        ( isset($_GET['wpv-bible-book']) && $_GET['wpv-bible-book'] != '' )
          &&
        // check bible chapter selection
        ( isset($_GET['wpv-bible-chapter']) && $_GET['wpv-bible-chapter'] != '' )
      ) {
      } else {
        $query_args['post__in'] = array(0);
      }
    }
    return $query_args;
}

How to show the specific translation based on the dropdown list choice?
I think this is going to be difficult if you must use custom fields for translations, because custom search View dropdowns are set up as filters, not as options for displaying certain fields in the results. If you use separate posts for translations, then the filter could work as expected if you apply a custom field to each translation post that indicates the translation code.

If the custom field approach is necessary, you need a custom solution that adds the selected translation code into the URL as a URL parameter whenever the search fields are updated. Then you need to be able to use that URL parameter in your View or in some custom JavaScript to determine which custom field should be displayed. It should also work if you copy the URL and paste it into another browser - the selected language should be maintained. This is fairly complex, and most of it falls outside the scope of the support we can provide here in the forums. A professional developer could help, and we have a Contractor portal where you can connect with freelancers:
https://toolset.com/contractors/

Even if I put the conditionals in the loop, it still doesn't work:

[wpv-conditional if="( '[wpv-bible-translation]' eq 'kjv' )"][types field='kjv-translation'][/types][/wpv-conditional]

The shortcode wpv-bible-translation doesn't exist, unless you have created it as a custom shortcode. Instead, you need to be able to respond to a URL parameter, which will be set by the select field mentioned above. The wpv-post-param function I shared can be helpful, because it will allow you to access URL parameters in a conditional: https://toolset.com/forums/topic/how-to-build-a-bible-study-tool-with-wp-types-views/#post-601616

[AtefR7377]

Hi Christian,
Thanks for the great followup.

1- As for the new function, I pasted it into the child theme's functions,php. it hid the results, but also hid all the options in the dropdown lists. it became an empty custom search.
please check the view here:
hidden link
.
2- As for the wpv-bible-translation, I did not create a shortcode, I copied it from the url. this gets added in the second form where I added the translations dropdown.
so the url becomes like this:

hidden link

you can see the form in action here:
hidden link

(please choose: Genesis /Chapter 01, then you will find 2 translations. the wpv-bible-translation changes in the url if you change the translations, from kjv to lsg.

isn't this behavior what you described in your last reply: <quote>you need a custom solution that adds the selected translation code into the URL as a URL parameter whenever the search fields are updated.</quote>

I am happy to contact a developer, but I feel that you were describing exactly what I already achieved,
What I can't achieve is when the wpv-bible-translation is chosen as "=kjv" that only the corresponding custom field appears.

can you please kindly look at these 2 issues again?

thanks a lot.

[AtefR7377]

Hi Christian,

further to my last message, I added the wpv-post-param function you gave me. I am trying to get it to use the wpv-bible-translation variable that the "Translations" dropdown list puts in the url.
if I use the new shortcode without parameters, it "echos" the slug of the chosen translation taxonomy.
so if I chose "King James Version", the view prints "kjv".

<h3>[wpv-post-title]</h3>
[wpv-post-param var='wpv-bible-translation']

however, when I use it in a conditional function like below, nothing at all shows:

<h3>[wpv-post-title]</h3>
[wpv-conditional if="([wpv-post-param var='wpv-bible-translation'] eq 'kjv')"]
  [types field='kjv-translation'][/types]
[/wpv-conditional]
[wpv-conditional if="([wpv-post-param var='wpv-bible-translation'] eq 'lsg')"]
  [types field='lsg-translation'][/types]
[/wpv-conditional]

.
here is a test post:
hidden link
this has the 2 codes, but it only prints the slug from the shortcode that does not have the parameters.

[Christian Cox]

1- As for the new function, I pasted it into the child theme's functions,php. it hid the results, but also hid all the options in the dropdown lists. it became an empty custom search.
Disable the "only show available inputs" option in your View. Are you able to see the options now?

2- As for the wpv-bible-translation, I did not create a shortcode, I copied it from the url.
Okay you can't access a URL parameter using this syntax. This is what the custom shortcode I provided is for. Instead of this:

[wpv-bible-translation]

Use the wpv-post-param shortcode to access this parameter:
[php]
[wpv-post-param var='wpv-bible-translation']

this has the 2 codes, but it only prints the slug from the shortcode that does not have the parameters.
I'm confused, sorry. Let's start here:
hidden link
Choose Genesis
Choose Chapter 01
Choose King James Version
You will end up at this URL:
hidden link

In the results, I see "Genesis 01 kjv" but it's difficult for me to tell what's going on. Can you copy + paste all your Content Template and View code?

[AtefR7377]

Hi Christian,
Thanks for the update.

1- I disabled the "only show available inputs" option in your View. The options show now, but the view is now showing all the options. For example, "Exodus" has only "chapter 3", but it is showing now all 3 chapters. So we still need a solution for this.

2- Yes this is the shotcode I am now using

[wpv-post-param var='wpv-bible-translation']

I am trying to use it in a conditional saying: if this shortcode is "kjv", then show the custom field that has the text that belongs to the Kind James version.
but the conditional is not working.

Here is a screenshot of my loop wizard:
hidden link

here is the loop wizard code:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="Loop item in parametric search 03"]
	</wpv-loop>
	<!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

here is the code in the "templates of this view" section:

[wpv-conditional if="([wpv-post-param var='wpv-bible-translation'] eq 'kjv')"]
  [types field='kjv-translation'][/types]
[/wpv-conditional]
[wpv-conditional if="([wpv-post-param var='wpv-bible-translation'] eq 'lsg')"]
  [types field='lsg-translation'][/types]
[/wpv-conditional]

Here is the the code of the "Filter and Loop Output Integration Editor" section:

[wpv-filter-meta-html]
[wpv-layout-meta-html]

This view is used in this page:
hidden link

when you navigate to the King James Translation, you should see a heading saying Genesis 01 KJV, followed by some text, but you don't get anything at all:
hidden link

same for the LSG translation, when you navigate to the Louis Segond Translation, you should see a heading saying Genesis 01 LSG, followed by some text, but you don't get anything at all:
hidden link

my feelings is that the system is working, but I am doing something wrong in either the loop wizard, or the conditionals.

Note: the reason you were seeing before "Genesis 01 kjv" was because I had the "Post Title", and

[wpv-post-param var='wpv-bible-translation']

above the conditionals.
so the code gives just the slug "kjv" when the King James translation was chosen.
So I removed the Post title and the shortcode from the current view, and has the view data as per the pasted code above, to clear any confusion.

Thanks

[Christian Cox]

Okay it's probably best at this point for me to log in to your wp-admin area and see how things are set up. Then I can make some recommendations. If that's okay with you, please provide login credentials in the private reply fields here and I will take a look.

[Christian Cox]

Okay I see the problem with the conditionals - you must surround the wpv-post-param shortcode in single quotes like this:

[wpv-conditional if="('[wpv-post-param var='wpv-bible-translation']' eq 'kjv')"]
  [types field='kjv-translation'][/types]
[/wpv-conditional]

[wpv-conditional if="('[wpv-post-param var='wpv-bible-translation']' eq 'lsg')"]
  [types field='lsg-translation'][/types]
[/wpv-conditional]

I edited functions.php on your server and replaced the old filter with this new code:

add_filter( 'wpv_filter_query_post_process', 'drop_empty_book_chapter_search_query_post', 999, 3 );
function drop_empty_book_chapter_search_query_post( $query, $view_settings, $view_id ) {
    // comma-separated list of View IDs
    $ids = array(16102, 16141);

    if (in_array($view_id, $ids)){
      if (
        ( isset($_GET['wpv-bible-book'])==1 && $_GET['wpv-bible-book'] != '' && $_GET['wpv-bible-book'] != '0' )
          &&
        ( isset($_GET['wpv-bible-chapter'])==1 && $_GET['wpv-bible-chapter'] != '' && $_GET['wpv-bible-chapter'] != '0' )
          &&
        ( isset($_GET['wpv-bible-translation'])==1 && $_GET['wpv-bible-translation'] != ''  && $_GET['wpv-bible-translation'] != '0')
      ) {
      } else {
        $query->found_posts = 0;
        $query->post_count = 0;
      }
    }
    return $query;
}

Please test out the View and let me know if it's behaving more like you expected. Be sure to download the new functions.php file to your local repo.

[Christian Cox]

Sorry for the double post - Please test out the View and let me know if it's behaving more like you expected. Be sure to download the new functions.php file to your local repo.

[AtefR7377]

You are wonderful Christian,
I can't thank you enough.
I will adopt this form into the proper site.

just a few minor questions left:
1- If I have other views that I want to hide the results until the user makes a choice, do I need to create new functions every time, or keep adding more to the array like this:

 &&
        ( isset($_GET['wpv-bible-translation'])==1 && $_GET['wpv-bible-translation'] != ''  && $_GET['wpv-bible-translation'] != '0')
      ) {
      } 

.
2- Is there a way to hide the phrase "No items found"?.
.
3- Is there a guide on how to put the dropdown lists next to each other like the Real Estate Demo site? I explored the demo site, and the documentation but could not find suggestions.
I tried giving the shortcode a "div" tag, then add this css. It made the the dropdown list auto, but i can't get them on the same line:

<div class="gts">[wpv-view name="parametric-search-03"]</div>

.gts .form-control {
	width:auto;
}

the div tag and reduction in width can be seen here:
hidden link
.
4- Is there a way to "pre-select" some items? So if I want the visitor to see Genesis 01 by King James Translation in a certain page, can I add some parameters to the shortcode?

I tried to expand the shortcode to be like this, but it didn't work:

[wpv-view name="parametric-search-03" wpv-bible-book="01-genesis" wpv-bible-chapter="chapter-01" wpv-bible-translation="kjv"]

5- I noticed that you edited the "parametric search 03" view and added 3 query filters. How did you enable this option? I can't find it in the other views called parametric search 01, 02, and 04, although the 4 views are duplicate of eachother.

This achievement you made for me here will make the other ticket (the Bible Study tool much easier to progress).

Sorry for this long list.

thanks heaps.

[Christian Cox]

1- If I have other views that I want to hide the results until the user makes a choice, do I need to create new functions every time
It depends on the filters included in those Views, as well as their URL parameters. This specific code will only work on a form with these three taxonomy inputs and these specific URL parameters. If the other Views contain other URL params or filters, separate functions will be required to handle those specific search criteria. If you need assistance with that, feel free to create another ticket with those details.

2- Is there a way to hide the phrase "No items found"?
Sure, this phrase can be modified or removed from the Loop Output editor of any View or WordPress Archive.

3- Is there a guide on how to put the dropdown lists next to each other like the Real Estate Demo site?
Not exactly, this type of customization is fairly specific to each theme and falls outside the scope of the support we provide here. Toolset comes with the ability to load the Bootstrap framework, which offers some grid-based layout features. Some documentation for Bootstrap can be found here:
https://toolset.com/documentation/user-guides/using-bootstrap-css-elements-content/
https://toolset.com/documentation/user-guides/displaying-content-using-grids/
hidden link

4- Is there a way to "pre-select" some items?
Since your parametric search View uses URL parameters, the only way to preselect filters is to use those URL parameters. Instead of linking to yoursite.com/search-page, your links must include the URL with parameters, like yoursite.com/search-page?wpv-bible-book=1&wpv-bible-chapter=2&wpv-bible-translation=3.

5- I noticed that you edited the "parametric search 03" view and added 3 query filters. How did you enable this option?
When you create a new View, you will be shown a dialog that allows you to select from some different display options. If you select "Full custom display mode" then you will be shown all the option panels in the View editor, and you can manage those panels at any time in the Screen Options tab at the top right corner of the admin screen.

[AtefR7377]

Hi Christian,
thanks a gain for the reply.
questions: 1, 2, 3, 5: ok thanks - closed

As for question 4, I meant: can I pre-define some parameters in the shortcode, to be able to load the search while it is already open at a specific setting?
I did not mean "how to link to the search page".

the application of what I am asking is:
I have WPML, so in the English, If I have a post that is dedicated to "Genesis Chapter 2" I want to be able to show the chapter "preloaded" with the King James Translation when the user visits the "English" version of the post,
While showing the Louis Segond Translation, when the user visits the "French" version of the post.

but also I want to still give them the ability to switch translations if they like.

That's why I wanted to see if I can predefine the parameters from the shortcode, then change the parameters according to the language of the post (From the wp admin backend).

these are the shortcode trials I did so far, but none worked:

[wpv-view name="parametric-search-03" wpv-bible-book="01-genesis" wpv-bible-chapter="chapter-01" wpv-bible-translation="kjv"]
[wpv-view name="parametric-search-03"&wpv-bible-book="01-genesis"&wpv-bible-chapter="chapter-01"&wpv-bible-translation="kjv"]
[wpv-view name="parametric-search-03"&wpv-bible-book=1&wpv-bible-chapter=1&wpv-bible-translation=1]
[wpv-view name="parametric-search-03" [wpv-bible-book="01-genesis"] [wpv-bible-chapter="chapter-01"] [wpv-bible-translation="kjv"]]

So is there a solution here?

thanks.