Start Today with your 30-day trial View our plans and pricing.

Advanced Widgets templates

This page describes the templates you can override to enable you to customize the HTML output

The templates you can find on this page are default implementations provided as of june 2018. Changes might occur.

searchine-searchform

Basic example:

<script id="searchine-searchform" type="text/x-handlebars-template">
<div class="js-search-form">
<div class="input-field row">
<div class="col-12">
<div class="input-group">
<input class="c-field input js-search-input" autocomplete="off" spellcheck="false" placeholder="{{searchfieldplaceholder}}" type="text" name="{{searchfieldname}}">
<div class="loader js-loader"></div>
<div class="input-group-append">
<button class="searchButton btn btn-secondary js-search-button">
</button>
</div>
</div>
</div>
</div>
</div>
<div class="js-search-results-container">
<div class="js-facets-container"><div class="js-facets-collection"></div></div>
<div class="js-active-facets-container"><div class="js-active-facets-collection"></div></div>
<div class="js-search-results-collection"></div><div class="js-pager-container"><div class="js-pager-collection"></div></div></div>
</script>

Example with facets switch

<script id="searchine-searchform" type="text/x-handlebars-template">
    <div class="search-header">
        <div class="search-input">
            <div class="searchform js-search-form">
                <div class="input-field">
                    <div class="input-group">
                        <input class="c-field input js-search-input" autocomplete="off" spellcheck="false" placeholder="{{searchfieldplaceholder}}" type="text" name="{{searchfieldname}}">
                        <div class="loader js-loader"></div>
                        <div class="input-group-append">
                            <button class="searchButton btn js-search-button">{{searchbuttontext}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="js-search-results-information"></div>
    <div class="search-body js-search-results-container">
        <div class="js-facets-container search-facets-container">
            <div class="search-facets-collection">
                <div class="facet-toggle js-facet-toggle collapsed">
                    <div>
                        <h5 class="no-margin">
                            {{ refineresultslabel }}
                        </h5>
                    </div>
                    <span class="collapse-icon">
                     </span>
                </div>
                <div class="searchFacets js-facets-collection js-facets-body collapsed-body">
                </div>
            </div>
        </div>
        <div class="search-results-container">
            <div class="search-results-header js-active-facets-container">
                <div class="list--inline selectedFacets js-active-facets-collection"> </div>
            </div>

            <div class="js-search-results-collection">

            </div>
            <div class="js-pager-container">
                <ul class="pagination js-pager-collection"></ul>
            </div>

        </div>
    </div>
</script>

Template options:

{{searchfieldplaceholder}} - Provide a placeholder text in the search field
{{searchfieldname}} - The field name
{{searchbuttontext}} - The searchbutton text (when needed)
{{refineresultslabel}}  - Text that will be displayed in mobile mode

 

searchine-results-information
<script id="searchine-results-information" type="text/x-handlebars-template">
<span class="resultStats">{{showresultslabel}}</span>
</script>

Template options:

{{showresultslabel}} - The search results text (View labels)
{{itemsPerPage}} - Items per page
{{searchText}} - The searched keywords
{{numberOfResults}} - Total number of results
{{pageIndex}} - The page

 

searchine-facetgroup
<script id="searchine-facetgroup" type="text/x-handlebars-template">
<div class="facetgroup js-facets-group">
<div class="title">{{Title}}</div>
<ul class="facets">
{{#each Facets}}
<li class="js-facets-item">
<input type="checkbox" {{ischecked this}} data-facetid="{{Id}}" id="facet_{{../GroupId}}_{{Id}}" />
<label for="facet_{{../GroupId}}_{{Id}}">{{Title}}</label><span class="badge">{{FacetValue}}</span>
</li>
{{/each}}
</ul>
</div>
</script>

Template options:

{{Title}} - Facet group title

Inside each facets ({{#each Facets}})
{{ischecked this}} -  Will render checked="checked" when item is active
{{Id}} - The facet ID
{{../GroupId}} - The facet group ID
{{Title}} - The facet title
{{FacetValue}} - The number of results with this facet

 

searchine-activefacet
<script id="searchine-activefacet" type="text/x-handlebars-template">
<a data-facetid="{{Id}}" class="js-active-facets-item"><span>{{Title}}</span></a>
</script>

Template options:

{{Id}} - The ID of the facet
{{Title}} - The title of the facet

 

searchine-result
<script id="searchine-result" type="text/x-handlebars-template">
<div class="js-search-item"><h2>{{{Title}}}</h2><p>{{{Description}}}</p><p><a href="{{Uri}}">{{Uri}}</a></p></div>
</script>

Template options:

{{{Title}}} - The title of the search result with highlighting 
{{{Description}}} - The introduction / description of the search result with highlighting
{{{Uri}}} - The url to the search result

 

searchine-prevpage
<script id="searchine-prevpage" type="text/x-handlebars-template">
<li class="{{disabled this}}"><a data-pageid="{{Page}}">&lt;</a></li>
</script>

Template options:

{{disabled this}} - If item is disabled then it will add an extra class disabled
{{Page}} - The index of the page

 

searchine-activepage
<script id="searchine-activepage" type="text/x-handlebars-template">
<li class="active"><a data-pageid="{{Page}}">{{Page}}</a></li>
</script>

Template options:

{{Page}} - The index of the page

 

searchine-page
<script id="searchine-page" type="text/x-handlebars-template">
<li><a data-pageid="{{Page}}">{{Page}}</a></li>
</script>

Template options:

{{Page}} - The index of the page

 

searchine-nextpage
<script id="searchine-nextpage" type="text/x-handlebars-template">
<li class="{{disabled this}}"><a data-pageid="{{Page}}">&gt;</a></li>
</script>

Template options:

{{disabled this}} - If item is disabled then it will add an extra class disabled
{{Page}} - The index of the page

 

Options
Methods / Events