fdk-filter-modal
You are reading an outdated document
Get the latest developer guides on Fynd Partners Help
This action component is used to provide the functionality of filters in the application’s pages, e.g. for providing filters in various listing pages for products, collection, brands and categories. This action component consist of all the functions required and all the props which will help in writing code block for listing pages in theme.
Props
Key | Type | Description |
---|---|---|
selected_item | number | consist of index of selected item |
updateSelectedItem | function | update selected filter index |
updateFilter | function | add/remove filter from applied filters and fetch new filters on the basis of resultant products and update router |
resetFilters | function | clear all applied filters and update router |
all_filters | Array | list of all filters available |
applyFilters | function | apply filters based on available filter array and fetch items and updates router |
search_text | string | search input value for seaching long filter items list |
filters | Array | available list of filters based on current selection |
getFilteredResults | function | this function get filter items based on search input |
updateSliderInfo | function | update slider value for range filters |
closeModal | function | clears available filters and sets filters to value set in store |
filtered_products_count | number | coutnt of Items available after applying a filter |
Functions
- updateSelectedItem(filter, index)
This function updates the variable for selected filter and selected filter index
* **filter:** this parameter consist of filter which needs to be updated
* **index:** this consist of the filter index of filter
- updateFilter(filter, index)
- filter: this parameter consist of filter which needs to be updated
- index: this consist of the filter index of filter
- getFilteredResults(searchText)
- searchText: This contains the value of searched filter which need to be searched from a long list of filters
- updateSliderInfo(strQuery, filter)
- strQuery: name of the filter
- filter: current range filter object
Example
<fdk-filter-modal>
<template slot-scope="filterModalData">
<ul>
<li
v-for="(filteritem, idx) in filterModalData.filters"
:key="idx + '-mobile'"
v-on:click="filterModalData.updateSelectedItem(
filteritem,idx);
mobileSearchText = '';">
//code for more filter related styles and information
</li>
</ul>
</template>
</fdk-filter-modal>