Basics
With the advanced widget you can add your own javascript templates to generate HTML and override some functionality to completely integrate the search in your site.
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>
<!-- 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 type="text/javascript">
(function () {
var snloadf = function() {
if (typeof window.__snld != "undefined") { return; }
window.__snld = 1;
var s = document.getElementsByTagName("script")[0];
var b = document.createElement("script");
b.type = "text/javascript";
b.async = true;
b.id = "snscript";
b.src = "//cdn.searchine.net/scripts/searchine.min.js";
s.parentNode.insertBefore(b, s);
};
setTimeout(snloadf, 0);
})();
</script>
Options
You can use the same options as for the embedded variant:
- labels
- autofocus
And above that are more options available like:
pageParam: 'p',
scrollCorrection: 100,
numberOfPages: 10,
loader: '.js-loader',
searchParam: 'q',
searchParamInQuerystring: false,
Read more about all these options
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.
The templates need to have certain CSS classes with the js- prefix on them to work.
You can use those js-prefixes specified in the examples and if needed change the prefixes in the configuration 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 is the same.
Example snippet:
<script id="searchine-searchform" type="text/x-handlebars-template">
{{#unless is404widget}}
<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">
<svg class="icon search-icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20"
viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92
c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17
s-17-7.626-17-17S14.61,6,23.984,6z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{{/unless}}
<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">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="12px" height="12px" viewBox="0 0 533.333 533.333" style="enable-background:new 0 0 533.333 533.333;"
xml:space="preserve">
<path d="M466.667,233.333H475c13.751,0,25-11.25,25-25V125c0-13.75-11.249-25-25-25h-8.333V0H400v100h-8.333
c-13.75,0-25,11.25-25,25v83.333c0,13.75,11.25,25,25,25H400v300h66.667V233.333z M400,133.333h66.667V200H400V133.333z
M308.334,433.333c13.75,0,25-11.249,25-25V325c0-13.75-11.25-25-25-25H300V0h-66.667v300H225c-13.75,0-25,11.25-25,25v83.333
c0,13.751,11.25,25,25,25h8.333v100H300v-100H308.334z M233.333,333.333H300V400h-66.667V333.333z M141.667,233.333
c13.75,0,25-11.25,25-25V125c0-13.75-11.25-25-25-25h-8.333V0H66.667v100h-8.333c-13.75,0-25,11.25-25,25v83.333
c0,13.75,11.25,25,25,25h8.333v300h66.667v-300H141.667z M66.667,133.333h66.667V200H66.667V133.333z" />
</svg>
{{ refineresultslabel }}
</h5>
</div>
<span class="collapse-icon">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="9px" height="9px" viewBox="0 0 292.362 292.362" style="enable-background:new 0 0 292.362 292.362;"
xml:space="preserve">
<g>
<path d="M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424
C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428
s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z" />
</g>
</svg>
</span>
</div>
<form class="searchFacets js-facets-collection js-facets-body collapsed-body">
</form>
</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>
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.