Advanced widgets

Setting up

The basic setup is more about the same as the embedded widget variant.

Example:

<!--- insert the container div to your page -->
<div id="searchinenet"></div>

<!-- if no jquery is loaded yet, please include jquery library --> 
<script src="//cdn-test.searchine.net/scripts/jquery/jquery-3.2.1.min.js"></script>

<!-- add this script to your page -->
<script type="text/javascript">
window._sn = window._sn || [];
window._sn.config = {
	engineid: '--insert-your-engineid--'
};

window._sn.searchpages = [];
window._sn.searchpages.push({
	engineid:  '--insert-your-engineid--',
	container: '#searchinenet',
});        
</script>

<script id="snscript" async defer src="//cdn-test.searchine.net/scripts/dist/searchine.loader.min.js"></script>

Options

You can use the same options as for the embedded variant:

• labels
• autofocus

There are more options available like: (with defaults)

pageParam: 'p',
facetParam: 'fc',
scrollCorrection: 100,
numberOfPages: 10,
loader: '.js-loader', 
searchParam: 'q',
searchParamInQuerystring: false, 

Read more about these options in the our docs

Templates

You can override one or multiple templates by providing snippets of javascript.

The main template is defined as "searchine-searchform" that has 'placeholders' for the other templates to be loaded into.
You can use the js-prefixes and if needed change the prefixes them self to everything you like and pass the prefixes in the options you can find here

You can place the templates on the page anywhere as long as the elements id keeps the same.

Example snippet:

<script id="searchine-searchform" type="text/x-handlebars-template">
<div class="searchform js-search-form">
	<input type="text" class="js-search-input" name="{{searchfieldname}}">

	<div class="preloader-wrapper small active js-loader">
		<div class="spinner-layer spinner-green-only">
			<div class="circle-clipper left">
				<div class="circle"></div>
			</div><div class="gap-patch">
				<div class="circle"></div>
			</div><div class="circle-clipper right">
				<div class="circle"></div>
			</div>
		</div>
	</div>

	<button class="js-search-button searchButton">{{searchbuttontext}}</button>
</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="pagination js-pager-collection"></div> </div>
</div>
</script>

Additional templates provided will be picked up automatically. 

All templates that can be overridden / provided can be found here.

Please be aware that by overriding templates new and/or changed functionality might not work as expected.