For dev - App Lib V2 Overview

In this article

An overview of app lib v2 component, component tree, and service. 
See also App JS Doc for a list of all classes and helpers

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

1. 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 is boostPFS, can be accessed publicly.

Example: type boostPFS into browser console, you will see:

The example, boostPFS component contains filter, with 2 filter trees, with 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

2. 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.

3. Helpers

Note: 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)

For a list of all helpers, see: ‣

Related Articles