verticalPages
Configuration
verticalPages is included in the initialization, and is used in various components that require information about the vertical search pages, including Navigation, Universal Results and No Results in Vertical Results. It takes an array of objects, each representing a vertical search page.
ANSWERS.init({
apiKey: "3517add824e992916861b76e456724d9",
experienceKey: "answers-js-docs",
businessId: "3215760",
experienceVersion: "PRODUCTION",
verticalPages: [
{
label: "Home",
url: "index.html",
icon: "star",
isFirst: true,
isActive: true,
hideInNavigation: false
},
{
label: "Locations",
url: "/locations.html",
verticalKey: "locations",
icon: "pin",
isFirst: false,
isActive: false,
hideInNavigation: false
},
// Other pages here
],
onReady: function() {
// ADD COMPONENTS HERE
},
});
Where Is It Used?
| Option | No Results | UniversalResults |
Navigation |
|---|---|---|---|
label |
Used in alernative verticals. | Not used | Used as tab label |
url |
Used in alernative verticals | Used in “View More” link if not specified | Used as tab URL |
icon |
Used in alernative verticals. | Not used | Not used |
isFirst |
Not used | Not used | Used to determine which tab is pinned to the first slot |
isActive |
Not used | Not used | Used to determine which tab gets active state |
hideInNavigation |
Not used | Not used | Used to determine which tabs are hidden |
Recommended Configuration
isFirst and isActive
The navigation component should ideally always display universal search as the first tab (isFirst), and the current page as active (isActive). It’s therefore recommended that your Universal tab is always set to isFirst: true on each page, and the current page is set to isActive: true.
hideInNavigation
In the case that you have a vertical that you would like to remove from the navigation, but still maintain a page for, you can toggle the hideInNavigation boolean as needed. All other configuration will still be passed to the Navigation, no results and UniversalResults.
Example
verticalPages API
| Property | Type | Default | Description |
|---|---|---|---|
|
label
|
string
|
REQUIRED
The label for this page, used in both the Navigation and no results
|
|
|
url
|
string
|
REQUIRED
The link to this page, used in Navigation, no results and UniversalResults
|
|
|
verticalKey
|
string
|
The verticalKey, required for vertical search pages, must be omitted for universal search | |
|
icon
|
string
|
The icon associated with this vertical, used in no results | |
|
iconUrl
|
string
|
the url of the icon associated with this vertical, used in no results. Takes precedence over icon.
|
|
|
isFirst
|
boolean
|
If true, will show this page first in Navigation
|
|
|
isActive
|
boolean
|
If true, will add active styling to this page in Navigation
|
|
|
hideInNavigation
|
boolean
|
If true, hide this tab in the Navigation
|
search
Background
The search configuration in the initialization is used to control the default initial search and the number of results per page. It can be used to set a default initial search on both vertical and universal search pages.
search: {
verticalKey: 'verticalKey', //don't specify this property if universal
limit: '20', //not applicable to universal search, see universalLimit
defaultInitialSearch: 'What is Yext Answers?',
universalLimit: {
locations: 5, //only display 5 results for the locations vertical in universal
},
}
Example
search API
| Property | Type | Default | Description |
|---|---|---|---|
|
verticalKey
|
string
|
The vertical key to use for searches, passed to certain components. Required if a defaultInitialSearch is supplied.
|
|
|
limit
|
string
|
20
|
The number of results to display per page, defaults to 20. Maximum is 50. |
|
defaultInitialSearch
|
string
|
A default search to use on page load when the user hasn’t provided a query. If set to “”, the SearchBar’s allowEmptySearch must be set to true.
|
|
|
universalLimit
|
object
|
An object containing the number of results to display per vertical key. Minimum is 1. Maximum is 50. | |
|
[verticalKey]
|
number
|
20
|
The limit for this vertical on universal |
onUniversalSearch
Background
The onUniversalSearch attribute accepts a function. It allows you to send an analytics event each time a search is run on a Universal page. This function should take in one parameter, searchParams, which contains information about the search, and return the desired analytics event.
Like all Answers Javascript API Library analytics, this will only work if there is a businessId in the ANSWERS.init.
Usage
The search information exposed in searchParams is shown below.
function (searchParams) => {
/**
* The string being searched for.
* @type {string}
*/
const queryString = searchParams.queryString;
/**
* The number of verticals returned.
* @type {number}
*/
const sectionsCount = searchParams.sectionsCount;
/**
* A map containing entries of the form:
* { totalResultsCount: 150, displayedResultsCount: 10}
* for each returned vertical. The totalResultsCount indicates how many results
* are present in the vertical. The displayResultsCount indicates how many of
* those results are actually displayed.
* @type {Object<string,Object>}
*/
const resultsCountByVertical = searchParams.resultsCountByVertical;
let analyticsEvent = new ANSWERS.AnalyticsEvent('ANALYTICS_EVENT_TYPE');
analyticsEvent.addOptions({
type: 'ANALYTICS_EVENT_TYPE',
label: 'Sample analytics event',
searcher: 'UNIVERSAL',
query: queryString
sectionsCount: sectionsCount,
});
return analyticsEvent;
},
}),
onVerticalSearch
Background
The onVerticalSearch Configuration accepts a function. It allows you to send an analytics event each time a search is run on a Vertical page. This function should take in one parameter, searchParams, which contains information about the search, and return the desired analytics event.
Like all Answers Javascript API Library analytics, this will only work if there is a businessId in the ANSWERS.init.
queryStringwill be undefined for searches initiated by pagination / applying facets/filters/sorts even if there is a query being used.
Usage
The search information exposed in searchParams is shown below.
function (searchParams) => {
/**
* Vertical key used for the search.
* @type {string}
*/
const verticalKey = searchParams.verticalKey;
/**
* The string being searched for.
* @type {string}
*/
const queryString = searchParams.queryString;
/**
* The total number of results found.
* @type {number}
*/
const resultsCount = searchParams.resultsCount;
/**
* Either 'normal' or 'no-results'.
* @type {string}
*/
const resultsContext = searchParams.resultsContext;
let analyticsEvent = new ANSWERS.AnalyticsEvent('ANALYTICS_EVENT_TYPE');
analyticsEvent.addOptions({
label: 'Sample analytics event',
searcher: 'VERTICAL',
query: queryString,
resultsCount: resultsCount,
resultsContext: resultsContext,
});
return analyticsEvent;
},
}),