Example: Change component placement

Overview

In some cases, a component or set of components must be placed in a different position in the layout. For this example, we assume the end goal is to migrate the Selections component from the top of Results to the top of the FacetList component. This will be done by creating a widget template that is extending two templates - for the facets and for the results. All default templates are available on https://github.com/hawksearch/vue-hawksearch/tree/master/src/components in each component file in the <template>. The provided samples in this article are based on those templates. Similar component migrations can be done the same way between any given set of components.

Steps to extend

1. Navigate to the directory of the 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. Add the template override for the FacetList. In this case, the only modification is adding the Selections component on ln. 4

   <script id="vue-hawksearch-facet-list" type="x-template"> <div v-if="!waitingForInitialSearch" class="hawk-facet-rail"> <div class="hawk-facet-rail__heading">{{ $t('Narrow Results') }}</div> <selections /> <div class="hawk-facet-rail__facet-list"> <template v-if="facets && facets.length"> <facet v-for="facetData in facets" :key="facetData.FacetId" :facet-data="facetData"></facet> </template> <template v-else-if="loadingResults"> <placeholder-facet v-for="index in 4" :key="index"></placeholder-facet> </template> <template v-else=""> <div class="hawk-facet-rail_empty"></div> </template> </div> </div> </script>

   For additional info visit the original component file: https://github.com/hawksearch/vue-hawksearch/blob/master/src/components/facets/FacetList.vue

4. The next step is removing the Selections component from the Results. The override is basically similar to the default template, only the <selections> tag is omitted. Original component file: https://github.com/hawksearch/vue-hawksearch/blob/master/src/components/results/Results.vue

   <script id="vue-hawksearch-results" type="x-template"> <div class="hawk-results" v-on:click="onClick"> <autocorrect-suggestions /> <search-results-label /> <banner></banner> <template v-if="searchError"> <span>{{ $t('response_error_generic') }}</span> </template> <template v-else-if="searchOutput && searchOutput.Results && searchOutput.Results.length == 0"> <span>{{ $t('No Results') }}</span> </template> <template v-else-if="!waitingForInitialSearch"> <tabs></tabs> <div class="hawk-results__top-tool-row"> <tool-row /> </div> <result-listing /> <div class="hawk-results__bottom-tool-row"> <tool-row /> </div> </template> </div> </script>

5. Include the file in the project.

6. Save, build and reload the site.