Goal
The aim of this article is to demonstrate how to override the SearchSuggestion and PopularSearches component in order to customize the popular searches label.
Prerequisite
| Info |
|---|
Configured Hawksearch results widget using the Vue template |
Components override
In order to customize the popular searches label you need to first add that component to the SearchSuggestions component. Here on line 14 we add the needed component.
...
| Code Block |
|---|
<script id="vue-hawksearch-popular-container" type="x-template">
<div v-if="suggestions && suggestions.Popular && suggestions.Popular.length">
<h3>Popular searches</h3>
<li v-for="popular in suggestions.Popular" :key="popular.Value" class="autosuggest-menu__item">
<div v-html="popular.Value"></div>
</li>
</div>
</script> |
Ready-to-use example
The code snippet below demonstrates a fully functional HawksearchBox widget with the component override included in it.
...