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

In this article

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.

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

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
    • 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