BigCommerce: Vue SDK - Create search results

Overview

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.

Steps to create

1. Create a Stencil component template file in a desired directory (e.g. templates\components\hawksearch)

2. 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.

3. The results component can be placed in any of the theme templates.

   ... {{> components/hawksearch/results }} ...

    

4. 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>