Lazy-load InstantSearch scripts and stylesheets (#3691)

* 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

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> <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({ const search = instantsearch({
appId: '{{ site.algolia.application_id }}', appId: '{{ site.algolia.application_id }}',
apiKey: '{{ site.algolia.search_only_api_key }}', apiKey: '{{ site.algolia.search_only_api_key }}',
indexName: '{{ site.algolia.index_name }}', indexName: '{{ site.algolia.index_name }}',
searchParameters: { searchParameters: {
restrictSearchableAttributes: [ restrictSearchableAttributes: ['title', 'content']
'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) { if (!search.started) {
search.start(); 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> </script>