Searchbox with Vue SDK

Overview

The most basic type of widget to be created is the search box. It presents the user with a search field in which a search term can be input and then the results can be displayed either somewhere on the same page or the user can be redirected to the results page.

Prerequisite

Steps to create

1. Crete the basic widget configuration described in Creating widgets with Vue SDK

2. Open the template file for editing. This could be a HTML page, or other type of markup generating framework (i.e. CMS). Make sure that the widget initialization file is included.

3. Place the root element on top of which the component should be rendered. This element is accessed in the widget initialization file. For example, an empty <div> with id

   <div id="vue-searchbox"></div>

    

4. In this root element the component structure of widget should be placed. Any additional elements are also allowed. The required component in this case is the <search-box>

   <div id="vue-searchbox"> <div class="searchbox-outer"> <h2>Search word</h2> <div class="searchbox-inner"> <search-box></search-box> </div> </div> </div>

    

5. With this configuration the search results will try to populate the results widget available on the same page. If there are none available, no visual change will occur. The component can also redirect to other page where a results widget is available. In this case the page url should be supplied

   ... <search-box search-page="/search-results-page"></search-box> ...

    

6. Save all the files, re-build and review the page.