Skip to main content

Modules overview

In Builderius modules are basic building blocks of the template.

Categories​

  1. Universal modules
  2. WordPress modules
  3. Content modules
  4. Layout modules
  5. Dynamic modules
  6. Interactive modules
  7. Form modules
  8. Table modules

Types​

All modules can be split into two types of modules:

  1. Standard modules. Modules of this type implement a specific standard HTML element.
  2. Interactive modules. Modules of this type are custom HTML elements. They are web components which implement modular approach.

API for the interactive modules​

Each of our interactive modules has a set of methods and emits events during its lifecycle. This should help in creating an advanced functionalities.

How to use​

First, we have to get an instance of the HTML element. Remember, each interactive element is a web component - a custom HTML element. It can be queried the same way as any standard HTML element. Examples:

  • var elInstance = document.querySelector('.someClass')
  • var elInstances = document.querySelectorAll('.someClass')

Then, the method could be fired like this elInstance.reInit().

Regarding events - there two events being emited each time. They exist in different scopes: in the scope of element itself or in the scope of window object. Those called on the element itself can be listened to like this:

elInstance.addEventListener('ready', function(e){
    console.log(e.detail);
});

where e.detail contains the custom data from the element. Refer to the docs for each specific case.

Those events called in the scope of window object can be listened to like this (example for Collection):

window.addEventListener('builderius-collection-ready', function(e){
    console.log(e.detail);
});

where e.detail contains the custom data from the element. Refer to the docs for each specific case.

Please, notice the difference in the event names! Those attached to the window object always prefixed with the name of the HTML element. This way it is easier to listen to, for instance, all collections on the page, and then filter out only the one that is needed by the reference to the element.