fdk-search

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

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>