Overview
All components in the Vue.js suite are extendable and can be modified to handle custom layout, styles and behaviour. 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 the template extension of the Hawksearch results widget and its layout and style customization capabilities.
Prerequisite
| Info |
|---|
Configured Hawksearch results widget using the Vue template |
Steps of extending the base template
Open the results active widget template for editing. It is located in Mvc\Views\Hawksearch\Hawksearch.Default.cshtml. If a resource package is used, then edit the same path in the ResourcePackages folder. Make sure you are using the correct template.
Place the script tag containing the component’s overridden template in the file.
Save, 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 to include images and links
Example: Overriding the result item component with two column layout using bootstrap classes
Example: Extending the result items with different layout for products and content
Example: Extending result item component to include a field from the response object
Example: Extending pagination tool with custom markup
General info
Vue.js requires all component templates to have a single root element. Note that all the examples are placed in a single <div>
The template is defined by HTML id attribute and there can only be one on a single page. Make sure not to duplicate the template overrides.
If there are several Hawksearch widget templates used in different cases, there can be different component templates for each. For instance, if you need a separate structure for a specific list that has a dedicated widget, apply the custom template override there and use it only for this case.
The script tag is not required to be in the widget template where it's used. A more general approach can be to place all the page specific templates separately and used them for all widgets on this page. This can be implemented with the Embedded code widget from the Scripts and Styles section.
All of Vue.js directives (v-if, v-else, v-else-if, v-show etc.) are applicable in the template override. Vue.js Directives