Adding Facets | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will:

  • Add the Facets component to filter on employment type, job department, and salary

Overview

In search, facets are additional filters that can be applied after an initial search is made to further narrow down results. We want potential job candidates to be able to further refine their results after searching based on things such as salary and whether the job is part or full time.

In this unit, you’re going to add clickable facets so that users can easily narrow down search results.

1. Add Facets

In this unit, you’re going to enable the user to filter down their search results by Employment Type, Job Department, and Salary using facets.

In src/templates/search.tsx, import Facets, StandardFacet, and NumericalFacet from @yext/search-ui-react.

// src/templates/search.tsx

// other imports...

import {
  SearchBar,
  VerticalResults,
  SpellCheck,
  ResultsCount,
  Pagination,
  Facets
} from "@yext/search-ui-react";
import JobCard from "../components/JobCard";
import Job from "../types/jobs";

// other code...

const Search: Template<TemplateRenderProps> = () => {
  return (
    <SearchHeadlessProvider searcher={searcher}>
      <div className="px-4 py-8">
        <div className="mx-auto flex max-w-5xl flex-col">
          <h1 className="pb-4 text-center text-3xl font-bold text-red-700">
            Turtlehead Tacos Careers
          </h1>
          <SearchBar placeholder="Search job title, department, or employment type" />
          <SpellCheck />
          <ResultsCount />
          <div className="flex">
            <div className="mr-5 w-56 shrink-0">
              <div className="flex flex-col rounded border bg-zinc-100 p-4 shadow-sm">
                <Facets />
              </div>
            </div>
            <VerticalResults<Job>
              CardComponent={JobCard}
              displayAllOnNoResults={false}
            />
          </div>
        </div>
        <Pagination />
      </div>
    </SearchHeadlessProvider>
  );
};

Let’s review what you just added:

  • You added a new flex container div to place your facets and search results next to each other.
  • You added the Facets component that will allow display all your facets.

Search for “jobs” in the search bar and use the facets to narrow down on results!

Standard and Numerical Facet components

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

    Search for jobs and use the facets to narrow down results. How many part time jobs pay at least $30/hour?

    Error Success Question 2 of 2

    How many jobs pay over $60/hour?

    A Hitchhiker in the making! 🔥

    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
Feedback