Shop
Sort Modes
Sort selector for product listing pages, wrapping a select of named sort modes.
Overview
SortModes is the sort selector for product listing pages. It wraps a labeled Select of named sort modes (Newest, Price ascending, Price descending, Best sellers) and exposes the current selection through v-model:active-sorting. Pass the options array as available-sortings. Pair it with ProductListingGrid and FilterBar to assemble the listing chrome.
Auto-import tag: <LSortModes>.
Key Business & UX Benefits
- Named sort modes (Newest, Price ascending, Price descending, Best sellers) match the way shoppers actually think about listings, lifting the rate at which they re-order results.
- A single select with a clear label is far less error-prone than custom column-header sorting, which protects mobile usability where most shopping now happens.
- Defining sort options as data on
available-sortingslets merchandising add or rename modes (Editor's pick, Most reviewed) without touching listing code.
Usage
SortModes Default
<SortModes v-model:active-sorting="currentSort" :available-sortings="sortOptions" />
Feature List
- Named sort modes (Newest, Price ascending, Price descending, Best sellers) match how shoppers actually re-rank listings
- v-model:active-sorting surfaces the current selection so the parent page can fetch fresh results without prop drilling
- available-sortings prop takes the option list as data, so merchandising can add or rename modes (Editor's pick, Most reviewed) without code
- Single labelled Select keeps mobile usability clean compared with column-header sorting
- Pairs with ProductListingGrid and FilterBar to compose the full listing chrome from small parts
API Reference
| Prop | Default | Type |
|---|---|---|
availableSortingsrequired | SortMode[] { value, label } | |
activeSorting | string | |
buttonVariant | ghost-black | ButtonVariant ("primary" | "secondary" | 12 more) |
| Event | Type |
|---|---|
update:activeSorting | (event: "update:activeSorting", value: string): void |