Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. 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).

  2. Open the active results widget template for editing. It is located in Mvc\Views\Hawksearch\Hawksearch.Default.cshtml. If a resource package is used, then edit the same path in the ResourcePackages folder. Make sure that this is the correct template.

  3. Copy the file of the base template and name it accordingly (Hawksearch.CustomResults.cshtml for example).

  4. Make sure to enable the proper markup (i.e. the target element) in the widget template. It should have the react prefix.

  5. Import the bundled JS resources that include the component's initialization.

    Code Block
    @Html.Script(Url.WidgetContent("hawksearch/react/build/js/<build_file>.js"), "bottom", false)
  6. Clean up all other component's markup that is not relevant to this widget.

  7. Save, rebuild and refresh the page.

...