Skip to main content

For dev - How to build Filter on Collection/Search page (App Lib V2)

Thomas Ta avatar
Written by Thomas Ta
Updated over a month ago

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 theme

    • snippets/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 lib

      • assets/boost-pfs-core.js : JS lib file for filter

      • assets/boost-pfs-init.css.liquid : CSS lib file for critical CSS for filter

      • assets/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 filter

      • assets/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 into

    • Rebuilds product item, pagination, sorting, collection info

  • Inserts these HTML back into the DOM

Related Articles
For dev - Advanced Definition of Theme Setup (App Lib V2)
For dev - Advanced Setup (Match theme's collection page layout) (App Lib V2)
For dev - Product List Component (App Lib V2)
For Dev - Pagination Customization (App Lib V2)
For Dev - Product Sorting Customization (App Lib V2)
Did this answer your question?