Frontend UI Refresher | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• How universal and vertical search are related
• How components are pulled in from the SDK

Universal & Vertical Search

Before you begin building, it’s important that you understand how the different pieces of the frontend come together to build a consumer-facing webpage.

As you learned in the Search Infrastructure Overview module , Search is made up of a number of verticals on the backend. On the frontend, these verticals can be displayed together on Universal Search and standalone in a Vertical Search page. Regardless of where the results are surfaced, they are using the same Search Configuration and data from the Knowledge Graph.

Universal Search and Vertical Search are just Pages that use a different combination of components from the Search SDK and display entity results in the form of Cards.

For example, let’s say you have an experience with Universal Search, Jobs Search and Locations Search. In this case, you’d have:

• 3 pages: Universal Search Page, Jobs Vertical Search Page and Locations Vertical Search Page

• Cards: Job result card and Location result card (you may choose to have more than 2 cards if you want your cards to look different on Universal and Vertical search, or you can use the same card for each vertical – but you’ll learn more about that later!)

Frontend Components from the Search UI SDK

Besides the type of card to use, each Page also needs to specify which components to surface from the Search SDK.

Here are some of the most common ones:

Search Bar Component

The SearchBar component adds the NLP-ready search bar to your experience. We recommend always keeping this for your experience as it will allow you to gain incredible insights from your customers, which you’ll learn about in Post-Launch Optimization .

Navigation Component

The navigation bar component allows you to go between Universal search and the different vertical search pages easily. If you have just a single vertical search, like a Restaurant Locator or a Job Finder, you’ll want to remove this component from the [pageName].html.hbs file. template.

Facets and Static Filter Components

These components help users refine their queries. Facets are dynamic and will update based on the user’s queries. Static Filters are always present.

Map Component

This is available by default in the “Vertical-Map” page template and can be used whenever you want to display a map with the results. You can choose to display a map within a vertical’s results on Universal Search as well.

While these are just a few of the many components available in the Search SDK, it’s important to understand how the components come together to create the visual experience for a user. You’ll learn how to control these components in the Pages Unit .