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 pagesdynamic pages - 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 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 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. 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 componentsstarter components - Frontastic components that come with each Frontastic project can be copied into your own project to use. Known in code as `boost theme`., 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:

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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

The search results page

The basics for a search result page are already predefined under dynamic pagesdynamic pages - 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 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.