28edd82198
* Search on menu toggle With that change search is performed when requested. Before it was done for each pageview, regardless of the fact if search was used by user or not. * Localize algolia's empty template
61 lines
2 KiB
HTML
61 lines
2 KiB
HTML
<!-- Including InstantSearch.js library and styling -->
|
|
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css">
|
|
<link rel="stylesheet" href="https://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>
|