Skip to main content

fdk-filter-modal

Filter Modal Action Component

Tag

fdk-filter-modal

Description

This action component is used to provide the functionality of filters in the application pages, e.g. for providing filters in various listing pages for products, collection, brands and categories. This action component consists of all the functions required and all the props which will help in writing code block for listing pages in the theme.

KeyTypeDescriptionpayload
selected_itemnumberConsists of index of selected item
updateSelectedItemfunctionUpdates selected filter indexupdateSelectedItem()
updateFilterfunctionAdd/remove filter from applied filters and fetch new filters on the basis of resultant products and update routerupdateFilter()
resetFiltersfunctionClear all applied filters and update routerresetFilters()
all_filtersArrayList of all filters available
applyFiltersfunctionApply filters based on available filter array and fetch items and updates routerapplyFilters()
search_textstringSearch input value for seaching long filter items list
filtersArrayAvailable list of filters based on current selection
getFilteredResultsfunctionThis function gets filter items based on search inputgetFilteredResults()
updateSliderInfofunctionUpdates slider value for range filtersupdateSliderInfo()
closeModalfunctionClears available filters and sets filters to value set in storecloseModal()
filtered_products_countnumberCount of items available after applying a filter

Functions

Description

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.It consists of all the functions required and all the props which will help in writing code block for listing pages in theme.

This function updates the variable for selected filter and selected filter index

  • filter: This parameter consists of the filter that needs to be updated.
  • index: This consists the index of filter.

Props

KeyTypeDescription
selected_itemnumberConsists of index of selected item.
updateSelectedItemfunctionUpdates the selected filter index.
updateSelectedItem(filter, index)functionfilter: This parameter consists of filter that needs to be updated.
index: This consists of index of the filter.
updateFilterfunctionAdd/remove filter from applied filters and fetch new filters on the basis of resultant products and update router.
updateFilter(filter, index)functionfilter: This parameter consists of filter that needs to be updated.
index: This consists of index of the filter.
resetFiltersfunctionClears all applied filters and updates the router.
all_filtersarrayList of all filters available.
applyFiltersfunctionApplies filters based on available filter array and fetches items and updates the router.
search_textstringSearch input value for searching long filter items list.
filtersarrayAvailable list of filters based on current selection.
getFilteredResultsfunctionThis function gets filter items based on the search input.
getFilteredResults(searchText)functionsearchText: This parameter contains the value of searched filter that needs to be searched from a long list of filters.
updateSliderInfofunctionUpdates the slider value for range filters.
updateSliderInfo(strQuery, filter)functionstrQuery: Name of the filter.
filter: Current range filter object.
closeModalfunctionClears available filters and sets filters to value set in store.
filtered_products_countnumberCount of items available after applying a filter.

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>

Was this section helpful?