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>