For dev - Product Sorting Component (App Lib V2)
This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.
In this article
1. Overview
1.1. Structure
Go to snippets/boost-pfs-filter-html.liquid file, find the Sorting Template as below:
- 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