Please note that this Support article contains frontend customizations via modifying the legacy Algolia template files, which are deprecated and unsupported by the Algolia Support Team.
For more information, please review this Support article - "Why is modifying Algolia template files for customizations not supported?"
If you are using our Instant Search library by setting up a custom IS implementation, the process of setting up redirects remains the same for Shopify users.
First, you create a rule that returns a redirect link when the query rule is triggered (in this case by a query containing the term "redirect"):
You can then add your custom redirect widget to your JS file:
instantsearch.widgets.queryRuleCustomData({
container: '#redirect',
templates: {
default: '',
},
transformItems(items) {
const match = items.find(data => Boolean(data.redirect));
if (match && match.redirect) {
window.location.href = match.redirect;
}
return [];
},
}),
Last, you load this widget in your HTML template:
<div id="redirect"></div>
When we trigger the rule, the user will now be redirected to the link that we previously specified in our query rule.
Here is a working Codesandbox example: https://codesandbox.io/s/custom-redirect-3megs?file=/index.html:1204-1229
If you are using the standard Shopify plugin widgets, here are the detailed steps you should follow after creating the rule in the Algolia Dashboard:
1. Import the non-bundled queryRuleCustomData widget as detailed in this guide
2. Add the widget to the algolia_instant_search.js.liquid file
instantsearch.widgets.queryRuleCustomData({
container: '#redirect',
templates: {
default: '',
},
transformItems(items) {
const match = items.find(data => Boolean(data.redirect));
if (match && match.redirect) {
window.location.href = match.redirect;
}
return [];
},
}),
3. Add the corresponding div to the algolia_instant_search.hogan.liquid file:
<div id="redirect"></div>
Last reviewed 06-05-22.