Developers
Authorization
API Resources
NL Interpreter
Search
Benti
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
With retry query
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:
|
| 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:
|
| templates | Object | The templates to override the default render behavior. See further information about templates here. | |
| 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>