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 Master 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. Please note, we're assuming that you already have a working product listing page Tastic available, as well as a (Header)-Tastic to hold the search form.

The search field

Firstly, you'll need a search field. If you're using our theme template, 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 as. 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 From Example MobileSearch Form Example 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 Editor.

The search results page

The basics for a search result page are already predefined under Master Pages, including a search filter stream.

Master App Search Page GIF

The only thing missing is a page with an added Product Listing Tastic, that knows how to handle the preconfigured stream.

To do this, create a new page and set it to active:

Creating new search master page GIF

Next, add the product listing Tastic. In the Tastic configuration under Stream Selection, select the predefined search stream. Then save and publish changes.

Selecting Search Tastic Stream GIF

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

Live Search Example GIF


‹Back

Tips

Still need help? Contact Us Contact Us