SortRadioButtons

Overview

The "SortRadioButtons" component on an e-commerce page allows users to rearrange products displayed on a search results or product listing page in a specific order.

This feature helps users quickly find the most relevant or interesting products based on their needs and preferences. It enables users to easily identify products in a particular price range or newly added items, making it more convenient for them to find what they are looking for.

E-commerce websites often have a default sort order when a user visits a category or search results page but also provide users with the option to change and adjust the sort order as desired.

Usage

// importing component
import { SortRadioButtons } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/sortRadioButtons.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/sortRadioButtons.css")

Live Demo

// code for the above example
import { UnbxdSearchWrapper } from "unbxd-ui/react-search-hooks";
import { SortRadioButtons, Products } from "@unbxd-ui/react-search-components";
 
const SortIcon = ({ item }) => {
	const options = {
		desc: "https://imageUrl1.png",
		asc: "https://imageUrl2.png"
	}
 
	const sortItem = Object.keys(options).filter((key: string) => {
		return item && item.value?.toLowerCase().includes(key)
	})[0]
 
	return <div className="sort-option-item">
		<img src={options[sortItem]} alt="Sort Icon" />
		{item.label}
	</div>
}
 
// rendering the product grid
<UnbxdSearchWrapper>
	...
	<SortRadioButtons
		showLabel={true}
		label="Sort as:"
		options={[
			{
				value: "price desc",
				label: "High to Low",
			},
			{
				value: "price asc",
				label: " Low to High",
			},
		]}
		CustomComponent={SortIcon}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

Props

• The component that will be rendered for each radio button.
• Default Value:

const CustomComponent = (props) => {
	const { item } = props;
	return item;
};

• A boolean value which indicates if the label must be shown or not.
• Default Value: true.

• The text that must be shown as the label to the sorting component.
• Default Value: "Sort".

• The options that must be displayed as radio buttons.
• Default Value:

options={[
    {
        value: "price desc",
        label: "Price High to Low",
    },
    {
        value: "price asc",
        label: " Price Low to High",
    },
]}

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	wrapper: "sort-root",
    label: "sort-label",
    container: "sort-container",
    radioItem: "radio-item",
    inputBtn: "sort-button",
    inputLabel: "sort-input-label",
    selected: "selected",
}}

Related Hook

To use the Unbxd React Search SDK without the pre-built SortRadioButtons component, add the functionality to your custom component using the useSorting hook. Refer to the documentation for more details.

Related Components

Sort ButtonsSort Dropdown