Redirecting in a Tastic

Tastics not only display information and eye-catching content, they can also perform advanced functionality a redirect is one of them.

However, be careful as there can be side-effects. For example, having multiple Tastic on the same page that use a redirect at the same time can lead to undetermined behavior.

Let's look at how you could implement a redirect in a Tastic with an example.

There are some times when a search can result in zero items returned. You could display some helpful information here, or you could redirect your customers to a page with more meaningful content to the search.

To implement a redirect, we can do this in a Tastic. Of course, the Tastic needs a Schema which will require a stream type of product-list which is the same search stream of the corresponding Master page. Also, your Frontend Manager will need to select a Node to where the redirect will go within the Tastic configuration. 

Below is the Schema you would use for your Redirect Tastic and then upload to Backstage (see this article for more info):

{
  "tasticType": "my-zero-search-results-redirect",
  "name": "Zero search results redirect",
  "schema": [
    {
      "name": "Redirect",
      "fields": [
          {
              "label": "Products",
              "field": "stream",
              "type": "stream",
              "streamType": "product-list"
          },
          {
              "label": "Redirect to Node",
              "field": "redirectNode",
              "required": true,
              "type": "node"
          }
      ]
    }
  ]
}

In the Tastic code itself (see this article for more info), the Stream is then checked for results and if there are zero results returned, the redirect is performed. We use the fact that there is a route for every node registered in the Frontastic Router to simply perform the redirect.

import React, { useEffect } from 'react';
import { compose } from 'redux';
import tastify from 'frontastic-catwalk/src/js/helper/tastify';
import app from 'frontastic-catwalk/src/js/app/app';

const ZeroSearchResultsRedirect = ({ data }) => {
    useEffect(() => {
        if (data.stream.items.length === 0) {
            app.getRouter().push('node_' + data.redirectNode.nodeId);
        }
    }, []);

    return null;
};

export default compose(tastify())(ZeroSearchResultsRedirect);

‹ Back to Article List

Next Article ›

Updating a Tastic

Still need help? Contact Us Contact Us