Stats

Overview

This component allows the user to display information about the current search.

This component must be linked to a search Store, since it needs it to retrieve the values of the last search.

Usage

This is how you create this component:

sdk.component('stats', target: HTMLElement|String, options: Object);

Sample

By default, this component looks like this:

Options

The following options can be set in this component:

Name Type Default Description
text String '<div class="inbenta-search-stats__info">Results <strong>{{ first }}</strong>-<strong>{{ last }}</strong> of <strong>{{ totalResults }}</strong> for: </div>'+'<div class="inbenta-search-stats__query inbenta-search-title">{{ query }}</div>' The text to display. You can use the following templates to build the text:
  • {{ first }}: First result number.
  • {{ last }}: Last result number.
  • {{ totalResults }}: The total number of results.
  • {{ query }}: The text from the request query
templates Object The templates to override the default render behavior
templates.body String | (Object) => String Body template, provided with first, last, totalResults and query
templates.header String | () => String Header template
templates.footer String | () => String Footer template

Tracking

This component does not track any event.

Examples

Example using the results component Store with the linkTo method:
<div id="stats"></div>
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results');

  var stats = sdk.component('stats', '#stats', {
    text: 'Showing <strong>{{ totalResults }}</strong> results for: {{ query }}'
  });

  results.linkTo(stats);
</script>
Example using template
<div id="stats"></div>
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results');

  var stats = sdk.component('stats', '#stats', {
    templates: {
      header: 'Search Stats',
      body: 'Showing <strong>{{ totalResults }}</strong> results for: {{ query }}'
    }
  });

  results.linkTo(stats);
</script>