Skip to main content
For dev - App Lib V2 Overview

An overview of app lib v2 component, component tree, and service.

Thomas Ta avatar
Written by Thomas Ta
Updated over 5 months ago

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

  • this.parent : parent component

  • this.init() : creates children components, is called once.

  • this.compileTemplate() : returns HTML string

  • this.render() : creates DOM element from HTML string in compileTemplate, and assign it to this.$element

  • this.bindEvents() : bind events to this.$element

  • this.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].

Did this answer your question?