HomeGuidesAPI Reference

Sort Facet items

Suggest Edits

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 6 months ago