Product Sorting Component

1. Overview

1.1. Structure

Go to snippets/boost-pfs-filter-html.liquid file, find the Sorting Template as below:

https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/5f0c327604286306f806a4d6/file-GAlN7i3OjM.png

  • sortingHtml : the html of Sorting.

1.2. How it runs

The sorting is rebuilt with JS when the page is loaded, or when filtering.

The list of sorting options are defined in Apps > Product Filter & Search > Manage Sort by Options


2. DOM element

Pagination Component renders the pagination on .boost-pfs-filter-top-sorting on collection/search page

For example: You will find a div like this in sections/collection-template-boost-pfs-filter.liquid

<div class="boost-pfs-filter-top-sorting"></div>

3. Settings in javascript

Product List Settings

Name Type Values Default Description
sortingList array 'relevance' 'best-selling' 'manual' 'price-ascending' 'price-descending' 'title-ascending' 'title-descending' 'created-descending' 'created-ascending' List of all sorting options
customSortingList array [] List of custom sorting list (subset of sortingList). Used to customize sorting options depending on collections.
extraSortingList array [] Extra sorting (not in sortingList), set in BE dashboard. Enable by custom request.
sortingAvailableFirst boolean true false false Sort available product first.

4. How to customize

See: Product Sorting Customization