HomeGuidesAPI Reference
Guides

Hide filters in selected collections

Suggest Edits

Integration Steps

In certain circumstances, merchants might want to hide specific filters for specific collections.

This could be, for example, if you have a collection with 200 products but only 10 have a value for size filter - you want to remove the size filter for this collection.

Or, it could be that you have a large amount of filters. This is not a problem for niche collections, but if you have a particularly large collection then you might have 50 filters which is too much for a shopper to navigate through easily. In this case you might want to slim down the filtering options, but only for the larger collection.

Whatever the reason, Findify is able to accommodate this potential merchant requirement.

📘

Components

withHiddenFacets
components/Facet/index.tsx ( Desktop )
components/search/MobileFacets/Titles.tsx ( Mobile )

The steps are the following:

  • Create withHiddenFacets component.
  • Create a list of facets to hide in certain collections.
  • We determine the hidden facets for specific collection in the hiddenFacets variable.
  • Check if the current facet exists in the hiddenFacets array.
const withHiddenFacets = (facet) => {
  
  const list = [
    {
      collectionName: 'test-collection-2',
      facets: ['brand', 'size']
    }
  ];
  
  const hiddenFacets = list.find((el) => findify.utils.collectionPath().split(el.collectionName).length > 1)?.facets;

  return hiddenFacets?.find(name => name === facet.get('name'));
}

export default withHiddenFacets;

To filter our facets on desktop, we need to import and call our withHiddenFacets.

{/* ... some imports ... */}
import withHiddenFacets from 'withHiddenFacets';

{/* ... some code ... */}

return (
	{/* ... some code ... */}
  
  {/* add filter function with our withHiddenFacets functionality */}
  <MapArray
  	array={facets.filter(withHiddenFacets)}
		factory={Facet}
		config={config}
		isHorizontal={isHorizontal}
		onToggle={toggleFacet}
		openFacets={openFacets}
		keyAccessor={(i) => i.get('name')}
    />
  {/* ... some code ... */}
)

To filter our facets on mobile, we need to do the same as on desktop.

{/* ... some imports ... */}
import withHiddenFacets from 'withHiddenFacets';

{/* ... some code ... */}
return (  
  {/* ... some code ... */}
  
  {/* add filter function with our withHiddenFacets functionality */}
	<Branch
    config={config}
    theme={theme}
    selectFacet={selectFacet}
    active={facets.find((f) => f.get('name') === activeFacetName)}
    facets={facets.filter(withHiddenFacets)}
    condition={activeFacet}
    right={FacetTitles}
    left={FacetContent}
  />
  {/* ... some code ... */}
)

MJS Version

This module has been optimized for MJS version 7.1.25

Updated about 1 year ago