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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 70 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,23 +1,30 @@
<!-- 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 search = instantsearch({ 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 }}', 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'
]
} }
}); });
const hitTemplate = function(hit) { const hitTemplate = function(hit) {
const url = hit.url; const url = hit.url;
const hightlight = hit._highlightResult; const hightlight = hit._highlightResult;
const title = hightlight.title && hightlight.title.value || ""; const title = hightlight.title && hightlight.title.value || "";
@ -31,17 +38,17 @@ const hitTemplate = function(hit) {
</article> </article>
</div> </div>
`; `;
} }
// Adding searchbar and results widgets // Adding searchbar and results widgets
search.addWidget( search.addWidget(
instantsearch.widgets.searchBox({ instantsearch.widgets.searchBox({
container: '.search-searchbar', container: '.search-searchbar',
{% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %} {% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %}
placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}' placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}'
}) })
); );
search.addWidget( search.addWidget(
instantsearch.widgets.hits({ instantsearch.widgets.hits({
container: '.search-hits', container: '.search-hits',
templates: { templates: {
@ -49,13 +56,26 @@ search.addWidget(
empty: '{{ site.data.ui-text[site.locale].search_algolia_no_results | default: "No results" }}', empty: '{{ site.data.ui-text[site.locale].search_algolia_no_results | default: "No results" }}',
} }
}) })
); );
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 // Starting the search only when toggle is clicked
$(document).ready(function () { $(document).ready(function() {
var scriptLoaded = false;
$(".search__toggle").on("click", function() { $(".search__toggle").on("click", function() {
if(!search.started) { if (!scriptLoaded) {
search.start(); loadSearch();
scriptLoaded = true;
} }
}); });
}); });