Background

The VerticalResults component is similar to UniversalResults but just renders a single vertical. It displays a list of results where each result is rendered as a card.

To learn more about how to design a full Vertical Results pages, check out the Vertical Search Results.

Specifying the Vertical

First, you should make sure to specify the vertical of the page. To specify the vertical that is used on the page, the verticalKey should be added to the Facets, SearchBar, and initial search config.

The VerticalResults component does not accept a verticalKey. It is infererred based on the other components on the page.

Configuration

Here is an example configuration for VerticalResults. In this example you can see the card is customized and we are choosing to display all results if no results are found.

ANSWERS.addComponent("VerticalResults", {
  container: ".vertical-results",
  card: {
    cardType: "Standard",
    dataMappings: {
      title: (item) => item.name,
      subtitle: (item) => item.address.line1,
      details: "",
      image: (item) =>
        !item.c_advisorPhoto ? null : item.c_advisorPhoto.image.url,
      url: "#",
    },

    callsToAction: [
      {
        label: "Book Appointment",
        icon: "calendar",
        url: "#",
        analyticsEventType: "CTA_CLICK",
        target: "_self",
      },
      {
        label: "Call",
        icon: "phone",
        url: (item) => `tel:${item.mainPhone}`,
        analyticsEventType: "TAP_TO_CALL",
      },
    ],
  },
  noResults: {
    displayAllResults: true,
  },
});

Customizing Result Cards

To customize the result card you should adjust the card property. Specifically, use the dataMappings and callsToAction to customize the look and the feel of the card. You can learn more in the Result Cards reference doc.

No Results

With version 0.13.1, you can show all results when no results return, and link to other verticals that return results. See more about Vertical No Results here

Vertical Results API