Product View Buttons

Overview

The SDK includes a feature that allows users to customize the product display on the Search Results Page (SRP) by selecting from various view options. For example, if the user provides options such as "grid" and "list," the products will be arranged accordingly—displayed in a grid layout when "grid" is selected, or in a list format when "list" is chosen. This flexibility ensures that the product presentation aligns with the user's preferences.

How it Works ?

When the user selects an option from the product view, the state is updated with the corresponding view. The Products component then applies this view from the state as a class to the wrapper, allowing CSS to adjust the appearance and alignment of the products accordingly.

Usage

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

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

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

⚠️

Note:

The ProductViewRadioButtons component must be used within the wrapper (in CSR, SSR and Custom Hooks approaches) to ensure that the component and the search functionality work properly.

Live Demo

There are no products for this query.

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { ProductViewRadioButtons, Products } from "@unbxd-ui/react-search-hooks";
 
<UnbxdSearchWrapper>
	...
	<ProductViewRadioButtons
		showLabel={true}
		label={"VIEW"}
		options={[{label: "GRID", value: "GRID"},{label: "LIST", value: "LIST"}]}
		styles={{
			root: "root",
			label: "label",
			container: "view-container",
			radioItem: "view-radio-item",
			inputBtn: "view-button",
			inputLabel: "view-input-label",
			selected: "selected"
		}}
        CustomComponent={CustomComponent} // pass in a react component here.
	/>
	...
</UnbxdSearchWrapper>

Props

CustomComponent

component

This component renders each button and receives the clicked option in its props as item. For e.g., {label: "GRID", value: "GRID"}.
Example component:

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

showLabel

required

boolean

A boolean value which indicates if the label must be shown or not. By default, the value is true.

label

string

The text that must be shown as the label to the view component.

options

required

array

The options that must be displayed in the dropdown. The options must be of the form:

options={[
	{
		value: "GRID",
		label: "GRID",
		classname: "gridClass"
	},
	{
		value: "LIST",
		label: "LIST",
		classname: "listClass"
	}
]}

💡

Note:

The classname provided in the options is applied as a class to the products wrapper.

styles

optional

object

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: "view-root",
    label: "view-label",
    container: "view-container",
    radioItem: "view-radio-item",
    inputBtn: "view-button",
    inputLabel: "view-input-label",
    selected: "selected",
}}

Related Hook

useProductView

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

useProductView

Related Components

Product view dropdown

Product view buttons

Product View Buttons Sort