BigCommerce: Vue SDK - Create search results

Overview

Creating a results reusable 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.

Steps to create

Create a Stencil component template file in a desired directory (e.g. templates\components\hawksearch)
Place the specific root element structure in the component file
templates\components\hawksearch\results.html
```
<div data-hawksearch-component="results">
    <div class="hawk">
        <div class="hawk__body">
            <facet-list></facet-list>

            <results></results>
        </div>
    </div>
</div>
```
- The element has the dedicated selector that enables the initial search
- There are two main Vue components - <facet-list> and <results>
- 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.
The results component can be placed in any of the theme templates.
```
...
{{> components/hawksearch/results }}
...
```
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.
```
<div data-hawksearch-component="results" data-hawksearch-landingpage="/top-sellers">
    <div class="hawk">
        <div class="hawk__body">
            <facet-list></facet-list>

            <results></results>
        </div>
    </div>
</div>
```