fdk-compare-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.

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>