fdk-filter-modal

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

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.

Key	Type	Description	payload
selected_item	number	Consists of index of selected item
updateSelectedItem	function	Updates selected filter index	updateSelectedItem()
updateFilter	function	Add/remove filter from applied filters and fetch new filters on the basis of resultant products and update router	updateFilter()
resetFilters	function	Clear all applied filters and update router	resetFilters()
all_filters	Array	List of all filters available
applyFilters	function	Apply filters based on available filter array and fetch items and updates router	applyFilters()
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 gets filter items based on search input	getFilteredResults()
updateSliderInfo	function	Updates slider value for range filters	updateSliderInfo()
closeModal	function	Clears available filters and sets filters to value set in store	closeModal()
filtered_products_count	number	Count 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

Key	Type	Description
selected_item	number	Consists of index of selected item.
updateSelectedItem	function	Updates the selected filter index.
updateSelectedItem(filter, index)	function	filter: This parameter consists of filter that needs to be updated. index: This consists of index of the filter.
updateFilter	function	Add/remove filter from applied filters and fetch new filters on the basis of resultant products and update router.
updateFilter(filter, index)	function	filter: This parameter consists of filter that needs to be updated. index: This consists of index of the filter.
resetFilters	function	Clears all applied filters and updates the router.
all_filters	array	List of all filters available.
applyFilters	function	Applies filters based on available filter array and fetches items and updates the router.
search_text	string	Search input value for searching long filter items list.
filters	array	Available list of filters based on current selection.
getFilteredResults	function	This function gets filter items based on the search input.
getFilteredResults(searchText)	function	searchText: This parameter contains the value of searched filter that needs to be searched from a long list of filters.
updateSliderInfo	function	Updates the slider value for range filters.
updateSliderInfo(strQuery, filter)	function	strQuery: Name of the filter. filter: Current range filter object.
closeModal	function	Clears available filters and sets filters to value set in store.
filtered_products_count	number	Count 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>