Introducing a Better No Results Experience for Vertical Search!
With version 1.2.0, you can show all results when no results return, and link to other verticals that return results.
Before 
After 
A. I do not want this new experience.
All good! If you don’t do anything, everything will remain as-is. We did this specifically so it would be a non-breaking change.
B. How do I get the new no results experience?
1: Make sure you are on at least v1.2.0 of the library
2: For any verticals that should have the no results experience, you’ll need to add the noResults configuration to three components: VerticalResults, Map and Pagination. This configuration is set in the .json configuration file for that vertical, under the componentSettings object.
| Component | Configuration Options | Description |
|---|---|---|
| Map | noResults.visible, noResults.displayAllResults |
visible controls whether the map is displayed on no results. displayAllResults controls whether all results should be shown on that map. |
| VerticalResults | noResults.displayAllResults |
displayAllResults controls whether all results should be shown. |
| Pagination | noResults.visible |
visible controls whether pagination is displayed on no results. Set this if you are showing all results on no results. Paginating will update the all results displayed. |
Here’s an example of a locations.json config file:
"componentSettings": {
"Map" : {
"noResults": {
"visible" : true,
"displayAllResults": true
}
},
"Pagination" : {
"noResults": {
"visible": true
}
},
"VerticalResults": {
"noResults": {
"displayAllResults": true
}
}
},
3: Do a quick QA and make sure everything looks good on staging!
C. I like it, but they want to tweak the language a bit.
It’s very easy to override the no results template. Note: We did this because the logic is a little bit complicated (like iterating through the list of all alternative verticals, and deciding when to use plural vs. singular for “result” and “category”). We wanted you to still have access to those fancy things, even if you just wanted to customize part of the string.
You have access to the following variables:
- The url for universal search: universalUrl
- The current vertical: currentVerticalLabel
- The query that was created: query
- Results count for all results: resultsCount
- The set of all alternative verticals that returned results: verticalSuggestions
It’s a little tough to format in this post, but you can view the template in the vertical config here: Default Template for No Results in Answers · GitHub
D. I want the old stuff, but I want to be able to tweak the text, there, too.
You can still use the old no results and update any of the strings. We’d recommend setting “displayAllResults” to false.
Here’s an example: Default Template for No Results in Answers · GitHub
E. I want a completely new thing! Choose my own destiny 
You have the option of writing your own template from scratch. Go forth, but as someone who has tried this, it isn’t super easy. Feel free to post here and we’ll help you!
Other Questions
1. Can this apply to universal?
Not yet but it’s coming – the construct is going to be a little different.
2. What about third party backends?
You can add the new no results messaging, but all results will never be returned for third party backends – not all backends support the ability to to list out all results.
3. How do I change the color of the background?
The template uses the $color-brand-primary variable that’s in your answers.scss file.
If you want it to be a different color, you can add this to your scss
.yxt-AlternativeVerticals
{
&-noResultsInfo {
background-color: $color-brand-primary; //change the background color
color: $color-brand-white; //change the color of the font
}
a {
color: $color-brand-primary; //change the link color
&:hover,
&:active {
color: $color-brand-hover; //change the hover color of the link
}
}
}
