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.