Recommendations with Vue SDK

Owned by Georgi Kotorov (Deactivated)
Last updated: Dec 01, 2020
1 min read

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

Creating widgets with Vue SDK

 

Steps to create

  1. Crete the basic widget configuration described in Creating widgets with Vue SDK and extend the config object with widgetGuid and recommendationApi

  2. RecommendationApi Url is visible on Recommendation API

  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.

 

Â