Facets

Overview

"Facets" are a key component of e-commerce websites, enabling users to filter products based on specific attributes like categories, price ranges, colors, and more. They enhance the user experience by making it easier to navigate and find products that match specific criteria.

Facets allow users to narrow down their search results by selecting from various attributes. These attributes can be rendered in different formats depending on the type of facet and the user interface design.

Usage

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

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

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

Display Options

1. Accordion

In Accordion mode, the component presents content in a collapsible format, where each section can be expanded or collapsed individually. This is particularly useful for organizing large amounts of information, allowing users to focus on one section at a time while keeping the rest of the content hidden. It's ideal for FAQs, multi-step processes, or any situation where space management is crucial.

2. Dropdown

In Dropdown mode, the component displays a list of options that can be revealed by clicking on a trigger element, such as a button or label. This format is perfect for scenarios where a user needs to make a selection from a predefined list of choices without taking up much screen space. Dropdowns are commonly used in forms, filters, and navigation menus, offering a streamlined and intuitive user experience.

Ways to use Facets

1. Facets Component

The Facets component is designed to render the UI for all facets received from the API response. It ensures that the facets are displayed in the order configured in the console, providing a streamlined and consistent user interface.

When to Use

• Use the Facets component if you want to display all the facets returned by the API in the exact order specified in the console.

Usage

• Use just wrapper to render the facets as it is with default behaviour by the sdk.

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { Facets, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
	<Facets/>
	<Products />
	...
</UnbxdSearchWrapper>

or

• Pass the configs , exclude and overrides to configure more .
  • configs : Pass in all the configurations to customize the behaviour of the facets.
  • exclude: Pass the facets names which you would like to exclude from being rendered.
  • overrides: If you want to render a different compoenent for some particular facet , pass it here.

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { Facets, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
	<Facets
		configs={{
			defaultOpen: false,
			renderAs: "dropdown",
			searchable: true,
			placeholder: "Enter priyal",
			multiselect: true,
			isCollapsible: true,
			applyAll: true,
			applyAllLabel: "all f",
			clearBtn: true,
			clearBtnLabel: "clear f",
			showSelectedFacets: true,
			viewMoreLimit: 4,
			showRemainingNumber: true
		}}
		exclude={["mirror_uFilter", "v_color_uFilter"]}
		overrides={{
			"price": <RangeFacet
				isMultiSlider={true}
				name="price"
				renderAs="dropdown"
				isCollapsible={true}
				defaultOpen={true}
				showInputLabels={true}
				showSelectedValues={true}
				min={200}
				max={500}
				showInputBoxes={true}
				step={100}
			/>
		}}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

2. Use Individual Components

• Use individual facet components (CheckboxFacet, RadioButtonFacet, MultilevelFacet, RangeFacet) if you need to:
  1. Override the order configured in the console.
  2. Customize the appearance or behavior of specific facets.

This component is ideal for maintaining consistency while allowing flexibility through direct use of individual facet components when needed.

1. Text Facets

• Text Facets provide a way to filter products based on textual attributes such as brand names, sizes, colors, or any other text-based characteristic. These facets can be rendered in multiple formats, allowing for a versatile and customized filtering experience.

• Related Components:

Button FacetCheckbox FacetRadio Button Facet

2. Multilevel Facets

• Multilevel Facets allow users to filter products based on predefined categories, helping them navigate through different types of products or services. These facets often appear as a hierarchical tree or a list, depending on the depth and structure of the categories.

• Related Components:

Multilevel Facet

3. Range Facets

• Range Facets are used to filter products based on a numerical range, such as price, ratings, or any other measurable attribute. These facets are particularly useful when users need to select a range of values instead of a single value.

• Related Components:

Range Facet

Other Components

This component displays the currently selected filters.

Selected Facets

Related Hook

To use the Unbxd ReactJS SDK without the pre-built SelectedFacets component, add the functionality to your custom component using the useFacets hook. Refer to the documentation for more details.