hacks-guide-minimal-mistake.../_includes/search/algolia-search-scripts.html
Marcin Pietraszek 28edd82198
Algolia search update (#2572)
* 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
2020-07-22 15:34:53 -04:00

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>