Frontastic for developers

We remove the complexity when building eCommerce websites in a headless world.

Documentation    

Redirecting in a Tastic

📘

This is an article for advanced users of Frontastic.

Tastics not only display information and eye-catching content, but 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 uses 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 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 that 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 the Frontastic Editor (see the Creating a Tastic in the Frontastic Editor 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 the Tastics article or 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);

Updated about a month ago


Redirecting in a Tastic


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.