Skip to main content
For dev - How Theme Setup works (App Lib V2)
Thomas Ta avatar
Written by Thomas Ta
Updated over a week ago

⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.


Overview

  • There are 2 types of files:

    • Core files (DO NOT edit): the following files contains main logic of PFS app, please do not edit these because we will run regular patches to update them, and all custom code in here will be lost.

      • CSS: boost-pfs-general.css, boost-pfs-opt.css

      • JavaScript: boost-pfs-vendor.js, boost-pfs-core.js, boost-pfs-core-instant-search.js

    • Custom files: used to customize all our features (see more here)

  • We only include necessary files in pages when needed


How the app init

1. Include our resources in Header and Footer of HTML DOM

  • Header: boost-pfs-style.liquid - include CSS files, contain style of App

  • Footer: boost-pfs.liquid - include JS files, contain logic to build App elements and their behaviors

2. Load necessary settings into the JavaScript variable

In boost-pfs.liquid file, we bind all necessary settings from our app and Shopify to a JavaScript variable called boostPFSAppConfig that will be used in our logic then.

Boost PFSAppConfig

Params

Description

api

The API URLs for our various endpoints: Filter, Search, Suggestion and Analytics

shop

General info about the shop (domain, currency format, url, etc.)

general

Detailed information about the current page (current collection, tags, current locale, current currency, etc.)

settings

All settings of our app saved into a metafield: - namespace: bc-sf-fitler - key: settings - format: string (this is a json string that we will parse on page load)

3. Initialize App

Stil inside boost-pfs.liquid file, we call assets/boost-pfs-init.js file which is used to init all our elements: Filter, Instant Search (Suggestion) and Analytics

var boostPFS = new BoostPFS();
boostPFS.init();

if (typeof boostPFSConfig !== 'undefined' &&
typeof boostPFSConfig.general !== 'undefined' &&
typeof boostPFSConfig.general.isInitFilter !== 'undefined' &&
boostPFSConfig.general.isInitFilter === true) {
boostPFS.initFilter();
}

BoostPFS.jQ(window).on('load', function() {
boostPFS.initSearchBox();
boostPFS.initAnalytics();
});
  • A new instance of BoostPFS class is created. This is done only once on page load.

  • Init functions:

    • initFilter

      • call the filter API to get filter tree information.

      • render the filter tree where there is a certain div on the DOM.

    • initSearchBox

      • render the instant search suggestion where there is a certain div on the DOM.

      • the suggestion API is called when user starts typing in the box

    • initAnalytics:

      • init event bindings to send analytics data

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?