Hide filters in selected collections
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 12 months ago