steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Lazy-load InstantSearch scripts and stylesheets (#3691)

Browse Source 
* Lazy-load InstantSearch scripts and stylesheets

* Replace outdated script parts
This commit is contained in:
iBug
2024-04-22 23:25:09 +08:00
committed by GitHub
parent 7aee05ce0c
commit 75841313de
1 changed files with 70 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
_includes/search/algolia-search-scripts.html
View File

@ -1,19 +1,26 @@
<!-- 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
// Including InstantSearch.js library and styling
const loadSearch = function() {
const loadCSS = function(src) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = src;
link.media = 'all';
document.head.appendChild(link);
};
var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js");
script.addEventListener("load", function() {
// Instantiating 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'
]
restrictSearchableAttributes: ['title', 'content']
}
});
@ -51,12 +58,25 @@ search.addWidget(
})
);
// Starting the search only when toggle is clicked
$(document).ready(function () {
$(".search__toggle").on("click", function() {
if (!search.started) {
search.start();
}
});
document.body.appendChild(script);
loadCSS("https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css");
loadCSS("https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css");
};
// Starting the search only when toggle is clicked
$(document).ready(function() {
var scriptLoaded = false;
$(".search__toggle").on("click", function() {
if (!scriptLoaded) {
loadSearch();
scriptLoaded = true;
}
});
});
</script>