Example: Extending facet selections component

Steps to extend

1. Navigate to the directory of the current 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 selections component:

       <script id="vue-hawksearch-selections" type="x-template">
           <div v-if="hasSelections" class="hawk-facet-rail__selections">
               <h4>{{ $t("You've Selected") }}</h4>
               <ul class="hawk-selections">
                   <li v-for="(data, field) in selections" :key="field" class="hawk-selections__category">
                       <div class="hawk-selections__category-wrapper">
                           <span class="hawk-selections__category-name">{{ data.Label }}:</span>
                           <ul class="hawk-selections__item-list">
                               <li v-for="item in data.Items" :key="item" class="hawk-selections__item">
                                   <button v-on:click="clearSelectionItem(field, item)" class="hawk-selections__item-remove">
                                       <x-circle-svg></x-circle-svg>
                                   </button>
                                   <span :class="itemClass(item)">
                                       <template v-if="getFacetType(field) == 'range'">
                                           {{ rangeLabel(item.Label) }}
                                       </template>
                                       <template v-else>
                                           {{ item.Label }}
                                       </template>
                                   </span>
                               </li>
                           </ul>
                       </div>
                       <button v-on:click="clearSelectionField(field)" class="hawk-selections__category-remove">
                           <x-circle-svg></x-circle-svg>
                       </button>
                   </li>
                   <li class="hawk-selections__category">
                       <button v-on:click="clearAll" class="hawk-btn hawk-btn-primary-outline">
                           {{ $t("Clear All") }}
                       </button>
                   </li>
               </ul>
               <p class="tab-selection">{{ tabSelection.Label }}</p>
           </div>
       </script>

   Apply the desired structure in this format. There are three handlers: clearAll - for discarding all facets, clearSelectionField - for clearing a single facet and clearSelectionItem for clearing a value from multiple choice facets. Since the tab selection is also a type of facet a tabSelection object is exposed.

4. Include the file in the project and make it an Embedded resource in the Visual Studio solution.

5. Save, build and reload the site.