⚠️ 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)