Adding Components | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will:

  • Add a Search Bar and see some results!


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):

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 />
        <Pagination />

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.
light bulb
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 .

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 4

    When you search for “jobs”, how many results are there?

    Error Success Question 2 of 4

    When you search for “delivery”, one result should appear. What does the CTA say?

    Error Success Question 3 of 4

    True or False - You have to pass additional configuration props to the `SearchBar` component to enable autocomplete.

    Error Success Question 4 of 4

    Which of the following fields are displayed by the StandardCard component?

    Wahoo - you did it! 🙌

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect