Page Comparison

...

• Extending result item component to include a field from the response object

  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 and name it accordingly (Hawksearch.SearchResponseFieldItem.cshtml for example).

  3. Edit the file adding or replacing the template override for result item:

     Code Block
     <script id="vue-hawksearch-result-item" type="x-template"> <div> <div><h3>{{ getField('title') }}</h3></div> <div>{{ getField('content') }}</div> <input type="hidden" :value="getResponseField('TrackingId')"> </div> </script>

     Note, that there is an input with a specific method invoked. Using getResponseField(), the value of the TrackingId field is passed to an element placed inside the component. The method takes the field name as a parameter. In this case, it is on the top level of the response object:

     Code Block
     { "Facets": [ ... ], "VisitorTargets": [ { "Id": 9356, "Name": "International" }, { "Id": 10187, "Name": "awe" } ], "TrackingId": "87ac0720-a61c-4ba7-93d6-77835c60e67c", "Success": true, "Pagination": { ... }, "Keyword": "", "Results": [ ... ], "Selections": {}, "Sorting": { ... }, "Redirect": {}, "Merchandising": { ... }, "FeaturedItems": { ... }, "SearchDuration": 34 }

     Deeper properties can also be accessed:

     Code Block
     <input type="hidden" :value="getResponseField('VisitorTargets.0.Name')">

  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.

  6. Open the widget designer for Hawksearch results widget on the designated page and select the newly created template from the select list . Save and publish the page. Configuring Hawksearch results widget

• Extending pagination tool with custom markup

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

     Code Block

     <script id="vue-hawksearch-pager" type="x-template"> <div class="hawk-pagination__controls"> <button class="hawk-pagination__item" v-on:click="goToPreviousPage"> <left-chevron-svg icon-class="hawk-pagination__left" /> </button> <input type="number" :value="page" v-on:change="onChange" class="hawk-pagination__input" /> <span class="hawk-pagination__total-text"> <span class="break"></span> of {{ totalPages }} <template v-if="totalPages > 1"> pages </template> <template v-else> page </template> </span> <button class="hawk-pagination__item" v-on:click="goToNextPage"> <right-chevron-svg icon-class="hawk-pagination__right" /> </button> </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.

General info

...