Function useFacet

  • useFacet(
        facet: SearchTermsFacet,
    ): {
        active: boolean;
        selectedFiltersCount: number;
        toggleActive: () => void;
        toggleProductFilter: (
            field: string,
            value: string,
            active: boolean,
        ) => Promise<void>;
    }

  • Preact hook that import facet state to the component.

    Parameters

    • facet: SearchTermsFacet

    Returns {
        active: boolean;
        selectedFiltersCount: number;
        toggleActive: () => void;
        toggleProductFilter: (
            field: string,
            value: string,
            active: boolean,
        ) => Promise<void>;
    }

    • active: boolean

      Active value

    • selectedFiltersCount: number

      Selected filters count

    • toggleActive: () => void

      Toggle active function

    • toggleProductFilter: (field: string, value: string, active: boolean) => Promise<void>

      Toggle product filter function

    Example

    import { useFacet } from '@nosto/preact'

    export default () => {
        const { active, selectedFiltersCount, toggleActive, toggleProductFilter } = useFacet(facet)
        return (
            <li class={`ns-sidebar-dropdown ${active ? "ns-active" : ""}`}>
                <a
                    href="javascript:void(0)"
                    onClick={toggleActive}
                >
                    <span>{facet.name}</span>
                    {selectedFiltersCount > 0 && (
                        <span>{selectedFiltersCount}</span>
                    )}
                </a>
                <div>
                    <ul>
                        {facet.data?.map(value => (
                            <li key={value.value}>
                                <label>
                                    {value.value}
                                    <input
                                        type="checkbox"
                                        checked={value.selected}
                                        onChange={e => {
                                            e.preventDefault()
                                            toggleProductFilter(
                                                facet.field,
                                                value.value,
                                                !value.selected
                                            )
                                        }}
                                    />
                                </label>
                                <span>{value.count}</span>
                            </li>
                        ))}
                    </ul>
                </div>
            </li>
        );
    }

Settings

Member Visibility