No Results

Overview

This component displays a message when the SDK performs a search action that returns no results. This message is removed after a new search is performed that does return results.

This component must be linked with a search Store, since it listens to its events to check if the SDK has performed a search with no results.

Usage

This is how you create this component:

sdk.component('no-results', target: HTMLElement|String);

After the component is triggered, it shows the following message:

Here is the HTML of the message depicted above:

  <div class="inbenta-search-no-results">
    <div class="inbenta-search-no-results__header inbenta-search-title">
      {{ NO_RESULTS_NOT_FOUND_HEADER }}
    </div>
    <div class="inbenta-search-no-results__title inbenta-search-title">
      {{ NO_RESULTS_NOT_FOUND_TITLE }}
    </div>
    <div class="inbenta-search-no-results__subtitle">
      {{ NO_RESULTS_NOT_FOUND_SUBTITLE }}
    </div>
  </div>
Note

The text inside the brackets represents the labels to be shown (see next section below)

Labels

This component uses the following labels:

Name Default Description
NO_RESULTS_NOT_FOUND_HEADER Oops! The header text when there is no results
NO_RESULTS_NOT_FOUND_TITLE Sorry, we couldn't find any answers to your question. The title text when there is no results
NO_RESULTS_NOT_FOUND_SUBTITLE Please, try to rephrase your question with alternate words. The subtitle text when there is no results

Tracking

This component does not track any event.

Example using results component Store through method linkTo

<div id="no-results"></div>
<div id="results"></div>

<script>
  var noResults = sdk.component('no-results', '#no-results');
  var results = sdk.component('results', '#results');
  results.linkTo(noResults);
</script>

In this example, the no-results component listens to the Store events of the results component.