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:

Without retry query

Captura_de_pantalla_2019-07-18_a_las_10.29.42

With retry query

Captura_de_pantalla_2019-07-18_a_las_10.28.41

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
textRetryQuery String '<div class="inbenta-search-stats__info">No results found for <strong>{{ query }}</strong></div><div class="inbenta-search-stats__info">Displaying results <strong>{{ first }}</strong>-<strong>{{ last }}</strong> from <strong>{{ totalResults }}</strong> for: </div><div class="inbenta-search-stats__query inbenta-search-title">"{{ retryQuery }}"</div>' The text to display when there is a retry query. 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
  • {{ retryQuery }}: The text from the request retry query that returned results because the query returned no results while having the advanced search options enabled.
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.bodyRetryQuery String | (Object) => String Body template when there is a retry query, provided with first, last, totalResults, query and retryQuery
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 }}',
    textRetyQuery: 'Showing <strong>{{ totalResults }}</strong> results for: {{ retryQuery }} since {{ query }} returned no results',
  });

  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 }}',
      bodyRetryQuery: 'Showing <strong>{{ totalResults }}</strong> results for: {{ retryQuery }} since {{ query }} returned no results',
    }
  });

  results.linkTo(stats);
</script>