Maybe this can help. You might need to change a few parameters and other bits but it’s a start.
Let’s say this is your document tree with doc id’s in brackets.
-Books (14)
--Book1 (16)
--book2 (17)
--Book3 (18)
--...
-Search results (15)
I assume you have set up TV’s for Genre, Author, Reviewer and Age and applied values to your docs.
First, you need to create your tvEditor call. You’ll need a separate call for each of your drop-downs. Because you want the search form to appear across multiple pages we’ll put it in a chunk but you could put it directly into the template.
Create a chunk, call it {{searchBuilder}} and put in the following code (an example for Genre):
{{searchBuilder}}
[[tvExplorer? &tveID=`ge` &dittoName=`Ditto` &dittoSnippetParameters=`tpl:resultsTpl|parents:14|depth:0|display:all|sortBy:pagetitle|sortDir:ASC` &formTPL=`genreSearchTpl`]]
[+ge_tve.searchForm+]
&tveID=`ge` - because you’ll have multiple tvEditor calls, each one will require a unique ID.
&dittoSnippetParameters - these are the parameters you are passing to Ditto to generate the results. To test if the Ditto part is working, you can place a normal Ditto call with those parameters in your chunk. So this example would be:
[!Ditto? &parents=`14` &tpl=`resultsTpl` &depth=`0` &display=`all` &sortBy=`pagetitle` &sortDir=`ASC`!]
tpl:resultsTpl - this is the template chunk used by Ditto to display the results.
&formTPL=`genreSearchTpl` - this is the chunk containing the search form. It appears wherever you put the [+ge_tve.searchForm+] placeholder.
Second, create your Ditto template chunk. This can contain whatever information you want to display:
{{resultsTpl}}
<h4><a href="[~[+id+]~]">[+title+]</a></h4>
<p>[+bookimg+][+introtext+]</p>
Third, create your search form chunk:
{{genreSearchTpl}}
<form id="ge-form" action="search-results.html" method="get" >
<fieldset id="ge-fieldset">
[+tve.genre:filter->9:label->Genre:tvtype->select:blankLabel->Genre+]
</fieldset>
<fieldset id="ge-buttons">
<button type="submit" id="ge-button" name="ge_search" value="search">Search</button>
</fieldset>
</form>
In this example I’ve included a search button. You can insert some javascript to automatically search.
Fourth, insert the results list placeholder in your "search results" page or template. This will get replaced by the output from Ditto.
[+ge_tve.dittoList+]
You can then add a new tvExplorer call into the {{searchBuilder}} chunk for each of your drop-downs, using a unique ID and different &formTPL chunk for each. They can all use the same Ditto template chunk.
