Page Comparison

...

Navigate to the directory of the currently active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).
Copy the file of the base template or select an existing one.

Add the template override for the FacetList. In this case, the only modification is adding the Selections component on ln. 4

Code Block

<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

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

Code Block

<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>

Include the file in the project and make it an Embedded resource in the Visual Studio solution.
Save, build and reload the site.

Versions Compared

Old Version 4

New Version Current

Key