Multilevel Facet

Overview

The MultilevelFacet component provides a dynamic way to display and navigate through product categories on an e-commerce website. Whether you need a simple list of categories or a more complex hierarchical tree structure, this component is versatile enough to handle both. It allows users to easily drill down into specific categories, making it simpler for them to find the products they are looking for. With features like expandable categories, custom selection handling, and default expanded states, this component is a powerful tool for organizing and presenting your product catalog.

Usage

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

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

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

Live Demo

1. Multilevel Facet As Dropdown

The facet component is rendered in the form of a dropdown.

// This is a sample code for above example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-hooks";
import { Breadcrumb, MultilevelFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchCSRWrapper>
	...
	<SelectedFacets />
	<Breadcrumb name="categoryPath" />
	<MultilevelFacet name="categoryPath" showAllParents={true} defaultOpen={false} renderAs="dropdown" />
	<Products />
	...
</UnbxdSearchCSRWrapper>

2. Multilevel Facet As Accordion

The facet component is rendered in the form of a accordion.

// This is a sample code for above example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-hooks";
import { Breadcrumb, MultilevelFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchCSRWrapper>
	...
	<SelectedFacets />
	<Breadcrumb name="categoryPath" />
	<MultilevelFacet 
		name="categoryPath" 
		showAllParents={true} 
		defaultOpen={true} 
		renderAs="accordion" 
		styles={{ 
			root: "facets-root",
			header: "facets-header",
			displayName: "facets-displayName",
			icon: "facets-icon",
			body: "facets-body",
		}} 
	/>
	<Products />
	...
</UnbxdSearchCSRWrapper>

Props

• The name of the facet in the feed for which you want to display the component.

• Determines if all the parent levels of the selected category value must be shown. If it is true, all parent level values are shown, else only the immediate parent level value will be shown.
• Default Value: true.

• The way in which the component must be displayed.
• Values: accordion OR dropdown.
• Default Value: accordion.

• Determines if the component must view all the options by default or not.
• Default Value: true.

• Determines if the component must view all the facet values by default or not.
• Default Value: true.

• Specifies whether a button should be provided to clear all applied facets at once.
• Default Value: true.

• he text to be displayed on the clearAll button.
• Default Value: Clear.

• Specifies whether the selected facets for a particular facet name should be displayed within the facets component.
• Default Value: true.

• Specifies whether the view more button should be displayed.
• Default Value: false.

• Specifies the number of facet values to display, hiding any additional values beyond this limit.
• Default Value: 0.

• A custom component that has to return a clickable element to display all facet values beyond the set limit.
• This is only functional if viewMoreLimit is set to a value greater than 0.
• Default Value:

const ViewMoreComponent = ({ showRemainingNumber, remainingNumber, styles }) => {
	return <div className={styles?.showMore}>{showRemainingNumber ? `+${remainingNumber} more`: `+ show all`}</div>;
}

• A custom component that has to return a clickable element, which when clicked will render only the viewMoreLimit number of facet values.
• Default Value:

const ViewLessComponent = ({ styles }) => {
	return <div className={styles?.showLess}>-show less</div>;
};

• This configuration is used by the ViewMoreComponent to display the remaining number in the 'view more' text, e.g., '+25 more'.
• If this is not enabled, only simple text will be shown, e.g., 'view more'.

• The IconComponent prop allows you to pass a custom icon component that will be displayed alongside the facet name in the facet header. This provides a way to visually enhance the facet presentation, making it more intuitive and aligned with your application's design.
• Default Value:

const IconComponent = ({ styles }) => {
	return <div className={styles?.icon}>&#8964;</div>;
};

• The component that will be used as the facets component activator. Clicking this will show/hide the facet values.
• Default Value:

const ActivatorComponent = ({ selected, styles }: { selected?: any, styles: any }) => {
	return <div className={styles?.activatorWrapper || defaultSortDropdownProps.styles?.activatorWrapper}>
		<div className={styles?.activatorText || defaultSortDropdownProps.styles?.activatorText}>
			{typeof selected == "object" ? selected.label : "Select"}
		</div>
		<div className={styles?.activatorIcon || defaultSortDropdownProps.styles?.activatorIcon}>
			&#8964;
		</div>
	</div>
}

• 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={{
	root: "facets-root", // used for the facet component wrapper
	header: "facets-header", // used for the facet header
	displayName: "facets-displayName", // used for the facet name in the header
	icon: "facets-icon", // used for the toggle collapsible icon
	body: "facets-body", // used for the facet values wrapper
}}

Related Hook

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

Related Components

Button FacetCheckbox FacetRadio Button FacetRange FacetSelected FacetsBreadcrumb