Overriding Vertical Results Card with use of Answers Search UI SDK

Search
1

Hi,

I am using Answers Search UI SDK and I am initiating Answers from my custom code outside of the Yext site (based on this topic: Get Started | Hitchhikers)

I have few questions.

  1. Is it possible to override the template for Vertical Result Card? The predefined “Standard” and “Accordion” card types do not fit my needs, so wanted to do some customizations.

I’ve tried something like this:

this.addComponent("VerticalResults", {
        container: ".vertical-container",
        verticalKey: '{{ vertical_key }}',
        card: {
          template: '{{ vertical_template_hbs }}',
          cardType: 'Standard',
          dataMappings: {
            title: (item) => item.name,
            subtitle: (item) => 'Last Updated on ' + item.externalArticleUpdateDate,
            details: (item) => item.richTextDescription,
            url: (item) => item.landingPageUrl,
            showMoreLimit: 350,
          },

where {{ vertical_template_hbs }}' contains the .hbs markup from themes/answers-hitchhiker-theme/cards/standard/template.hbs (I copied the markup to a separate file and I am loading it’s content and passing to the template property).
However this is not working, I am getting blank page.

The reason I am doing it this way, is because I don’t want the prebuilt <iframe> and wanted to customize the markup to pass some more fields and style it in a different way.

  1. If the answer for 1) is NO, is there a way to use the card from Yext environment, while still using the Answers Search UI SDK and initiating Answers component from the custom code outside of Yext?
2

Hi @Christopher_Smith - if you check out this training module (Overriding Component Layouts | Hitchhikers) this should walk you through what you’re trying to do.

Let us know if you run into any other questions!