Customize No Results Banner Text

Search Best Practices - Search Front-End
4

Hi Scott,

Here’s how you would customize the full no results template, beyond just adding a string as Kristy mentioned:

  1. In your partials directory, create a new partial – we’ll call it alternative-verticals-override.hbs. Copy over the contents of the alternative verticals template found here. Modify the template as needed.

  2. Via the Jambo override command, shadow templates/[[layout-name]]/script/verticalresults.hbs. At the end of the file, add the following

{
  noResults: Object.assign(
    {}, 
    {{{ json componentSettings.VerticalResults.noResults }}},
    {
      template: `{{{read 'partials/alternative-verticals-override'}}}`,
    }
  ), 
}

The full file should look like this:

ANSWERS.addComponent('VerticalResults', Object.assign({}, {
  container: '.js-answersVerticalResults',
  {{#if verticalKey}}
    verticalKey: '{{{verticalKey}}}',
    modifier: '{{{verticalKey}}}',
  {{/if}} 
  verticalPages: [
    {{#each verticalConfigs}}
      {{#if verticalKey}}
      {
        verticalKey: '{{{verticalKey}}}',
        {{#each ../excludedVerticals}}{{#ifeq this ../verticalKey}}hideInNavigation: true,{{/ifeq}}{{/each}}
        {{#ifeq ../verticalKey verticalKey}}isActive: true,{{/ifeq}}
        {{#with (lookup verticalsToConfig verticalKey)}}
        {{#if isFirst}}isFirst: {{isFirst}},{{/if}}
        {{#if icon}}icon: '{{{icon}}}',{{/if}}
        {{#if iconUrl}}iconUrl: '{{{iconUrl}}}',{{/if}}
        label:
        {{#if label}}'{{{label}}}'{{else}}{{#if ../verticalKey}}'{{{../verticalKey}}}'{{else}}'{{{@key}}}'{{/if}}{{/if}},
        url: {{#if url}}'{{{url}}}'{{else}}'{{{@key}}}.html'{{/if}},
        {{/with}}
      }{{#unless @last}},{{/unless}}
      {{else}}
      {
      {{#with (lookup verticalsToConfig 'Universal')}}
        {{#if isFirst}}isFirst: {{isFirst}},{{/if}}
        {{#if icon}}icon: '{{{icon}}}',{{/if}}
        label: {{#if label}}'{{{label}}}'{{else}}'{{{@key}}}'{{/if}},
        url: {{#if url}}'{{{url}}}'{{else}}'{{{@key}}}.html'{{/if}}
      {{/with}}
      }{{#unless @last}},{{/unless}}
      {{/if}}
    {{/each}}
  ],
  {{#with (lookup verticalsToConfig verticalKey)}}
    card: {
      {{#if cardType}}cardType: '{{{cardType}}}',{{/if}}
    }
  {{/with}},
}, 
{{{ json componentSettings.VerticalResults }}},
{
  noResults: Object.assign(
    {}, 
    {{{ json componentSettings.VerticalResults.noResults }}},
    {
      template: `{{{read 'partials/alternative-verticals-override''}}}`,
    }
  ), 
}
));

The no results template can be customized per vertical layout (so each vertical-standard will get the same no results template). It sounds like you just need this for a vertical with maps, and assuming there’s only one, it might do the trick; however, you can also use conditionals in the handlebars to display specific messaging per vertical. This gets a little more advanced (you’d likely need a helper method to do the comparison), but we can provide additional instruction if needed.

Thanks,
Rose

3 Likes