For dev - Filter Tree Component
In this article
1. Overview
Instant Search Component binds events and renders a filter tree on .boost-pfs-filter-tree
on the collection/search pages
For example: You will find a div
with class boost-pfs-filter-tree
in sections/collection-template-boost-pfs-filter.liquid
or sections/collection-template.liquid
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v">{%- include 'boost-pfs-filter-skeleton', type: 'filter-tree' -%}</div>
- boost-pfs-filter-skeleton snippet is a placeholder while waiting for the filter tree to render
2. Settings on DOM attribute
- Class
boost-pfs-filter-tree-v
will show vertical filter tree
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>
- Class
boost-pfs-filter-tree-h
will show horizontal filter tree
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-h"></div>
- Attribute
data-is-mobile
will render the filter tree only on mobile screen - Attribute
data-is-desktop
will render the filter tree only on desktop screen - No attribute: will render on both mobile and desktop
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-h" data-is-desktop></div>
3. Settings in javascript
You can set these settings for the product list in boost-pfs-filter.js
, like so
// Override Settings var boostPFSFilterConfig = { general: { // Settings list limit: boostPFSThemeConfig.custom.products_per_page loadProductFirst: true, styleScrollToTop: 'style2' } };
Filter display settings