JS Version 1.2.0 Release - No Results on Vertical Search

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 :confused:

After :heart_eyes:

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 :crystal_ball:

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
    }
  }
}

The full rollout of this has been delayed due to a regression in 13. See here for when it will be resolved, JS Version 1.0.0 Release (Upcoming).

Hi @roser,

Thank you for typing out these instructions! This new feature looks awesome and I’m really excited to take advantage of it. Can you clarify where the line of code below should be written in the answers.js file? Should it be included in each vertical?

Thank you,
Austin

it should be config.pagination (so not within the vertical). Here’s an example of the config in the answers.js file (pagination is near the bottom):

export const config = {
  apiKey: 'blah',
  answersKey: 'goldsconfig',
  mapConfig: {
    noResults: { // NO RESULTS CONFIG HERE
      displayAllResults: true
    },
    mapProvider: MapProvider.MAPBOX,
    apiKey: 'blahh',
  },
  verticals: { 
    locations: {
      sectionTitle: 'Ballroom Extravaganza Locations',
      sectionTitleIconName: 'office',
      showOrdinal: true,
      universalLimit: 5,
      pagination: true,
      showFieldNames: true,
      noResults: {  // NO RESULTS CONFIG HERE
        displayAllResults: false
      },
      dataMappings: {
        ctas: [
          {	
            label: "real CTA", 	
            url: "www.yext.com",	
            target: "_blank",	
            icon: "./assets/images/uber.svg",	
            iconUrl: "./assets/images/uber.svg",
            analytics: {},
         }
          
        ],
        details: (profile) => {
          return `
            <div class="yxt-Result-hours Hours">
              ${Formatter.openStatus(profile)}
            </div>
            <div class="yxt-Result-address">
              ${Formatter.address(profile)}
            </div>
            <div class="yxt-Result-phone">
              ${Formatter.phoneDisplay(profile)}
            </div>
          `;
        },
      },
    },
  },
  searchBar: {
    container: '.js-answersSearch',
    title: 'What are you looking for today?',
    labelText: 'Search',
    submitText: 'Submit a Search',
    customIconUrl: Yext.BaseUrl + 'assets/images/phone.svg',
  },
  qaSubmission:{
    privacyPolicyUrl: 'yext.com/privacy',
    entityId: 'Org',
  },
  pagination: {
    noResults: { // NO RESULTS CONFIG HERE
      visible: true
    }
  },
  directAnswers: {
    container: '.js-answersDirectAnswer',
    footerText: 'Was this the answer you were looking for?',
  },
  universalUrl: "./index.html",
  showEmptyMap: true,
};

Hi @roser, Can you update these instructions for Jambo please? Thank you!

1 Like

Hey @roser! I’m setting this up in my accounts (so cool!) but I realized that this seems to affect FAQ header styling. Specifically, the text is no longer bold.

In the screenshot below you can see the COVID FAQs (where I did not set this up) look different than the regular FAQs.

Hi Jessie,

The lighter weight font is a style update with the Accordion card - as noted in the post, there are some breaking changes using the new card… You can target the Accordion title class and add bolding if desired.