fdk-search
Search Action Component
Tag
fdk-search
Description
Use Search Action Component to get Search Results based on custom search text with the ability to change the size of search results based on the param pageSize
.
Props
Props | Type | Description | Payload |
---|---|---|---|
suggestions | Array | Returns search results data in array | NA |
product_suggestions | Array | The handler should retrieve search results regardless of the search text | productSuggestions(searchtext : String, pageSize : Number); |
no_results | Boolean | Returns a Boolean value indicating whether search results are found for the given search text | NA |
executeQuery | function | The handler should display a product listing based on any query input provided as search text. | executeQuery(searchText : String) |
fetchSuggestions | function | To fetch search results for a given search text and pageSize | fetchSuggestions(searchtext : String, pageSize : Number); |
has_products | Boolean | The has_products prop retrieves relevant product suggestions based on availability or selection, enhancing user experience with tailored recommendations. | has_products="true" |
Example
theme/templates/components/header.vue
<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>