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

Related Articles