{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Prerequisite","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://bridgeline.atlassian.net/wiki/spaces/CON/pages/3468467239"}},{"text":" ","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Steps","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create a file in the widget's directory (e.g. ","type":"text"},{"text":"assets/js/hawksearch/widgets/create-sample-widget.jsx","type":"text","marks":[{"type":"em"}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Import React and ReactDOM","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"import React from 'react';\nimport ReactDOM from 'react-dom';","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Import Hawksearch, QueryStringListener and required component from react-hawksearch.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"import { Hawksearch, QueryStringListener, SearchBox } from 'react-hawksearch';","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create the configuration object for Hawksearch provider. The complete configuration details are available here ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://hawksearch.atlassian.net/wiki/spaces/CON/pages/edit-v2/2434072585?draftShareId=a8000c17-41ee-468b-9b3c-b184dd2604ef&inEditorTemplatesPanel=auto_closed"}},{"text":" (Below values are for demonstration purpose only. These keys with your data can be grabbed from hawksearch dashboard or contact the team for this).","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"const hawkConfig = {\n clientGuid: '9c2a78v6bc9977w0929w88rf576y4476',\n apiUrl: 'https://searchapi-dev.hawksearch.net/',\n indexName: ''\n}","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Within widget file create a new Component which include the configuration provider (Hawksearch) and required component (eg. SearchBox).","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function SearchWidget() {\n return (\n \n \n \n \n );\n}","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Render the component instance to the DOM element.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"ReactDOM.render(, component);","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"let component = document.getElementById('hawksearch-general-compnent');","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add load event listener, this will execute our component SearchWidget and render it when window loads. wrap that listener like.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"window.addEventListener('load', () => {\n let component = document.getElementById('hawksearch-general-component');\n \n function SearchWidget() {\n return (\n \n \n \n \n );\n }\n \n ReactDOM.render(, component);\n})","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the widget’s file reference in ","type":"text"},{"text":"index.jsx","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Re-build the JS resources (e.g. ","type":"text"},{"text":"webpack --mode development","type":"text","marks":[{"type":"em"}]},{"text":")","type":"text"}]}]}]},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"","type":"text","marks":[{"type":"em"}]},{"text":" of the page:","type":"text"}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"strong"},{"type":"em"}]}]},{"type":"paragraph"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Next steps","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://bridgeline.atlassian.net/wiki/spaces/CON/pages/3468470761"}},{"text":" ","type":"text"}]}],"version":1}

Browser not supported