<Filters/>

A filters component

Example

index.tsx

import {Results, ProductGrid,FastSimonApi,SearchBox,Filters} from "fast-component-library";
import React from "react";

export const App = () => {
    return (
        <FastSimonApi storeID={1} uuid={"rand-omuu-id12-3456"}>
             <header>
                Search: <SearchBox/>
            </header>

            <Results>
                <Filters/>
                <ProductGrid/>
            </Results>
        </FastSimonApi>
    )
}

Props

Option	Type	Description
className	string	Main wrapper custom class
loader	React.ReactNode (default= )	Product card id
renderFilter	RenderFilterFunc	render a custom filter. undefined will render default
redirectType	RedirectType	single-page - will use to url, multi page will redirect to url directly
removableTags	boolean (default=true)	show selected filter tags on the top of the filter
removableTagsCustomClasses	RemovableTagsCustomClasses	Custom classes for the removable tags
removableTagsCloseIcon	React.ReactNode	Custom close icon for the removable tags
onCategoryFilterClick	(category: FastCategory) => void	callback when a category filter is clicked (collection only)

Types

import {CategoryFacetValue, FacetValue, Narrow} from "fast-simon-sdk"
import React from "react";

type RenderFilterFunc = ({}: { id: string, values: FacetValue[] | CategoryFacetValue[], name: string, setNarrow: (narrow?: Narrow[]) => void }) => React.ReactNode

interface RemovableTagsCustomClasses {
    wrapper?: string
    item?: string
    clearAll?: string
}

References

1. AddToCart
2. Badges
3. Swatches