Redirects in Vue InstantSearch

Redirects can enhance the users’ search experience. For example:

• Searching for “help” redirects users to a support page
• Searching for a category, such as, “TV” redirects users to a category page
• Searching for a specific product or brand redirects users to a seasonal promotional page for it
• Searching for specific keywords related to an ongoing event, such as, “masks”, redirects users to a more specific landing page

This guide explains how to add redirects to InstantSearch through Rules and using custom data.

Configure a rule

To set up a rule that returns custom data whenever the query matches specific keywords, see Create a rule for returning custom data.

Configure the rule custom data widget

After setting up a rule that returns the custom redirect data, you can use the ais-query-rule-custom-data widget to update the page location when userData contains a redirect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <ais-query-rule-custom-data :transform-items="transformItems" />
</template>

<script>
export default {
  methods: {
    transformItems(items) {
      const match = items.find(data => Boolean(data.redirect));
      if (match && match.redirect) {
        window.location.href = match.redirect;
      }
      return [];
    },
  },
};
</script>

Offer a suggested redirect rather than a hard redirect

The preceding is an example of a “hard redirect”, which forces users to a specific URL. This works in most situations, but sometimes you might want to suggest a redirect URL rather than force it onto them.

To do this, create the rule similarly but distinguish between “hard” and “suggested” redirects by ensuring the returned data is a JSON object. The object’s properties are:

• name (used to display the link)
• URL
• force (true for a hard redirect, false for a suggested redirect).

1
2
3
4
5
6
7
  { 
    "redirect": {
      "name": "help",
      "url": "https://www.algolia.com/support",
      "force": true
    }
  }

With this change applied, the ais-query-rule-custom-data widget that had been previously defined needs updating to decide what happens to a user based upon the returned data.

To do this, the redirect check (within transformItems) needs updating to decide whether to force the redirect onto the user or not. The default template also needs setting to display a message to the user with the specific redirect URL.

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
  search.addWidgets([
  instantsearch.widgets.queryRuleCustomData({
    container: '#queryRuleCustomData', 
    templates: {
-      default: '',
+      default({ items }, { html }) {
+        const customData = items.find(data => Boolean(data.redirect));
+
+        if (!customData) {
+          return null;
+        }
+
+        return html`
+          <div>
+            <a href="${customData.redirect.url}">
+              Click to view more on: '${customData.redirect.name}'
+            </a>
+          </div>
+       `;
+     },  
    },
    transformItems(items) {
      const match = items.find(data => Boolean(data.redirect));
-      if (match && match.redirect) {
+      if (match && match.redirect && match.redirect.force) {
        window.location.href = match.redirect;
+       return [];
      }

-      return [];
+      return items;
    },
  })
]);