This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Related files
Template Files:
sections/collection-xxx.liquid
: This might be different depending on the theme ****(collection-template.liquid, collection.liquid, collection-template-boost-pfs-filter.liquid, etc.)templates/search.liquid
,sections/search-template-boost-pfs-filter.liquid
: This might be different depending on the themesnippets/boost-pfs-filter-html.liquid
,snippets/boost-pfs-filter-pagination.liquid
,snippets/boost-pfs-filter-product-item.liquid
,snippets/boost-pfs-filter-product-item-list.liquid
: These will be the templates to rebuild product item, pagination, sorting DOM elements after filtering. ****
PFS Resource Files:
Core files (Minified and DO NOT edit)
assets/boost-pfs-vendor.js
: JS lib file for 3rd party libassets/boost-pfs-core.js
: JS lib file for filterassets/boost-pfs-init.css.liquid
: CSS lib file for critical CSS for filterassets/boost-pfs-general.css.liquid
: CSS lib file for non-critical CSS for filter
Custom files:
assets/boost-pfs-filter.js
: JS file for customizing filterassets/boost-pfs-custom.css.liquid
: CSS file for customizing filter + instant search
How it runs
⚠️ This part is crucial in customizing themes.
After filtering, the app rebuilds the product items (originally loaded by liquid) by JavaScript. To achieve that:
When the page is loaded:
sections/collection-template-boost-pfs-filter.liquid
will be loaded.At the end of this file, before the
boostPFSThemeConfig: Reads the theme's config, label, etc, into javascript variable
boostPFSTemplate: Reads the liquid templates from the snippets (stated above) into javascript variables, as strings
After the page is loaded:
The app renders filter tree where there is a certain div on
sections/collection-template-boost-pfs-filter.liquid
After the filter is clicked, and API returned results:
Calls the functions in
Use
boostPFSThemeConfig
,boostPFSTemplate
variables as templates to put product data intoRebuilds product item, pagination, sorting, collection info
Inserts these HTML back into the DOM
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].