Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy-load InstantSearch scripts and stylesheets #3691

Merged
merged 2 commits into from
Apr 22, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Lazy-load InstantSearch scripts and stylesheets
iBug committed Jun 19, 2022
commit 51e60726c75c88ace884c228643fc4a6215dad26
123 changes: 71 additions & 52 deletions _includes/search/algolia-search-scripts.html
Original file line number Diff line number Diff line change
@@ -1,62 +1,81 @@
<!-- Including InstantSearch.js library and styling -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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'
]
}
});
// 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/[email protected]/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']
}
});

const hitTemplate = function(hit) {
const url = hit.url;
const title = hit._highlightResult.title.value;
const content = hit._highlightResult.html.value;

const hitTemplate = function(hit) {
const url = hit.url;
const hightlight = hit._highlightResult;
const title = hightlight.title && hightlight.title.value || "";
const content = hightlight.html && hightlight.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" }}',
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>
`;
}
})
);

// Starting the search only when toggle is clicked
$(document).ready(function () {
$(".search__toggle").on("click", function() {
// 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" }}',
}
})
);

if(!search.started) {
search.start();
}
});
document.body.appendChild(script);

loadCSS("https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css");
loadCSS("https://cdn.jsdelivr.net/npm/[email protected]/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>