{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"Creating a reusable results component can be done in a similar manner to the search box component. The results component is a derivation of the single page application with the search box either not required, or placed as a separate widget.","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Steps to create","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create a Stencil component template file in a desired directory (e.g. ","type":"text"},{"text":"templates\\components\\hawksearch","type":"text","marks":[{"type":"em"}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Place the specific root element structure in the component file","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"templates\\components\\hawksearch\\results.html","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

\n \n\n \n

","type":"text"}]},{"type":"paragraph"},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The element has the dedicated selector that enables the initial search","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"There are two main Vue components - ","type":"text"},{"text":"","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" In this case, it doesn’t have a search field that may trigger a search by keyword and should be placed on page that is a redirect target or a landing page.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" The results component can be placed in any of the theme templates.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"...\n{{> components/hawksearch/results }}\n...","type":"text"}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Since Hawksearch has the option of setting landing pages, this widget can be configured to display data for a specific landing page. This setup may vary, but in essence, is adding an additional data attribute for the custom URL of the landing page.","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n \n\n \n

","type":"text"}]}]}]},{"type":"paragraph"}],"version":1}