cmsfilter
Attribute
Create advanced and complex no-code filter systems inside Webflow CMS.
CDN Import
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
JavaScript API
You can access the cmsfilter
instances by pushing a callback into the window.fsAttributes
object:
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
const [filterInstance] = filterInstances;
filterInstance.listInstance.on('renderitems', (renderedItems) => {
console.log(renderedItems);
});
},
]);
The callback passes an array with all the CMSFilters
instances on the page.
CMSFilters
instance
To see more about the CMSList
instance, check the cmscore
docs.
interface CMSFilters {
readonly formBlock: HTMLDivElement;
readonly listInstance: CMSList;
readonly form: HTMLFormElement;
readonly resultsElement: HTMLElement;
readonly resetButtonsData: Map<HTMLElement, string[]>;
readonly submitButton?: HTMLInputElement;
filtersData: FilterData[];
filtersActive?: boolean;
submitButtonVisible: boolean;
tagsInstance?: CMSTags;
readonly showQueryParams: boolean;
readonly activeCSSClass: string;
readonly debouncing: number;
readonly highlightAll: boolean;
readonly highlightCSSClass: string;
storeFiltersData(): FilterData[];
applyFilters(addingItems?: boolean, syncTags?: boolean): Promise<void>;
resetFilters(filterKeys?: string[], value?: string): Promise<void>;
public destroy(): void;
}
FiltersData
store
The CMSFilters
instance stores all the current filters data inside the CMSFilters.filtersData
property:
interface FilterData {
elements: FilterElement[];
originalFilterKeys: string[];
filterKeys: string[];
values: Set<string>;
match?: 'any' | 'all';
mode?: 'range';
highlight: boolean;
highlightCSSClass: string;
tagFormat?: 'category';
tagCategory: string | null;
}
interface FilterElement {
element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
value: string;
type: string;
resultsCount: number;
resultsElement?: HTMLElement | null;
hideEmpty?: HTMLElement;
hidden: boolean;
mode?: 'from' | 'to';
activeCSSClass: string;
debouncing: number;
}