Authorization
API Resources
NL Interpreter
Search
Benti
Categories
Overview
Use this component to show categories.
Usage
How to create this component.
sdk.component('categories', target:String, options:Object);Sample
By default, this component looks like this:
Target
This is the HTML component. For example, the "#inbenta" target is:
<div id="inbenta"></div>Options
Available options to set in this component
| Name | Type | Default | Description |
|---|---|---|---|
| categorySlug | String | null |
Slug of the category to show at the beginning. |
| categoryId | integer | 0 | Id of the category to show at the beginning. IMPORTANT: not effective if categorySlug is set. |
| length | integer | 5 | Maximum number of contents that may be returned in collection. Minimum:1. Max:100 |
| categoriesGroupLength | integer | 5 | Number of categories grouped in a div (for design) |
| loadCategoryOnClick | boolean | true |
When a category is clicked load it in the component |
| openUniqueContent | boolean | false |
When a category with only one content is clicked, the content opens and a click is tracked. |
Default options object
{
categoryId: 0,
length: 5,
categoriesGroupLength: 5,
loadCategoryOnClick: true,
contents: { <more info in subcomponent> }
}Methods
Methods can be used in this component.
| Name | Description |
|---|---|
setCategory(category: integer) |
Set the current category |
setCategoryBySlug(category: integer) |
Set the current category |
linkToCategoriesSidebar(component: Component) |
Link a Categories sidebar component to this categories component |
linkToCategoriesBreadCrumb(component: Component) |
Link a Categories breadcrumb component to this categories component |
setContentsDataInterceptor(interceptor:function) |
Set a contents interceptor. |
setRelatedDataInterceptor(interceptor:function) |
Set a related interceptor. |
setCategoriesDataInterceptor(interceptor:function) |
Set a categories interceptor. |
Subcomponents
This component has some components inside which can be configured. This components are:
| Name | Description |
|---|---|
| contents | Component to render each content |
Events
Events to listen on this component.
| Name | Params | Description |
|---|---|---|
| click | category: Category object |
Sent whether a category is clicked |
| contentClick | content: Content object |
Sent whether a content is clicked |
| relatedClick | integer: Related content id |
Sent whether a related content is clicked |
| decisionTreeClick | decisionTree: Decision tree object |
Sent whether a decision tree content is clicked |
| rateContent | rating: Rating object |
Sent whether a rating is clicked |
Tracking
This component calls the API endpoint /tracking/events to register a click event when a user clicks on a content.
Labels
Labels of this component. The default labels of each component can be rewritten in the SDK creation configuration.
| Name | Default | Description |
|---|---|---|
| CATEGORIES_TITLE | Categories |
HTML for categories title |
| CATEGORIES_BACK_BUTTON | Back |
The name of the button that users can click to go back to the main search page after having clicked a category |
Examples
First example: Create sidebar and categories components and link them.
var categoriesSidebar = sdk.component('categoriesSidebar', '#sidebar');
var categoriesBreadcrumb = sdk.component('categoriesBreadcrumb', '#breadcrumb');
var categories = sdk.component('categories', '#categories');
categories.linkToCategoriesSidebar(categoriesSidebar);
categories.linkToCategoriesBreadCrumb(categoriesBreadcrumb);Second example: Create a categories component and set category 1 as the initial category.
var categories = sdk.component('categories', '#categories');
categories.setCategory(1)