Page Comparison

...

Follow the React SDK setup steps to set up the npm package in your target project. This should result in a dedicated folder with the specified structure (e.g. hawksearch/react).

Make a new .jsx file that will contain our custom search results markup and name it for example custom-search-results.jsx. Place it in a dedicated folder, e.g. hawksearch/react/widgets. Below is the default code used. Modify the react component markup to your specifications.

Code Block

import React from 'react';
import ReactDom from 'react-dom';
import { Hawksearch, QueryStringListener, FacetRail, Results } from 'react-hawksearch';

const InitializeSearchResults = (props) => {
    const config = props.config;

    return (
        <Hawksearch config={config}>
            <QueryStringListener />
            <div className="hawk">

                <div className="hawk__body">
                    <FacetRail />
                    <Results />
                </div>
            </div>
        </Hawksearch>
    );
}

function RenderSearchResults(element, config) {
    if (!element || !config) {
        return;
    }

    ReactDom.render(<InitializeSearchResults config={config} />, element);
}

export default RenderSearchResults;

Make a new .jsx file that will be the entry point for the application. In the following snippet you can find the default code used. Make sure you change the import on line 18 to point to the overriden search results component we just made.

Code Block

import 'react-hawksearch/dist/esm/react-hawksearch.css';
import 'rheostat/css/rheostat.css';
import 'react-dates/lib/css/_datepicker.css';

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import cssInterface from 'react-with-styles-interface-css';

import RheostatDefaultTheme from 'rheostat/lib/themes/DefaultTheme';
import ReactDatesDefaultTheme from 'react-dates/lib/theme/DefaultTheme';

ThemedStyleSheet.registerInterface(cssInterface);
ThemedStyleSheet.registerTheme({
    ...RheostatDefaultTheme,
    ...ReactDatesDefaultTheme,
});

import RenderSearchBox from '../widgets/search-box.jsx';
import RenderSearchResults from '../widgets/search-results.jsx';

function GetConfig(element) {
    if (!element) {
        return null;
    }

    const config = {};

    var indexNameAttr = element.getAttribute('data-indexname');
    var languageAttr = element.getAttribute('data-language');
    var additionalParametersAttr = element.getAttribute('data-additionalparameters');
    var trackedEventsAttr = element.getAttribute('data-trackedevents');
    var hawksearchSettingsAttr = element.getAttribute('data-hawksearchsettings');
    var searchPageUrlAttr = element.getAttribute('data-searchpageurl');

    var indexName = indexNameAttr ? indexNameAttr : "";
    var language = languageAttr ? languageAttr : null;
    var additionalParameters = additionalParametersAttr ? JSON.parse(additionalParametersAttr) : {};
    var trackedEvents = trackedEventsAttr ? JSON.parse(trackedEventsAttr) : {};
    var hawksearchSettings = hawksearchSettingsAttr ? JSON.parse(hawksearchSettingsAttr) : {};
    var searchPageUrl = searchPageUrlAttr ? searchPageUrlAttr : "";

    var configOverrides = {
        additionalParameters: additionalParameters,
        language: language,
        indexName: indexName,
        trackConfig: trackedEvents,
        searchPageUrl: searchPageUrl
    };

    Object.assign(config, hawksearchSettings);
    Object.assign(config, configOverrides);

    return config;
}

window.addEventListener('load', function() {
    var searchBox = document.getElementById('hawksearch-react-search-box');
    var searchResults = document.getElementById('hawksearch-react-search-results');

    RenderSearchBox(searchBox, GetConfig(searchBox));
    RenderSearchResults(searchResults, GetConfig(searchResults));
});

Built Build the JS resources as explained in React SDK setup .
Make sure the created JS file is loaded in your Layout.cshtml file.
You should now be able to see your custom search results.

Versions Compared

Old Version 2

New Version Current

Key