Adding Components | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will:

• Add a Search Bar and see some results!

Overview

In this section, you will import Search UI components so that you can start searching against the FAQs vertical.

1. Add Search Components

In src/templates/search.tsx, add the following imports from @yext/search-ui-react (in addition to what you already imported from @yext/search-headless-react):

• SearchBar
• StandardCard
• VerticalResults
• SpellCheck
• ResultsCount
• Pagination

  import {
  SearchBar,
  StandardCard,
  VerticalResults,
  SpellCheck,
  ResultsCount,
  Pagination,
  } from "@yext/search-ui-react";

The newly imported components can then be wrapped in the SearchHeadlessProvider.

const Search: Template<TemplateRenderProps> = () => {
  return (
    <SearchHeadlessProvider searcher={searcher}>
      <div className="px-4 py-8">
        <div className="mx-auto flex max-w-5xl flex-col">
          <SearchBar />
          <SpellCheck />
          <ResultsCount />
          <VerticalResults
            CardComponent={StandardCard}
            displayAllOnNoResults={false}
          />
        </div>
        <Pagination />
      </div>
    </SearchHeadlessProvider>
  );
};

Let’s review what you added:

• The SearchBar component includes autocomplete out of the box. When you start typing a query like “what…” or “who”, you will start to see some query suggestions. After your first search, the autocomplete dropdown will show recent searches when you focus on it.
• The SpellCheck component displays a prompt asking “Did you mean [corrected spelling]” with a link to execute a new search based on the corrected query. Search for “jobz” to see this in action.
• VerticalResults will render the search results in a list using the component passed as the CardComponent prop.
• ResultsCount will display the number of results shown on the page.
• The StandardCard component displays the name , description, and c_primaryCta for any result that has data for those fields in their corresponding entity. In a future module, you will learn how to create your own custom card component to display more entity data.
• Pagination will allow you to click through pages of results.

Note

For the built-in FAQ entity type, the Question field you see in the Edit Entity screen is returned as name by the API.

2. Run Your Application Locally

Run your application with npm run dev! Click on the search page. Try running a few queries like “jobs” and “delivery”.

If you want to confirm what your code should look like at this point, take a look at the module-1 branch in the pages-starter-search-ui-react repo .