fdk-compare-search
Compare Search Action Component
Tag
fdk-compare-search
Description
This action component can be used to provide the facility of searching products on the products compare page, so that the users can add those products for search.
Props
Key | Type | Description | Param |
---|---|---|---|
suggestions | array | This is the list of result of the searched data or initial data while no text is searched. | |
no_results | boolean | When no product is found for the entered search text, this flag turns true. | |
executeQuery | function | Handler to display the list of products with any query searchText. All the resultant products will be available into suggestions prop. | searchText |
executeQuery(searchText) | function | Here searchText is the entered product name which need to be searched. This function will push the searched text into the router. | |
fetchSuggestions | function | Handler to fetch searchResults for given searchText | {"search":"","filter":{"l3_categories":"smartphones"},"pageSize":15} |
fetchSuggestions({ search: ‘’, filter: { l3_categories: ‘smartphones’ },pageSize: 15}) | function | search: This is the text for which products will be searched. filter: This is the object that contains the filter, on which the product will be searched. pageSize: This stores the value of required elements in the suggestions prop. | |
filter | object | This prop contains the filter which can be of a particular category for which the products will be fetched for comparison |
Example
<fdk-compare-search :pageSize="10"
:filter="{ l3_categories: firstCategory }">
<template slot-sope="compareSearchData">
<input
type="text"
v-model="searchText"
@keydown.enter.prevent
@keyup.enter="compareSearchData.executeQuery(search)"
@input="compareSearchData.fetchSuggestions({ search: this.searchtext, pageSize: 15 })"
placeholder="Search for products here"
/>
//code for further display search results using **suggestions** prop
</template>
</fdk-compare-search>
<fdk-search class="hamburger__search" :has_products="true">
<template slot-scope="searchData">
<input
class="search__input mobile"
type="text"
v-model="searchtext"
placeholder="Search Products"
@keyup.enter="getEnterSearchDataMobile(searchData)"
/>
<div
class="icon"
@click="
searchData.executeQuery(searchtext);
searchtext = '';
showHamburger = false;
"
>
<svg-wrapper
class="search-icon mobile-icon header-icon"
:svg_src="'search'"
></svg-wrapper>
</div>
</template>
</fdk-search>