For dev - How to build Filter on Collection/Search page
In this article
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
- Core files (Minified and DO NOT edit)
How it runs
Important: Understanding this part is crucial in customizing themes.
After filtering, the app rebuilds the product items (originally loaded by liquid) by javascripts. 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
schema
tag, we declare 2 javascript variables:- 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
boost-pfs-filter.js
to rebuild the product's HTML- Use boostPFSThemeConfig, boostPFSTemplate variables as templates to put product data into
- Rebuilds product item, pagination, sorting, collection info
- Inserts these HTML back into the DOM