HomeGuides
Submit Documentation FeedbackJoin Developer CommunityLog In

Server-side API integration

This topic describes how to integrate the Product Recommendations server-side API for an Optimizely-based website.

ūüďė

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.

Preparation

See Commerce Cloud API 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. 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.

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
             });
         }
      }

Did this page help you?