Recommendations with Vue SDK

Overview

The recommendations widget purpose is to display of the recommendations data. It could be placed simultaneously with the search box and results widgets, or used separately on target page from the search and results.

Prerequisite

Steps to create

1. Crete the basic widget configuration described in https://bridgeline.atlassian.net/wiki/spaces/CON/pages/3468464317 and extend the config object with widgetGuid and recommendationApi

2. RecommendationApi Url is visible on https://bridgeline.atlassian.net/wiki/spaces/HSKB/pages/3462485318

3. WidgetGuid is visible on Workbench/ recommendations and can be provided through template and overwrite properties of the config object.

   <recommendations widget-guid="..."></recommendations>

    

4. One template can contain one or multiple independent recommendations which target different widgets.

• Example of single recommendations usage.

  <div class="hawk"> <recommendations></recommendations> </div>

   

• Example of consolidated usage of results and recommendations.

  <div class="hawk"> <div class="hawk__header"> <search-box></search-box> </div> <div class="hawk__body"> <facet-list></facet-list> <div> <results></results> <recommendations></recommendations> </div> </div> </div>

   

• The following example contains searchbox, results and two recommendations.

   

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