UniversalResults| Hitchhikers Platform

When you run a search on Google, all your results are listed in an “All” tab like so:

This “All” tab combines information from the other Verticals on a single page. Yext Universal search provides a similar experience by searching across each vertical at once. The results returned from a Universal search are rendered by the <UniversalResults /> component.

Here’s what <UniversalResults /> looks like:

The Universal Search: Query response is stored in the Universal section of the Search state in a series of vertical modules. The modules appear in order of relevance to the query. Modules are returned for all verticals with relevant entities. displays each module in a vertical section.

Basic Example

<UniversalResults /> requires a verticalConfigMap that maps the vertical key to the configuration of that vertical.

Below is an example of <UniversalResults /> with the minimum configuration for 2 verticals:

import { SearchBar, UniversalResults } from "@yext/search-react-ui";

const App = (): JSX.Element => {
  return (
    <div className="flex justify-center px-4 py-6">
      <div className="w-full max-w-5xl">
        <SearchBar />
        <UniversalResults verticalConfigMap={{ products: {}, locations: {} }} />
      </div>
    </div>
  );
};

export default App;

verticalConfigMap

In the above example, products and locations are vertical keys. <StandardCard /> is used to display every result in each vertical while the label displays the vertical key as the label for each section.

The configuration of each vertical is represented by a handful of optional props:

Prop Name	Type	Description	Default
`CardComponent?`	`JSX.Element`	the card to use to display results for the associated vertical	`<StandardCard />`
`SectionComponent?`	`JSX.Element`	a component that displays all the results for a vertical using a standard section template	`<StandardSection />`
`label?`	string	the display name for the vertical	vertical key for the given vertical
`viewAllButton?`	`boolean`	whether or not the vertical section should show a button to take the user to the vertical page	false
`getViewAllUrl?`	`(data: VerticalLink) ⇒ string`	a function to provide a user-defined url path for each vertical’s view all link	”/[verticalKey]?query=[query]”

Customizing a Section

Each vertical on the universal results page is a unique section, and can be individually customized using the SectionComponent property. A vertical’s SectionComponent defines how it is laid out on the page. The following defines a grid section component and formatted labels for each section:

import {
  UniversalResults,
  SectionProps,
  SearchBar,
  StandardCard,
} from "@yext/search-ui-react";

const GridSection = ({ results, CardComponent, header }: SectionProps) => {
  if (!CardComponent) {
    return <div>Missing Card Component</div>;
  }

  return (
    <div>
      <div>{header}</div>
      <div className="grid grid-cols-4 gap-8">
        {results.map((r) => (
          <CardComponent result={r} />
        ))}
      </div>
    </div>
  );
};

const App = (): JSX.Element => {
  return (
    <div className="flex justify-center px-4 py-6">
      <div className="w-full max-w-5xl">
        <SearchBar />
        <UniversalResults
          verticalConfigMap={{
            products: {
              label: "Our Products",
              viewAllButton: true,
              SectionComponent: GridSection,
              CardComponent: StandardCard,
            },
          }}
        />
      </div>
    </div>
  );
};

export default App;

You could provide further customization by using a custom card for the section components.

Customizations

Like the rest of our components, you can customize the elements of the Universal Results using the customCssClasses prop.

Component API

Prop	Description	Default	Type
`customCssClasses?`	(Optional) CSS classes for customizing the component styling.		`VerticalResultsCssClasses`
`showAppliedFilters?`	(Optional) Whether or not to show the applied filters.	false	`boolean`
`verticalConfigMap`	A mapping of verticalKey to the configuration for each vertical.	N/A	`VerticalConfigMap`

Back

< SearchBar

VerticalResults >

Feedback

<% elem.innerText %>