Shared Vertical Settings (verticalsToConfig) | Yext Hitchhikers Platform
The verticalsToConfig
object is meant to represent any settings that are shared across the vertical pages and universal page, which is mostly around the Navigation and Card components. Anything specified here can be accessed when rendering either the universal or vertical page and it is there to save you time from having to specify in both places. Learn more in the
Edit Page and Component Settings unit
.
Configuration Example
"verticalsToConfig": {
"locations": {
"label": "Offices",
"cardType": "location-standard",
"icon": "pin",
"mapConfig": {
//"enablePinClustering": true, // Cluster pins on the map that are close together. Defaults false
"mapProvider": "MapBox", // The name of the provider (e.g. Mapbox, Google)
"noResults": {
"displayAllResults": false // Set to FALSE to hide results on the map when a search returns no results
},
"pin": {
"default": { // The pin in its normal state
"backgroundColor": "#5387d7", // Enter a hex value or color for the pin background
"strokeColor": "#2a446b",
"labelColor": "white"
},
"hovered": { // The pin when it is hovered
"backgroundColor": "#2f4d71",
"strokeColor": "#172638",
"labelColor": "white"
},
"selected": { // The pin when it is selected by mouse click or through a card click
"backgroundColor": "#2f4d71",
"strokeColor": "#172638",
"labelColor": "white"
}
}
},
}
}
Required Properties
Property | Description | Example |
---|---|---|
cardType |
This is how we know which card to use on your experience. This is not needed on universal search. | “standard” |
Optional Properties
Property | Description | Example |
---|---|---|
icon |
This is the icon that appears in the vertical’s section header on universal results, and in the alternate verticals section of no results (if used). This property accepts only one of the enum values available in the SDK. Full list of icon options available in the SDK readme here | “briefcase” |
iconUrl |
This is the icon that appears in the vertical’s section header on universal results, and in the alternate verticals section of no results (if used). If both icon and iconUrl are present, we will use the iconUrl . |
a.mktgcdn.com/p-sandbox/7FGLdYehh9wxKb_FITVC2y2fRfXudwEm-XC8gROksZA/196x196.jpg |
label |
This is the name of the vertical as it appears in the vertical section title and in the navigation. If you don’t specify, we will use the vertical name property from the Search configuration by default. For some verticals, like “faqs”, many customers choose to specify the label (e.g., “Frequently Asked Questions”). | “Frequently Asked Questions” |
sectionTitle |
If you only want to override the section title, and not the navigation, you can update this property. | “Frequently Asked Questions” |
verticalLimit |
This allows you to set maximum results displayed on vertical search. If you have pagination enabled (e.g., you have the component in the handlebars template), this will be the maximum number per page. If you have removed the pagination component or commented it out, this will be the maximum results the user sees. The maximum value is 50. | 25 |
universalLimit |
This allows you to set the maximum results displayed within the vertical section on universal results. The maximum value is 10. | 10 |
viewAllText |
This allows you to update the label on universal results for the link to view more results from universal results. Clicking this link will take you to the vertical page by default. | “View All Products here” |
viewMore |
This allows you to hide the “View More Results” link in universal results. By default, this is set to true. | false |
universalSectionTemplate |
This allows you to change the section layout for a vertical on universal search, e.g., standard (stacked cards) or grid-three-columns . If left out, it will default to standard (stacked cards). Also see
Page Templates
reference doc. |
grid-three-columns |
mapConfig |
This allows you to set the configuration for the map, including the mapProvider (Mapbox or Google), pinConfig , and noResults . You can learn more about this in the
Maps
reference doc. |
See code example above |
isFirst |
This is set by default in the theme for the universal page. It is how we ensure that the universal page (“All”) is the far left tab in the navigation. | true |
<% elem.innerText %>