Sort Facet items
Integration Steps
If you want to sort facet values alphabetically, in descending or ascending order, or create custom sorting, you would need to update the facet components.
Components
First of all, you need to create a list of facet titles that you want to sort. Go to components/Facet/index.tsx, create an array with facet titles, then pass down prop:
{/* ... some code ... */}
{/* Create a list of Facets you want to be sorted and sorting function */}
const arrayOfSortedFilters = ['brand', 'size'];
const sortingLogic = (a, b) => a.get('value').localeCompare(b.get('value'));
return (
{/* ... some code ... */}
<div className={theme.body} hidden={!isOpen}>
{/* Pass down prop */}
<Component
facet={item}
config={config}
isMobile={isMobile}
arrayOfSortedFilters={arrayOfSortedFilters}
sortingLogic={sortingLogic}
/>
</div>
</div>
);
};
Then you need to select the type of the Facet that you want to sort.
There are four of them:
- components/CategoryFacet/index.tsx
- components/CheckboxFacet/index.tsx
- components/RatingFacet/index.tsx
- components/ColorFacet/index.tsx
We will be sorting facet values alphabetically. In our example, we have a list with 'size' and 'brand' facets and they are of type: CheckboxFacet.
{/* ... some code ... */}
{/* Get arrayOfSortedFilters and sortingLogic props */}
export default ({
theme = styles,
config,
isMobile,
isExpanded: _isExpanded,
facet,
hidden,
arrayOfSortedFilters,
sortingLogic
}: ICheckboxFacetProps) => {
{/* ... some code ... */}
const items = useMemo(() => {
{/* Check if facet exists in list */}
const sortedFilter = arrayOfSortedFilters.filter((el) => el === facet.get('name').toLowerCase()).length > 0;
if (isExpanded && search) {
const regexp = new RegExp(escapeRegExp(search), 'gi');
{/* If facet needs to be sorted, we just add sort method to items */}
if(sortedFilter) {
return facet.get('values').filter((i) => regexp.test(i.get('value'))).sort(sortingLogic);
}
return facet.get('values').filter((i) => regexp.test(i.get('value')));
}
{/* If facet needs to be sorted, we just add sort method to items */}
if(sortedFilter) {
return facet.get('values').sort(sortingLogic);
}
return facet.get('values');
}, [search, isExpanded, facet]);
{/* ... some code ... */}
Here are the examples on how to use sort method in different Facet components.
{/* ... some code ... */}
{/* Get arrayOfSortedFilters and sortingLogic props */}
export default ({
theme = styles,
config,
facet,
hidden,
isMobile,
arrayOfSortedFilters,
sortingLogic
}: ICategoryFacetProps) => {
{/* ... some code ... */}
const sortedFilter = arrayOfSortedFilters.filter((el) => el === facet.get('name').toLowerCase()).length > 0;
{/* If facet needs to be sorted, we just add sort method to items */}
return (
{/* ... some code ... */}
<MapArray
config={config}
array={sortedFilter
? items.sort(sortingLogic)
: items}
factory={Item}
limit={!isExpanded && config.get('maxItemsCount', 6)}
isMobile={isMobile}
/>
{/* ... some code ... */}
);
};
{/* ... some code ... */}
{/* Get arrayOfSortedFilters and sortingLogic props */}
export default ({
facet,
hidden,
theme = styles,
isMobile,
config,
arrayOfSortedFilters,
sortingLogic
}: IColorFacetProps) => {
{/* ... some code ... */}
const sortedFilter = arrayOfSortedFilters.filter((el) => el === facet.get('name').toLowerCase()).length > 0;
{/* ... some code ... */}
{/* If facet needs to be sorted, we just add sort method to items */}
return (
{/* ... some code ... */}
<MapArray
config={config}
array={sortedFilter
? facet.get('values').filter((i) => mapping.has(i.get('value'))).sort(sortingLogic)
: facet.get('values').filter((i) => mapping.has(i.get('value')))}
factory={Item}
theme={theme}
isMobile={isMobile}
/>
</div>
);
};
{/* ... some code ... */}
{/* Get arrayOfSortedFilters and sortingLogic props */}
export default ({
theme = styles,
facet,
config,
hidden,
arrayOfSortedFilters,
sortingLogic
}: IRatingFacetProps) => {
{/* ... some code ... */}
const sortedFilter = arrayOfSortedFilters.filter((el) => el === facet.get('name').toLowerCase()).length > 0;
{/* If facet needs to be sorted, we just add sort method to items */}
const items = () => {
if(sortedFilter) {
return config.get('pullSelected')
? facet.get('values').filter((i) => !i.get('selected')).sort(sortingLogic)
: facet.get('values').sort(sortingLogic)
}
if(!sortedFilter) {
return config.get('pullSelected')
? facet.get('values').filter((i) => !i.get('selected'))
: facet.get('values')
}
}
{/* ... some code ... */}
return (
{/* ... some code ... */}
);
};
MJS Version
This module has been optimized forΒ MJS version 7.1.25
Updated 12 months ago