BigCommerce: Vue SDK - Create search box

Overview

Standard practice is to create a predefined search box component to be subsequently placed on the desired page template. This is the specific configuration for this type of widget based on the common widget root element.

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\search-box.html

   <div data-hawksearch-component="search-box"> <div class="hawk"> <div class="hawk__header"> <search-box search-page="{{ searchpage }}"></search-box> </div> </div> </div>

    

   • The element has the dedicated search box selector, thus differentiating it from other widgets like the results, which require an initial search.

   • The only available main Vue component is <search-box>

   • There is an exposed variable for redirecting - searchpage. If available, the search request will redirect to a search results page where the results widget will display the output of the search. If this variable is not provided the search process will be executed on the current page.

3. A frequently used placement of this widget using the redirect feature is in the heading of the page. For this, the component should be placed in templates\components\common\header.html. In this case “/search“ is the URL of the search results page.
   
   templates\components\common\header.html

   ... <div class="hawksearch-heading-search"> {{> components/hawksearch/search-box searchpage="/search"}} </div> ...

    

4. The same invocation can be executed in any of the other template files. If there is an available results widget on the same page, use without the searchpage parameter.

   ... {{> components/hawksearch/search-box }} ... ... {{> components/hawksearch/results }} ...