This component is a sidebar with the categories tree.
To update the categories components, you can link the sidebar to the categories component. This will either update this component when a category is clicked in the categories component, or update the categories component when this component is clicked.
How to create this component.
var categoriesSidebar = sdk.component('categoriesSidebar', target:String, options:Object);By default, this component looks like this:
This is the HTML component. For example, the "#inbenta" target is:
<div id="inbenta"></div>Available options to set in this component
| Name | Type | Default | Description |
|---|---|---|---|
| firstLevelCategory | integer | 0 | Category to start the tree |
| selectedCategory | integer | 0 | Active category |
| loadCategoryOnClick | boolean | true | When a category is clicked load it in the component |
Default options object
{
firstLevelCategory: 0,
selectedCategory: 0
}Methods can be used in this component.
| Name | Description |
|---|---|
setSelectedCategory(category: integer) |
Set the active category |
setFirstLevelCategory(category: integer) |
Set root category of the sidebar |
setCategoriesDataInterceptor(interceptor:function) |
Set a categories interceptor. |
This component does not have any subcomponents.
Events to listen on this component.
| Name | Event data | Description |
|---|---|---|
| click | category |
Sent whether a category is clicked |
This component calls the API endpoint /tracking/events to register a click event when a user clicks on a content.
Labels of this component. The default labels of each component can be rewritten in the sdk creation configuration.
| Name | Default | Description |
|---|---|---|
| CATEGORIES_SIDEBAR_TITLE | Categories |
HTML for categories sidebar title |
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);