Skip to main content

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

PropsTypeDescriptionPayload
suggestionsArrayReturns search results data in arrayNA
product_suggestionsArrayThe handler should retrieve search results regardless of the search textproductSuggestions(searchtext : String, pageSize : Number);
no_resultsBooleanReturns a Boolean value indicating whether search results are found for the given search textNA
executeQueryfunctionThe handler should display a product listing based on any query input provided as search text.executeQuery(searchText : String)
fetchSuggestionsfunctionTo fetch search results for a given search text and pageSizefetchSuggestions(searchtext : String, pageSize : Number);
has_productsBooleanThe 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>

Was this section helpful?