Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

Dev GuideAPI ReferenceUser Guide
HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
Legal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticket

Server-side API integration

Describes how to integrate the Optimizely Product Recommendations server-side API for an Optimizely Commerce Connect-based website.

Suggest Edits

📘

Note

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

Preparation

See API overview  for the initialization steps, then continue with the steps below.

1. Define the recommended sections

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

  • UpperRecommendations
  • LeftMarginRecommendations
  • RightMarginRecommendations
  • BottomRecommendations

to the

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. Define 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>
      }

Use 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. Create and send 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. Consume 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
              });
         }
      }

Track 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. Create and send 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. Consume 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
             });
         }
      }

Updated 3 months ago

Next