For dev - Filter Tree Mobile Component

In this article

1. Overview

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

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

1.2. 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 
    <code><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
    <code><div data-is-desktop></div>
    • On mobile: The element showing is the vertical filter tree
    <code><div data-is-mobile></div>

2. 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.
<code><div data-filter-tree-id="boost-pfs-filter-tree2"></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'
  }
};<br>

Filter display settings

4. 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) {}

Related Articles