Results widget with search tools with Vue SDK

Overview

The results widget is the second part of the search process - the display of the search data. It could be placed simultaneously with the search box widget, or used separately on target page from the search.

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-results"></div>

    

4. In this root element the component structure of widget should be placed. Any additional elements are also allowed. This should include primarily the <results> component. Usually it is combined with <facet-list>.

   <div id="vue-results"> <div class="results-outer"> <div class="search-facets"> <facet-list></facet-list> </div> <div class="search-results"> <results></results> </div> </div> </div>

    

   With similar process a separate widget for facets can be created and placed on the same page.

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