loading

VerticalResults

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 Guide.

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 in our Vertical No Results Guide

VerticalResults API
Property Type Default Description
container
string
REQUIRED Selector for the component container
renderItem
function
string to give custom template to result item
itemTemplate
string
Handlebars template for a custom card
maxNumberOfColumns
number
1
Set a maximum number of columns that will display at the widest breakpoint. Possible values are 1,2,3 or 4.
showResultCount
boolean
true
Whether to display the total number of results
card
object
The card used to display each individual result, see the Cards section for more details
noResults
object
Configuration for what to display when no results are found
template
string
Handlebars template for the no results component
displayAllResults
boolean
Shows all results in the vertical when no results are found