Loading...
Area: Episerver Commerce, Episerver Product Recommendations
Applies to versions: EPiServer.Personalization.Commerce 1.0 and higher

Recommendations Server side API integration

Recommendations [hide]

Note: Sample code in this article is taken from Quicksilver templates. The Quicksilver Commerce sample site and installation instructions are available for download from GitHub.

This document explains how to integrate the Recommendations server-side API for an Episerver-based website.

In this topic

Preparation

See Episerver Recommendations API: An overview for the initialization steps. Then, continue with the steps below.

1. Defining the recommended sections

To the Views/Shared/_Layout.cshtml view, add following sections:

  • UpperRecommendations
  • LeftMarginRecommendations
  • RightMarginRecommendations
  • BottomRecommendations

to the <div> tags defined in the preparation step.

...
<div class="recommendations recommendations-upper">@RenderSection("UpperRecommendations", false)</div>
<div class="recommendations recommendations-left">@RenderSection("LeftMarginRecommendations", false)</div>
<div class="recommendations recommendations-right">@RenderSection("RightMarginRecommendations", false)</div>
<div class="recommendations recommendations-bottom">@RenderSection("BottomRecommendations", false)</div>
...

2. Defining the recommendations view

To render the recommendations layout based on the recommended data, create a partial view. In the Quicksilver sample site, this is Views/Recommendations/_Recommendations.cshtml.

@model EPiServer.Reference.Commerce.Site.Features.Recommendations.ViewModels.RecommendationsViewModel
@foreach (var product in Model.Products)
  {
    <div class="jsProductTile product-row__tile" data-recommendation-id="@product.RecommendationId">
        @Html.Partial("_Product", product.TileViewModel)
    </div>
  }

Using the CommerceTrackingAttribute

This section explains how to create, send, then consume recommendations on a page using the CommerceTrackingAttribute. See also: Using the CommerceTrackingAttribute.

In this example, the integration is applied to a StartPage.

1. Creating and sending a tracking request

For the controller Features/Start/Controllers/StartController,add the CommerceTracking attribute to the Index  action.

[CommerceTracking(TrackingType.Home)]
public ViewResult Index(StartPage currentPage)
  {
    ...
  }

2. Consuming recommendations

For the controller Features/Start/Controllers/StartController, use GetHomeRecommendations from RecommendationsExtensions to get a collection of recommendation objects for the home page.

[CommerceTracking(TrackingType.Home)]
public ViewResult Index(StartPage currentPage)
  {
    var viewModel = new StartPageViewModel()
      {
        StartPage = currentPage,
        Recommendations = this.GetHomeRecommendations(),
        Promotions = GetActivePromotions()
      };
    return View(viewModel);
  }

To the view Views/Start/Index.cshtml, add the following to render the recommended data in the RightMarginRecommendations section of the page.

@section RightMarginRecommendations
  {
    @{
        Html.RenderAction("Index", "Recommendations", new 
          {
            recommendations = Model.Recommendations
          });
     }
  }

Tracking without using the CommerceTracking Attribute

This section explains how to create, send, then consume recommendations on a page or an action without using the CommerceTrackingAttribute. This integration is applied to a Product package page. See also: Tracking without using the CommerceTrackingAttribute.

1. Creating and sending a tracking request

For the controller Features/Product/Controllers/PackageController, add following code to the Index action.

[HttpGet]
public async Task<ActionResult> Index(FashionPackage currentContent, bool useQuickview = false)
  {
    ...
    await _recommendationService.TrackProduct(HttpContext, currentContent.Code, useQuickview);
    ...
  }

Then add the _recommendationService.TrackingProduct() method.

public async Task<TrackingResponseData> TrackProduct(HttpContextBase httpContext, string productCode, bool skipRecommendations)
  {
    ...
    var trackingData = _trackingDataFactory.CreateProductTrackingData(productCode, httpContext);
    if (skipRecommendations)
      {
        trackingData.SkipRecommendations();
      }
    return await _trackingService.TrackAsync(trackingData, httpContext, _contentRouteHelperAccessor().Content);
  }

2. Consuming recommendations

To the controller Features/Product/Controllers/PackageController, add following code to the Index action.

[HttpGet]
public async Task<ActionResult> Index(FashionPackage currentContent, bool useQuickview = false)
  {
    var viewModel = _viewModelFactory.Create(currentContent);
    ...
    await _recommendationService.TrackProduct(HttpContext, currentContent.Code, useQuickview);
    ...
    viewModel.AlternativeProducts = this.GetAlternativeProductsRecommendations().Take(3);
    viewModel.CrossSellProducts = this.GetCrossSellProductsRecommendations();
    ...
  }

To the view Views/Package/Index.cshtml, add the following.

@section RightMarginRecommendations 
  {
    @{
       Html.RenderAction("Index", "Recommendations", new
         {
           recommendations = Model.AlternativeProducts});
         }
     }
@section BottomRecommendations 
  {
    @{
       Html.RenderAction("Index", "Recommendations", new 
         {
           recommendations = Model.CrossSellProducts
         });
     }
  }
Do you find this information helpful? Please log in to provide feedback.

Last updated: Dec 08, 2017

Recommendations [hide]