<!– Including InstantSearch.js library and styling –> <script src=“cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js”>> <link rel=“stylesheet” href=“cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css”> <link rel=“stylesheet” href=“cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css”>
<script> // Instanciating InstantSearch.js with Algolia credentials const search = instantsearch({
appId: '{{ site.algolia.application_id }}', apiKey: '{{ site.algolia.search_only_api_key }}', indexName: '{{ site.algolia.index_name }}', searchParameters: { restrictSearchableAttributes: [ 'title', 'content' ] }
});
const hitTemplate = function(hit) {
const url = hit.url; const title = hit._highlightResult.title.value; const content = hit._highlightResult.html.value; return ` <div class="list__item"> <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork"> <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2> <div class="archive__item-excerpt" itemprop="description">${content}</div> </article> </div> `;
}
// Adding searchbar and results widgets search.addWidget(
instantsearch.widgets.searchBox({ container: '.search-searchbar', {% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %} placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}' })
); search.addWidget(
instantsearch.widgets.hits({ container: '.search-hits', templates: { item: hitTemplate, empty: '{{ site.data.ui-text[site.locale].search_algolia_no_results | default: "No results" }}', } })
);
// Starting the search only when toggle is clicked $(document).ready(function () {
$(".search__toggle").on("click", function() { if(!search.started) { search.start(); } });
}); </script>