Example: Expose BestFragments fields

Owned by gabriel.georgiev (Deactivated)
Last updated: Apr 01, 2021 by Toma Bonev (Deactivated)
2 min read

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 and name it accordingly.

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

    <script id="vue-hawksearch-result-item" type="x-template"> <div class="media-body sf-media-body"> <h3> <template v-if="link"> <a :href=link>{{ title }}</a> </template> <template v-else> {{ title }} </template> </h3> <p> <span>{{ result.BestFragments['itemname'] }}</span> <span>{{ content }}</span> </p> <a :href="link">{{ link }}</a> </div> </script>

    The key change here is the field reference to the BestFragments object (line 12). In this case, the itename is displayed. Other available fields can be displayed in a similar manner.

  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.

 

Usage for multilingual

Multilingual support has structural alternations on the process of accessing fields, BestFragments included. Here are some additional steps that need to be executed for the exposed BestFragments fields to work in this scenario.

  1. Execute the aforementioned steps for the default template extending.

  2. Edit the template file and add the following script at the bottom of the file.

    <script>try{window.addEventListener('load',function(){HawksearchVue.getLanguageSuffix=function(){return(s=Object.values(HawksearchVue.storeInstances))&&(cd=HawksearchVue.getClientData)&&s.length&&cd(s[0]).Custom&&cd(s[0]).Custom.language?('_'+cd(s[0]).Custom.language):''}})}catch(e){console.error(e)}</script>

  3. Update all field references to use the language suffix.

    <script id="vue-hawksearch-result-item" type="x-template"> ... <span>{{ result.BestFragments['itemname' + HawksearchVue.getLanguageSuffix()] }}</span> ... </script>

     

  4. Save, build and reload the site.

Â