Extending templates

Overview

Using the Vue SDK package it is possible to apply templates to the used components and in this way to provide a custom layout. This feature allows minimal effort updates to create a whole different level of presentation and experience.

Prerequisite

Steps to extend

1. Open the widget initialization file (the one with HawksearchVue.createWidget)

2. Import the component which is needed to be extended (e.g. ResultItem)

   import { ResultItem } from '@hawksearch/vue';

    

3. Set the template to a custom-created markup. This is a reference to a <script> element id.

   ResultItem.templateOverride = "#custom-result-item";

    

4. Create the markup for the component template override. It should be included anywhere on the page that includes the widget. This could probably be around the widget root element definition. Apply all necessary layout modifications.

   <script id="custom-result-item" type="x-template"> <div class="result-item"> <p class="result-item-title">{{ getField('title') }}</p> <p class="result-item-description">{{ getField('description') }}</p> </div> </script>

    

5. Save, re-build and preview the page.