Categories Sidebar

Overview

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.

Usage

How to create this component.

var categoriesSidebar = sdk.component('categoriesSidebar', 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
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

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.

Subcomponents

This component does not have any subcomponents.

Events

Events to listen on this component.

Name Event data Description
click category Sent whether a category 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_SIDEBAR_TITLE Categories HTML for categories sidebar title

Examples

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