Overview

The Hawksearch box using Vue.js provides framework specific integration of the search field and enables optimized and efficient way of using the widgetwidget comes with a ReactJS powered front end which has the latest features exposed to the Hawksearch service.

Goal

This document provides information on setting up the Hawksearch box widget using VueReact. js. Basic usage is covered in Selecting React or Vue and any additional information may found here.

Prerequisite

Steps for setup

1. Open the selected widget template file

2. Uncomment, if necessary, the part of the markup designated as Vue React template. This should include a div element with attribute data-component="vue-app-searchboxreact-search-box" or data-component="react-search-box-bootstrap". In it, there should be a Vue component named search-boxan empty div element. Comment the part marked as React Vue template. Only this step is required for enabling the component, the rest of the steps are optional.

3. Modify the data-client-guid attribute to set the Hawksearch client ID.

4. Modify the data-hawksearch-base-api attribute to set the Base API URL.

5. Modify the data-hawksearch-search-api attribute to set the Search API URL

6. Modify the data-json-params attribute (JSON object, param_name: param_value) to set additional search parameters, specific for the widget instance.

7. Modify the data-index-name attribute to set index for the widget search requests.

8. Edit the HTML structure around <search-box> to set the desired layout. The existing classes are used for the built-in theme.

9. Modify the Modify the data-search-page attribute in <search-box> to set the page to which the search should redirect page.

10. Save, re-build and refresh the page.

...