Create results widget

📘

Prerequisite

React SDK setup

Steps

1. Create a file in the widgets directory (e.g. assets/js/hawksearch/react/widgets/search-results.jsx)
2. Import React and ReactDOM

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

3. Import the required classes from the included react-hawksearch package

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

4. Add load event listener in which the widget initialization will be placed

window.addEventListener('load', () => {  
  // Widget initialization steps 5, 6, 7 and 8 go here alongside any other widget related code  
})

5. The widget needs to be created on an empty DOM element. Access the designated element using getElementById or in another convenient way.

a. Template for the widget

<div id="hawksearch-react-results"></div>

b. Accessing the element

let component = document.getElementById('hawksearch-react-results');

6. Create the configuration object for Hawksearch

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

These are only for demonstration purposes. Please contact an administrator from Hawksearch for the configuration data.

7. Create the App component

function App() {
    return (
        <Hawksearch config={config}>
            <QueryStringListener />
            <div className="hawk">
                <div className="hawk__header">
                    <SearchBox />
                </div>

                <div className="hawk__body">
                    <FacetRail />

                    <Results />
                </div>
            </div>
        </Hawksearch>
    );
}

This declares the structure of the widget and the main inner components. Modify this to adjust the layout.

8. Render the component instance to the DOM element

ReactDOM.render(<App />, component);

9. Add the widget’s file reference in index.jsx
10. Re-build the JS resources (e.g. webpack --mode development)

📘

Mobile support features are dependant on the configuration of the page the widget is placed on. Make sure that the following tag is available in the of the page: