Page Comparison

Steps to extend

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 pager component:

   Code Block
   language html
   <script id="vue-hawksearch-pager" type="x-template"> <div class="hawk-pagination__controls"> <template v-if="isLink"> <button<a class="hawk-pagination__item" v-on:clickhref="goToPreviousPagepreviousPageLink"> <left-chevron-svg icon-class="hawk-pagination__left" /> </button>a> </template> <input type="number" :value="page" v-on:change="onChange" <template v-else> <button class="hawk-pagination__inputitem" />@click="goToPreviousPage"> <span <left-chevron-svg icon-class="hawk-pagination__total-textleft" /> </button> <span class="break"></span> </template> <input type="number" :value="page" @change="onChange" :class="hasError ? 'hawk-pagination__input error' : 'hawk-pagination__input'" min="1" :max="totalPages" /> <span class="hawk-pagination__total-text"><span class="break"></span> of {{ totalPages }}</span> <template v-if="totalPages > 1isLink"> pages <a class="hawk-pagination__item" :href="nextPageLink"> </template> <template v-else><right-chevron-svg icon-class="hawk-pagination__right" /> page </a> </template> <template v-else> </span> <button class="hawk-pagination__item" v-on:click@click="goToNextPage"> <right-chevron-svg icon-class="hawk-pagination__right" /> </button> </template> </div> </script>

   Apply the desired structure in this format. The example above adds the contextualized “page“ or “pages“ string after the total pages parameter. Keep in mind that the value and event bindings are required for the proper functioning of the component. Handle their placement with caution.

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.

...