Searching with Frontastic

Searching a product catalog in Frontastic is a pretty straightforward concept: All you need to do is navigate the Search-Route and include the search phrase as a parameter. The Search-Route is already predefined in the dynamic pages and preconfigured with the appropriate search API that populates the stream and, ultimately, the search results page.

Let's look at how it can be implemented. Note: we're assuming that you already have a working product listing page Frontastic component available, as well as a (Header)-Frontastic component to hold the search form.

The search field

Firstly, you'll need a search field. If you're using our starter components, you'll notice that we only have a search icon that could serve as a toggle button to the actual input field. The problem with that though is that the input field appears in different places on desktop and mobile. On desktop, it appears on the icon bar as a replacement for the search icon. On mobile, it appears underneath the top navigation bar. As it would be more complicated to change this, so we'll add it in as it is. We'll also add a boolean flag to hide or show the search field and the icon and an event handler prop. So our code would look like this:

// patterns/organisms/MainMenu/Widgets.js

import SearchForm from './SearchForm'

const Widgets = ({
    intl,
    variant = '',
    cartItemsCount,
    goToCartPage,
    wishListLineItemsCount,
    goToWishlistPage,
    goToProfilePage,
    onSearchToggle,
    showSearch = false,
}) => {
    return (
        <div
            className={classnames({
                'flex justify-end text-2xl items-center': true,
                [variant]: true,
            })}
        >
            {showSearch ? (
                <SearchForm inputClassName='text-base' onCancelSearch={onSearchToggle} />
            ) : (
                <IconButton
                    name={intl.formatMessage({ id: 'header.search' })}
                    variant='outline-none focus:outline-none'
                    icon={<SearchIcon />}
                    onClick={onSearchToggle}
                />
            )}

While we're at it, we'll also rename the component from widgets to IconNavigation because it shows what it is and does.

As for mobile, clicking the icon toggles the search form outside of the IconNavigation, so we need to lift the state one level higher.

In patterns/organisms/MainMenu/Desktop/index.jsx and patterns/organisms/MainMenu/Mobile/index.jsx add:

const [isSearch, setIsSearch] = useState(false)

and the toggle function:

const handleSearchToggle = () => setIsSearch(!isSearch)

Next, we'll need a search form ( patterns/organisms/MainMenu/SearchForm.tsx), one that has a fixed width on desktop and a flexible width on mobile:

Search form mobile	Search form desktop

So we'll add this excerpt to the code:

<form onSubmit={handleSubmit}>
    <Input placeholder='Search' className='form-input' value={query} onChange={handleSearchChange} autoFocus />
</form>

The form is very simple (for now). On submitting it pushes to the Frontastic search route with the search term attached:

app.getRouter().push('Frontastic.Frontend.Master.Search.search', { phrase: phrase })

The page doesn't exist yet, so we'll need to create it in the Frontastic studio.

The search results page

The basics for a search result page are already predefined under dynamic pages, including a search filter data source.

The only thing missing is a page with an added Product Listing Frontastic component, that knows how to handle the preconfigured data source.

To do this, create a new page version

Next, add the Product Listing Frontastic component. In the component settings under Data source, select the predefined search stream. Then Save your changes.

You'll now need to make your page live by clicking the more icon (3 vertical dots), then select Make default.

And that's it, that's how you add a product search with a results page with Frontastic.