Authorization
API Resources
NL Interpreter
Search
Assist
Categories
Overview
Use this component to show categories. The SDK returns categories, subcategories and the contents stored in those (sub)categories in the order configured in the Knowledge instance's Knowledge Base > Categories screen.
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 of the URL. |
| categoryId | integer | 0 | Id of the category to show at the beginning of the URL. 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)