⚠️ See App JS Doc for a list of all classes and helpers.
This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Base Structure
Every element in app lib v2 is a Component (filter tree, filter option, filter items,...).
These components are nested as parent/children.
The root component,
boostPFS
, can be accessed publicly.
Example: type boostPFS
into browser console, you will see:
The example, boostPFS
component contains filter, with 2 filter trees, and 13 filter options
Each component has these field/function:
this.$element
: the DOM element of this component.this.children
: array of children componentsthis.parent
: parent componentthis.init()
: creates children components, is called once.this.compileTemplate()
: returns HTML stringthis.render()
: creates DOM element from HTML string in compileTemplate, and assign it to this.$elementthis.bindEvents()
: bind events to this.$elementthis.refresh()
: call the refresh cycle on this component and its children
The refresh cycle
On page load:
init element and children
When user interact with the filter/search:
get API data → render element and children → bind events on elements and children
Example: after getting data from API, app lib call boostPFS.filter.refresh()
The component tree looks like this
boostPFS
filter
filterTree
filterOption
filterOptionItem
Function call order (from children to parent)
→ filterOptionItem.render()
→ filterOption.render()
→ filterTree.render()
→ filter.render()
→ filterOptionItem.bindEvents()
→ filterOption.bindEvents()
→ filterTree.bindEvents()
→ filter.bindEvents()
There are beforeInit
, afterInit
, beforeRender
, afterRender
, beforeBindEvents
, afterBindEvents
functions for customization.
Helpers
⚠️ These variables can be accessed in a scope that has the call BoostPFS.inject(this)
See theme lib's boost-pfs-filter.js
file for example. Globals: global info. Ex: Globals.queryParams, Globals.shopDomain, Globals.moneyFormat,....
Settings: settings.
Ex: Settings.loadProductFirst = true
Labels: labels.
Ex: Labels.search.resultEmpty = "Your search for {{ terms }} didn't match any results"
Selector: selector for big elements, like filter tree.
Ex: Selector.filterTree = '.boost-pfs-filter-tree'
Class: css class names for our app
Ex: Class.filterOption = 'boost-pfs-filter-option'
Utils: utils functions
Ex: Utils.optimizeImage(imageUrl, size)
Utils.formatMoney(money, format, withoutTrailingZeros)
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].