Advanced Widgets templates

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