Enable Vue.js for Hawksearch results widget

Owned by gabriel.georgiev (Deactivated)
Last updated: Apr 01, 2021 by Toma Bonev (Deactivated)
1 min read

Overview

The Hawksearch results widget implementation with Vue.js provides out-of-the-box access to the Hawksearch service. The framework specifics expose some particular features that cover many advanced scenarios.

Goal

This document provides information on setting up the Hawksearch results widget using Vue.js. Basic usage is covered in and any additional information may be found here.

Prerequisite

Configured Hawksearch results widget.

Steps for setup

  1. Open the selected widget template file

  2. Uncomment, if necessary, the part of the markup designated as Vue template. This should include a div element with attribute data-component="vue-app-spa". In it, there should be Vue components named search-box, facet-list and results. Comment the part marked as React template. Only this step is required for enabling the components, 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 the index for the widget search requests.

  8. Edit the HTML structure around <search-box>, <facet-list> and <results> to set the desired layout. The existing classes are used for the built-in theme. There is an additional Razor condition if the search box should be shown.

  9. Save, rebuild and refresh the page.