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. Create the basic widget configuration described in ` and extend the config object with widgetGuid and widget uniqueid.

2. widgetGuid and widget uniqueid can be provided through template and overwrite properties of the config object.

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

3. 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.

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

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