Page Comparison

...

Steps of extending the base template

...

• Extending search results view to show additional fields based on the type of the result item

  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.ContentTypeDynamicItems.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> <template v-if="getField('contenttype') == 'Telerik.Sitefinity.Events.Model.Event'"> <div><h3>{{ getField('title') }}</h3></ Events itemdiv> <div><img :src="getField('image')"></div> <div>{{ getField('content') }}</div> </template> <template v-else-if="getField('contenttype') == 'Telerik.Sitefinity.News.Model.NewsItem'"> <div><h3>{{ getField('title') }}</h3></div> <div>{{ getField('summary') }}</ News itemdiv> <p><a :href="getField('link')">Read more</a></p> </template> <template v-else> // Other type of items<div>{{ getField('content') }}</div> </template> </div> </script>

     Apply the desired structure in this format. All indexed fields are accessible through getField(). Vue.js directives are applicable in the template override ( Vue.js Directives )

  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

...