<SortBy/>

A component for sort selection

Example

index.tsx

import {Results, ProductGrid,FastSimonApi,SearchBox,Filters,TopBar,ResultsSummary,SortBy} from "fast-component-library";
import React from "react";

export const App = () => {
    return (
        <FastSimonApi storeID={1} uuid={"rand-omuu-id12-3456"}>
             <header>
                Search: <SearchBox/>
            </header>
            <TopBar>
                <ResultsSummary/>
                <SortBy/>
            </TopBar>
            <Results>
                <Filters/>
                <ProductGrid/>
            </Results>
        </FastSimonApi>
    )
}

Props

Option	Type	Description
options	Record<SortOptions, string	undefined> (default=defaultOptions)
all select props	all select props	all select props
customClasses	CustomClasses	Custom classes for the SortBy elements

Types

import React from "react";
import {SortBy as SortOptions} from "fast-simon-sdk"

const defaultOptions: Record<SortOptions, string | undefined> = {
    "relevency": "Best Match",
    "creation_date": "New Arrivals",
    "a_to_z": "Alphabetical: A to Z",
    "z_to_a": "Alphabetical: Z to A",
    "price_min_to_max": "Price: Low to High",
    "price_max_to_min": "Price: High to Low",
    creation_date_oldest: undefined,
    popularity: undefined,
    reviews: undefined,
}

interface CustomClasses {
    option?: string
}

interface Props extends React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> {
    options?: Record<SortOptions, string | undefined>
    customClasses?: CustomClasses
}