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
Settings on DOM attribute
Class
boost-pfs-filter-tree-vwill show vertical filter tree
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>
Class
boost-pfs-filter-tree-hwill show horizontal filter tree
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-h"></div>
Attribute
data-is-mobilewill render the filter tree only on mobile screenAttribute
data-is-desktopwill render the filter tree only on desktop screenNo attribute: will render on both mobile and desktop
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-h" data-is-desktop></div>
Settings in javascript
You can set these settings for the product list in boost-pfs-filter.js , like so
// Override Settings
var boostPFSFilterConfig = {
general: {
// Set the limit for products per page based on theme configuration
limit: boostPFSThemeConfig.custom.products_per_page,
// Determines whether products should be loaded when the page first loads
loadProductFirst: true,
// Style for the scroll-to-top functionality
styleScrollToTop: 'style2'
}
};
Filter display settings
