Overview
Filter Tree Mobile Button
Filter Tree Mobile Button Component binds events and renders a filter tree on .boost-pfs-filter-tree-mobile-button on the collection/search pages
For example: You will find a div with class boost-pfs-filter-tree-mobile-button in sections/collection-template-boost-pfs-filter.liquid or sections/collection-template.liquid
<div>{%- include 'boost-pfs-filter-skeleton', type: 'button' -%}</div>boost-pfs-filter-skeleton snippet is a placeholder while waiting for the button to render
What it does:
Clicking the button will show/hide the filter tree on mobile
Filter Tree Mobile
How mobile filter tree is shown:
With filter tree vertical: The mobile filter tree and the desktop filter tree is the same element, only styled differently
<div></div>
With filter tree horizontal: The mobile filter tree and the desktop filter tree are different elements
On desktop: The element showing is the horizontal filter tree
<div data-is-desktop></div>
On mobile: The element showing is the vertical filter tree
<div data-is-mobile></div>
Settings on DOM attribute
In case there are multiple filter trees on the page, and you want to bind the mobile button to toggle a specific one, use this attribute on the mobile button
data-filter-tree-id: The filter tree id to toggle. By default it toggles the first Vertical filter tree.You can get the filter tree id by inspecting the filter tree DOM element.
<div data-filter-tree-id="boost-pfs-filter-tree2"></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 number of products per page as defined in the theme configuration
limit: boostPFSThemeConfig.custom.products_per_page,
// Determines whether products should be loaded first when the page loads
loadProductFirst: true,
// Specifies the style for the scroll-to-top functionality
styleScrollToTop: 'style2'
}
};
Filter display settings
How to customize
Filter tree styles: you can pick from one of these styles that most matched the style you want, and restyle them with CSS
Settings: filterTreeMobileStyle
style1: slide toggle up/down the filter tree
style2: overlay from the right, click on filter option leads to list of filter items (default)
style3: overlay from the right, click on filter option slides toggle up/down list of filter items
style4: full-screen filter tree, click on filter option leads to full-screen list of filter items
If you've changed the style of the filter on desktop, and want to keep the same style on mobile, use style1 as this won't apply any extra CSS to the filter tree.
Overriding events: Override this functions in boost-pfs-filter.js to interrupt the clicking event and use your own logic:
FilterMobileButton.prototype.onClick = function(event) {}
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].