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