Create widget

Prerequisite

Overview

We will create a widget files in hawksearch/widgets folder. You can make different widgets for facets, results, searchbox through this pattern. The widgets will be created in the way so you can render the react-hawskearch components and assign it to your DOM element using “id”. Follow the below steps to create widgets.

Steps

1. Create a file in the widget's directory (e.g. assets/js/hawksearch/widgets/create-sample-widget.jsx)

2. Import React and ReactDOM

   import React from 'react'; import ReactDOM from 'react-dom';

3. Import Hawksearch, QueryStringListener and required component from react-hawksearch.

   import { Hawksearch, QueryStringListener, SearchBox } from 'react-hawksearch';

4. Create the configuration object for Hawksearch provider. The complete configuration details are available here https://hawksearch.atlassian.net/wiki/spaces/CON/pages/edit-v2/2434072585?draftShareId=a8000c17-41ee-468b-9b3c-b184dd2604ef&inEditorTemplatesPanel=auto_closed (Below values are for demonstration purpose only. These keys with your data can be grabbed from hawksearch dashboard or contact the team for this).

   const hawkConfig = { clientGuid: '9c2a78v6bc9977w0929w88rf576y4476', apiUrl: 'https://searchapi-dev.hawksearch.net/', indexName: '' }

5. Within widget file create a new Component which include the configuration provider (Hawksearch) and required component (eg. SearchBox).

6. Render the component instance to the DOM element.

7. This component variable in above point is the DOM element which you need to make in your project and assign it an id and get that into the widgets file.

8. Add load event listener, this will execute our component SearchWidget and render it when window loads. wrap that listener like.

9. Add the widget’s file reference in index.jsx

10. Re-build the JS resources (e.g. webpack --mode development)

Next steps

Extending result item component