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

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
fetchSuggestions	Function	Handler to fetch searchResults for given searchText	{"search":"","filter": {"l3_categories":"smartphones"},"pageSize":15}
filter	object	This prop contains the filter which can be of a particular category for which the products will be fetched for comparison

Functions

1. executeQuery(searchText)

Example

theme/templates/components/header.vue

2. javascript fetchSuggestions({ search: '', filter: { l3_categories: ‘smartphones’ },pageSize: 15})

Here three parameters are passed into this function, which are: 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.

---

Example

<fdk-compare-search 
            :pageSize="10"
            :filter="{ l3_categories: firstCategory }">
   <template slot-scope="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>
```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>