Add Query Suggestions to Autocomplete
The default Shopify templates include autocomplete search out-of-the-box. This lets users search across selected indexes for products, collections, blogs, or pages.
To add Query Suggestions to the autocomplete search, add a Query Suggestions index as an extra source.
Create the templates
To display the suggestions from the Query Suggestions index, you need to add new templates. You need to add these templates in the Snippets section of the theme’s template files.
First, create a new template for the Query Suggestions empty results file: algolia_autocomplete_query_suggestion_empty.hogan.liquid:
1
2
3
4
5
<div class="aa-query_suggestion-empty">
<div class="aa-no-result">
No suggestions found
</div>
</div>
Next, create a new template for the Query Suggestions results file: algolia_autocomplete_query_suggestion.hogan.liquid:
1
2
3
4
5
<div class="aa-query_suggestion">
<div class="aa-text">
<span class="aa-title">[[& _highlightResult.title.value ]]</span>
</div>
</div>
Add new templates to the theme
To include the new templates in the theme, edit the file theme.liquid and add the new templates to the header:
1
2
3
4
5
-<script type="text/template" id="template_algolia_instant_search_no_result">{% include 'algolia_instant_search_no_result.hogan' %}</script>
+<script type="text/template" id="template_algolia_instant_search_no_result">{% include 'algolia_instant_search_no_result.hogan' %}</script>
+ <script type="text/template" id="template_algolia_autocomplete_query_suggestion">{% include 'algolia_autocomplete_query_suggestion.hogan' %}</script>
+ <script type="text/template" id="template_algolia_autocomplete_query_suggestion_empty">{% include 'algolia_autocomplete_query_suggestion_empty.hogan' %}</script>
{{ 'algolia_dependency_font-awesome-4-4-0.min.css' | asset_url | stylesheet_tag }}
Edit autocomplete template
Update the autocomplete template to include the Query Suggestions search results. Edit the file algolia_autocomplete.hogan.liquid within the Snippets section and add the Query Suggestions element where you want to show them within the autocomplete:
1
2
3
4
5
6
+ <div class="aa-products_query_suggestions">
+ <div class="aa-products_query_suggestions-header">
+ Query Suggestion
+ </div>
+ <div class="aa-dataset-products_query_suggestions"></div>
+ </div>
Edit JavaScript files
After adding all theme files for the Query Suggestions, you need to add the new source needs to the configuration. Update the algolia_autocomplete.js.liquid file in the Assets section to add the Query Suggestions source to the config object:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
products: {
distinct: algolia.config.show_products,
hitsPerPage: algolia.config.products_autocomplete_hits_per_page,
index: index('products'),
templates: {
empty: algolia.compileTemplate('autocomplete_products_empty'),
footer: algolia.compileTemplate('autocomplete_footer'),
hit: algolia.compileTemplate('autocomplete_product'),
- }
+ },
+ products_query_suggestions: {
+ enabled: true, // bool value
+ hitsPerPage: 2, // number of hits to display
+ index: index('products_query_suggestions'), // the index must have the same prefix of the shop
+ templates: {
+ empty: algolia.compileTemplate('autocomplete_query_suggestion_empty'), // query suggestion empty template
+ hit: algolia.compileTemplate('autocomplete_query_suggestion'), // query suggestion hit template
+ },
+ },
};
This code assumes the Query Suggestion index name to have this format: [INDEX_PREFIX]products_query_suggestions.
Within the same file, change the autocomplete initializing code block to add the Query Suggestions source:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var autocompleteInstance = autocomplete(
algolia.config.input_selector + ', .algolia-shopify-autocomplete',
{
debug: algolia.config.autocomplete_debug,
hint: false,
appendTo: 'body',
templates: {
dropdownMenu: algolia.render(algolia.compileTemplate('autocomplete'), {
storeName: algolia.storeName,
with: {
articles: algolia.config.index_articles,
collections: algolia.config.index_collections,
pages: algolia.config.index_pages,
footer: algolia.config.instant_search_enabled,
poweredBy: algolia.config.powered_by,
+ query_suggestions: true,
products: algolia.config.index_products
},
}),
empty: '<div></div>',
},
},
[
algolia.config.index_collections &&
autocompleteSection(config, 'collections'),
algolia.config.index_articles && autocompleteSection(config, 'articles'),
algolia.config.index_pages && autocompleteSection(config, 'pages'),
+ autocompleteSection(config, 'products_query_suggestions'),
algolia.config.index_products && autocompleteSection(config, 'products'),
].filter(function(x) {
return Boolean(x);
})
);
Also within the same file, update the autocompleteInstance ‘autocomplete:selected’ event listener. Define the action that runs when a user clicks on the query suggestion:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
autocompleteInstance.on('autocomplete:selected', function(obj, datum, name) {
- if (algolia.config.analytics_enabled) {
+ if (algolia.config.analytics_enabled && name !== 'products_query_suggestions_manual') {
var clickData = {
index: datum._index,
eventName: 'click',
queryID: datum._queryID,
objectIDs: [datum.objectID],
positions: [datum._position],
};
// Send the click event
aa.clickedObjectIDsAfterSearch(clickData);
/**
* Uncomment the following function call to start storing data in
* local storage for conversion tracking
*/
// algolia.saveForConversionTracking(clickData);
}
switch (name) {
case 'products': {
var addVariantId =
!algolia.config.show_products && datum.objectID !== datum.id;
window.location.href =
'/' +
name +
'/' +
datum.handle +
(addVariantId ? '?variant=' + datum.objectID : '');
break;
}
case 'articles':
window.location.href =
'/blogs/' + datum.blog.handle + '/' + datum.handle;
break;
+ case 'products_query_suggestions':
+ window.location.href = '/search?q=' + datum.query
+ break;
default:
window.location.href = '/' + name + '/' + datum.handle;
}
});
Now, when a user performs a search in the autocomplete the Query Suggestions are shown along with the other search results.
