Zoom now provides advanced template options so you can customize the appearance of your search results outside of what is possible with CSS, and without having to modify the search script. This allows you to customize the location of headings, summary information, search boxes, and more. Simply by placing additional tags in your template file.
The default <!--ZOOMSEARCH--> tag will provide the complete standard results layout. This is recommended for users who are happy with the default layout, or who are new to Zoom customizations.

|
Note: The <!--ZOOMSEARCH--> tag and all of the following template tags are case sensitive. This means you must specify them in uppercase as shown here.
|
For more advanced users, you can now specify individual elements as necessary and remove the <!--ZOOMSEARCH--> tag from use. Items can be repeated multiple times or not shown at all.
For example, one commonly requested feature in the past was to be able to reproduce the "Results Pages: 1 2 3 Next >>" links at the top of the results. You can do this by simply adding a <!--ZOOM_SHOW_PAGENUMBERS--> tag before your results.
Here is a listing of the advanced template tag options available:
Template tags in "search_template.html"
|
Description
|
<!--ZOOM_SHOW_HEADING-->
|
This is the search result heading, e.g. "Search results for: cat food"
|
<!--ZOOM_SHOW_SUMMARY-->
|
This is the summary text at the top of the results, e.g. "x results found"
|
<!--ZOOM_SHOW_CATSUMMARY-->
|
This is only available when Categories are enabled. It is a breakdown of the categories that your search results belong to. E.g. "Refine your search by category: News (3) Knowledge base (2) PDF files (10)"
|
<!--ZOOM_SHOW_SUGGESTION-->
|
This is any spelling suggestion, or tip to search again when there are few results.
|
<!--ZOOM_SHOW_PAGESCOUNT-->
|
This is the number of pages of results found. E.g. "x pages of results."
|
<!--ZOOM_SHOW_SORTING-->
|
This is the option to switch between "Sort by relevance" and "Sort by date" when sorting by date is enabled in the Indexer.
|
<!--ZOOM_SHOW_SEARCHTIME-->
|
This is the time taken to perform the search. E.g. "Search took 0.2 seconds"
|
<!--ZOOM_SHOW_RECOMMENDED-->
|
This is the recommended links.
|
<!--ZOOM_SHOW_PAGENUMBERS-->
|
These are the links to the different pages of results,
e.g. "Results Pages: 1 2 3 Next >>"
|
<!--ZOOM_SHOW_RESULTS-->
|
This show the actual search results.
|
<!--ZOOM_SHOW_SEARCHFORM-->
|
This produces the default search form. You do not need to use the <!--ZOOM_SHOW_FORMSTART--> and <!--ZOOM_SHOW_FORMEND--> tag for this. The single tag itself will create the entire search form for you.
|
<!--ZOOM_SHOW_FORMSTART-->
|
This specifies the start of a search form.
|
<!--ZOOM_SHOW_FORMEND-->
|
This specifies the end of a search form.
|
<!--ZOOM_SHOW_SEARCHBOX-->
<!--ZOOM_SHOW_SEARCHBUTTON-->
<!--ZOOM_SHOW_RESULTSPERPAGE-->
<!--ZOOM_SHOW_MATCHOPTIONS-->
<!--ZOOM_SHOW_CATEGORIES-->
<!--ZOOM_SHOW_CUSTOMMETAOPTIONS-->
|
These should be pretty self explanatory. They are the different elements that make up the search form. They must be within the <!--ZOOM_SHOW_FORMSTART--> and <!--ZOOM_SHOW_FORMEND--> tags mentioned above. Use these tags if you want to create a custom search form that is different to the default generated by
<!--ZOOM_SHOW_SEARCH_FORM-->
|
Advanced template options in JavaScript
The JavaScript version has a very different syntax for the template options, due in nature to the way the JavaScript language works. However, it is possible to configure the layout of most elements in a similar fashion to the other versions as described above.
By default, your "search.html" page will contain the following line to indicate where you want your search form, and results to appear within your page.
<script language="JavaScript">ZoomSearch();</script>
However, if you wish to specify the individual elements, you will need to remove this line, and insert each element specifically.
To do this, first you must insert the following line before any other "Zoom" function call:
<script language="JavaScript">ZoomInitSearch();</script>
Then after this, you can specify any of the following tags to show the individual elements.
For a search form, you will need to begin and end it like this:
<script language="JavaScript">ZoomShowFormStart();</script>
...
<script language="JavaScript">ZoomShowSearchBox();</script>
<script language="JavaScript">ZoomShowSearchButton();</script>
...
<script language="JavaScript">ZoomShowFormEnd();</script>
Only form elements need to be enclosed in the ZoomShowFormStart and ZoomShowFormEnd calls. Everything else only needs to be after the ZoomInitSearch() line.
The full list of available "tags" are below:
Template tags in "search.html"
for the JavaScript version
|
Description
|
<script language="JavaScript">ZoomShowHeading();</script>
|
This is the search result heading, e.g. "Search results for: cat food"
|
<script language="JavaScript">ZoomShowSummary();</script>
|
This is the summary text at the top of the results, e.g. "x results found"
|
<script language="JavaScript">ZoomShowCatSummary();</script>
|
This is only available when Categories are enabled. It is a breakdown of the categories that your search results belong to. E.g. "Refine your search by category: News (3) Knowledge base (2) PDF files (10)"
|
<script language="JavaScript">ZoomShowPagesCount();</script>
|
This is the number of pages of results found. E.g. "x pages of results."
|
<script language="JavaScript">ZoomShowSort();</script>
|
This is the option to switch between "Sort by relevance" and "Sort by date" when sorting by date is enabled in the Indexer.
|
<script language="JavaScript">ZoomShowSearchTime();</script>
|
This is the time taken to perform the search. E.g. "Search took 0.2 seconds"
|
<script language="JavaScript">ZoomShowRecommended();</script>
|
This is the recommended links.
|
<script language="JavaScript">ZoomShowPageNumbers();</script>
|
These are the links to the different pages of results,
e.g. "Results Pages: 1 2 3 Next >>"
|
<script language="JavaScript">ZoomShowResults();</script>
|
This show the actual search results.
|
<script language="JavaScript">ZoomShowSearchForm();</script>
|
This produces the default search form. You do not need to use the ZoomShowFormStart() and ZoomShowFormEnd() tag for this. The single tag itself will create the entire search form for you.
|
<script language="JavaScript">ZoomShowFormStart();</script>
|
This specifies the start of a search form.
|
<script language="JavaScript">ZoomShowFormEnd();</script>
|
This specifies the end of a search form.
|
ZoomShowSearchBox();
ZoomShowSearchButton();
ZoomShowResultsPerPage();
ZoomShowMatchOptions();
ZoomShowCategories();
ZoomShowMetaFields();
|
These should be pretty self explanatory. They are the different elements that make up the search form. They must be within the ZoomShowFormStart() and ZoomShowFormEnd() tags mentioned above. Use these tags if you want to create a custom search form that is different to the default generated by ZoomShowSearchForm().
|
|