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.
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>