Skip to main content


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.


selected_itemnumberconsist of index of selected item
updateSelectedItemfunctionupdate selected filter index
updateFilterfunctionadd/remove filter from applied filters and fetch new filters on the basis of resultant products and update router
resetFiltersfunctionclear all applied filters and update router
all_filtersArraylist of all filters available
applyFiltersfunctionapply filters based on available filter array and fetch items and updates router
search_textstringsearch input value for seaching long filter items list
filtersArrayavailable list of filters based on current selection
getFilteredResultsfunctionthis function get filter items based on search input
updateSliderInfofunctionupdate slider value for range filters
closeModalfunctionclears available filters and sets filters to value set in store
filtered_products_countnumbercoutnt of Items available after applying a filter


  • 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


<template slot-scope="filterModalData">
v-for="(filteritem, idx) in filterModalData.filters"
:key="idx + '-mobile'"
mobileSearchText = '';">

//code for more filter related styles and information