Step 4: Add a Custom Search Card

This guide accompanies the video walk-through and will provide you with code snippets and commands used in the video.

In this video, Aaron builds a custom card component for his blog search experience.

Want to learn more?

If you want to see the finished code from the end of this section, clone the starter repo with git clone https://github.com/YextSolutions/pages-starter-react-blog and check out the custom-cards branch with git checkout custom-cards.

Walkthrough

0:34 Generate the Typescript type files for your search experience entities to facilitate Typescript development with IDE feedback.

yext types generate search src/types --experienceKey blog-search

You’ll see a new types folder with a blog.ts file. The blog interface represents all the fields that show up in a blog search result.

1:21 Create a new file in src/components called blog-card.tsx for your custom card component and add the following code:

// src/components/blog-card.tsx

import * as React from "react";
import { CardComponent, CardProps } from "@yext/search-ui-react";
import Ce_blog from "../types/blogs";

const BlogCard: CardComponent<Ce_blog> = ({
  result,
}: CardProps<Ce_blog>): JSX.Element => {
  const blog = result.rawData;

  return (
    <a href={blog.slug} target="_blank" rel="noreferrer">
      <div className="mb-4 flex cursor-pointer flex-col justify-between rounded-lg border p-4 shadow-sm transition duration-200 hover:scale-105">
        <div className="flex flex-col text-neutral-dark">
          <div className="text-lg font-medium">{blog.name}</div>
          <div>{blog.datePosted}</div>
        </div>
      </div>
    </a>
  );
};

export default BlogCard;

Note there is a slight difference in the code snippet above versus in the video. We no longer need the { } to import Ce_blog because it is the default export in the ../types/blogs.ts file.

2:21 In the src/components/blog-results.tsx file, point vertical results to use the new card you just created. Use a hook directly to make a vertical query request as soon as the component renders.

// src/components/blog-results.tsx

import { SearchBar, VerticalResults } from "@yext/search-ui-react";
import { useSearchActions } from "@yext/search-headless-react";
import * as React from "react";
import BlogCard from "./blog-card";

const BlogResults = () => {
  const searchActions = useSearchActions();

  React.useEffect(() => {
    searchActions.executeVerticalQuery();
  }, []);

  return (
    <div className="centered-container pt-4">
      <SearchBar />
      <VerticalResults CardComponent={BlogCard} />
    </div>
  );
};

export default BlogResults;

3:03 Aaron walks through the completed project with the new custom card in the search results.

Congrats, you’ve built a Pages blog site that includes a search experience!

<% elem.innerText %>