Redirecting in a Frontastic component

📘

This is an article for advanced users of Frontastic.

Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.. Of course, the component needs a schema that will require a data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. type of product-list which is the same search data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. of the corresponding dynamic pagedynamic page - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master page`.. We can also add a configuration that can select a page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. where the redirect will go to in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

Below is the schema you would use for your redirect Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. and then upload to the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. (see the Creating a Frontastic component in the studio 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 Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. code itself (see the Frontastic component article or more info), the data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. 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 page folder 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);

Did this page help you?