Skip to main content

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

KeyTypeDescriptionParam
suggestionsarrayThis is the list of result of the searched data or initial data while no text is searched.
no_resultsbooleanWhen no product is found for the entered search text, this flag turns true.
executeQueryfunctionHandler to display the list of products with any query searchText. All the resultant products will be available into suggestions prop.searchText
executeQuery(searchText)functionHere searchText is the entered product name which need to be searched. This function will push the searched text into the router.
fetchSuggestionsfunctionHandler to fetch searchResults for given searchText {"search":"","filter":{"l3_categories":"smartphones"},"pageSize":15}
fetchSuggestions({ search: ‘’, filter: { l3_categories: ‘smartphones’ },pageSize: 15}) functionsearch: 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.
filterobjectThis 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>

Was this section helpful?