Skip to main content
For dev - Product Sorting Component (App Lib V2)
Thomas Ta avatar
Written by Thomas Ta
Updated over 6 months ago

⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.


Overview

Structure

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

  • sortingHtml : the html of Sorting.

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 > Boost AI Search & Discovery > General Settings > Sort by Options


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>


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.


How to customize

If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].

Did this answer your question?