Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Info

Creating widgets with Vue SDK

Steps to create

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

  2. RecommendationApi Url is visible on Recommendation API Integration Documentation

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

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

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

  • Example of single recommendations usage.

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

  • Example of consolidated usage of results and recommendations.

    Code Block
    <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.

    Code Block
    <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>

...