Components

Create a component

If you need a more fine-tuned experience, you can build your components separately.

Environment

This is the working environment of the SDK. It is set by default to a production environment.

config = {
    environment:'production'
};

Caution: The production environment is your Live site. Use the development environment for setup and testing, or you risk affecting your site statistics.

Usage

sdk.component(component: String, target: HTMLElement|String, options: Object = {});
Parameter Type Description
component String The component name. You can write it in kebab-case or CamelCase. See below for a list of available components.
target String, HTMLElement The element (or CSS selector string) that is used as a mounting point. Do not mount the component to <html> or <body>.
options Object The component options

Available components

Manage events inside component

Some components can contain events. This is useful when you want to launch an action when this event is triggered. They are simple to use:

component.on('event-name', function (event) {
  console.log(event);
});

Simple example:

var searchBox = sdk.component('search-box', '#search-box', {
  autofocus: true,
});

Advanced example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Inbenta Search SDK</title>
</head>

<body>
  <div id="app">
    <div id="searchBox"></div>
    <div class="container">
      <div id="stats"></div>
      <div id="filters"></div>
      <div id="tabs"></div>
      <div id="results"></div>
      <div id="pagination"></div>
      <div id="loader"></div>
    </div>
  </div>
  <script src="https://sdk.inbenta.io/search/<version>/inbenta-search-sdk.js"></script>
  <script>
    var domainKey = 'domain_key';
    var apiKey = 'api_key';

    // Creates the SDK instance using your access token.
    var sdk = InbentaSearchSDK.createFromDomainKey(domainKey, apiKey);

    // Creates a results component and change the limit to 5 results with the attributes BEST_DYNABS and Price
    var results = sdk.component('results', '#results', {
      resultsPerPage: 5,
      attributes: ['BEST_DYNABS', 'Price']
    });

    // Creates a searchBox component with the default options
    var searchBox = sdk.component('search-box', '#searchBox');

    // Creates a stats component with the default options
    var stats = sdk.component('stats', '#stats');

    // Creates a refinement lists component with the setting Price
    var filters = sdk.component('refinement-lists', '#filters',  {
     refinements: [
       {
        attributeName: 'Price',
        headerText: 'Price'
       }
     ]
    });

    // Creates a refinement tabs component using the setting Product Type
    var tabs = sdk.component('refinement-tabs', '#tabs', {
      attributeName: 'Product Type'
    });

    // Creates a pagination component with the default options
    var pagination = sdk.component('pagination', '#pagination')

    // Creates a loader
    var loader = sdk.component('loader', '#loader');

    // Links each creates component to the results in order to work properly
    results.linkTo(searchBox);
    results.linkTo(stats);
    results.linkTo(filters);
    results.linkTo(tabs);
    results.linkTo(pagination);
    results.linkTo(loader);
  </script>
</body>

</html>