/
Extending templates

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

Creating widgets with Vue SDK

A widget with proper configuration and markup

 

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.

 

In the case of ResultItem, this component has an access property getField() which exposes the result data fields.

 

Related content

Example: Change from pagination to continuous loading
Example: Change from pagination to continuous loading
Read with this
Customize search results in Vue.js
Customize search results in Vue.js
More like this
Vue SDK requirements and setup
Vue SDK requirements and setup
Read with this
Overriding components
Overriding components
More like this
Example: Extending the result items with different layout for products and content
Example: Extending the result items with different layout for products and content
More like this
Example: Place a custom label with search response data
Example: Place a custom label with search response data
More like this