Pass extra data to VerticalResults component

Search Search UI React
1

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?

2

Hi Andrea,

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

<VerticalResults<Ce_pokemon>
  CardComponent={(verticalResult) => (
    <PokeCard
      result={verticalResult.result}
      logo={
        "https://www.freepnglogos.com/uploads/pokemon-symbol-logo-png-31.png"
      }
    />
  )}
  customCssClasses={{
    verticalResultsContainer:
      "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
3

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.