Extend templates

Overview

All components in the Vue.js suite are extendable and can be modified to handle custom layout, styles and behavior. This is possible due to the built-in capability of the platform to attach templates as script tag and therefore supplying a dynamic structure of the presentation.

Goal

This document provides information regarding template extension and it’s layout and style customization capabilities.

Prerequisite

Configured Hawksearch box or results widget using the Vue template

https://hawksearch.atlassian.net/wiki/spaces/CON/pages/605618600/Configuring%2BHawksearch%2Bbox%2BWidget

Enable Vue.js for Hawksearch box widget

Configuring Hawksearch results widget

Steps of extending a template

Open either the box or results active widget template for editing
Place the script tag containing the component’s overridden template in the file
Rebuild and refresh the page

Template overrides examples

The result item will most probably be extended. The component has a property for accessing individual fields from the index. To place the field value invoke getField() with the field key. The override should be placed in the Hawksearch results widget template.

Example: Overriding the result item component

<script id="vue-hawksearch-result-item" type="x-template">
    <div class="media-body sf-media-body">
        <p>{{ getField('product_name') }}</p>
        <p>{{ getField('product_description') }}</p>
        <p>{{ getField('product_price') }}$ (was {{ getField('product_discount') }}$)</p>
        <a :href="getField('product_url')">See more</a>
    </div>
</script>

Example: Overriding the result item component with bootstrap classes

<script id="vue-hawksearch-result-item" type="x-template">
    <div class="row">
        <div class="col-md-6">
            <div><h3>{{ getField('title') }}</h3></div>
            <div>{{ getField('info') }}</div>
        </div>
        <div class="col-md-6">
            <div>{{ getField('content') }}</div>
        </div>
    </div>
</script>

Example: Overriding the result item component with images and links

<script id="vue-hawksearch-result-item" type="x-template">
    <div>
        <a :href="getField('url')">
            <img :src="getField('image')">
        </a>
        <p>{{ getField('description') }}</p>
    </div>
</script>

All of Vue.js directives are applicable in the template override.

Connectors