Pass extra data to VerticalResults component

Hi, on the Locator page, our client wants to display a CTA to each location that shows when searching. The string to be used for the CTA is stored in the Site entity, and therefore not accessible to a custom card I’m using, which is called by the VerticalResults component. How can I include data that is not available in the Result, so that I can display it on the card?

Hi Andrea,

You are actually still able to do this with the VerticalResults component. You just need to do something like this:

  CardComponent={(verticalResult) => (
      "grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3",

In the above code, I am explicitly pulling out the result from the data passed to the CardComponent prop. In addition, I am also passing an image url as a logo prop to my custom PokeCard. The complete code can be found at this Code Sandbox.

A few other things to note about this code:

  • The Ce_pokemon type was generated with the Yext CLI command specified on this reference page
  • The PokeCard component extends CardProps to include a logo prop
  • This project is a Vite project rather than Yext Pages but that shouldn’t make a difference in this case. You would just pass your field from the _site object to your custom card

Let me know if there are any more clarifications I can provide.

1 Like

Thanks Aaron, this is extremely helpful. I will keep this in mind for other scenarios as well, where I need to achieve the same result.