Use this component to show categories.


How to create this component.

sdk.component('categories', 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
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 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.


This component has some components inside which can be configured. This components are:

Name Description
contents Component to render each content


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


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_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


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');

Second example: Create a categories component and set category 1 as the initial category.

var categories = sdk.component('categories', '#categories');