Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Navigate to the directory of the current currently active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).

  2. Copy the file of the base template or select an existing one.

  3. Edit the file adding or replacing the template override for the suggestion list component:

    Code Block
    <script id="vue-hawksearch-search-suggestions" type="x-template">
        <div class="autosuggest-menu">
            <template v-if="fieldFocused && (loadingSuggestions || suggestions)">
                <ul class="dropdown-menu autosuggest-menu__list autosuggest-outer-list">
                    <template v-if="loadingSuggestions">
                        <li class="autosuggest-menu__item">{{ $t('Loading') }}...</li>
                    </template>
                    <template v-else-if="suggestions.Products.length">
                        <ul class="autosuggest-inner-list">
                            <suggestion-item v-for="item in suggestions.Products" :item="item" :key="item.Results.DocId" v-on:itemselected="onItemSeleted"></suggestion-item>
                        </ul>
                    </template>
                    <template v-else>
                        <li class="autosuggest-menu__item">{{ $t('No Results') }}</li>
                    </template>
                </ul>
            </template>
        </div>
    </script>
  4. Edit the file adding or replacing the template override for the suggestion item component:

    Code Block
    <script id="vue-hawksearch-suggestion-item" type="x-template">
        <li v-on:click="onClick">
            <p>{{ item.ProductName }}</p>
        </li>
    </script>
    Include the file in the project and make it an Embedded resource in the Visual Studio solution.
  5. Save, build and reload the site.