Server-side API integration

6 min

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

See Commerce Connect API overviewCommerce Connect API overview for the initialization steps.

Define the recommended sections. In the Views/Shared/_Layout.cshtml view, add the following sections within 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>
...

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

Use CommerceTrackingAttribute to create, send, and consume recommendations on a page. The example below applies the integration to a StartPage.

Create and send a tracking request. In the Features/Start/Controllers/StartController controller, add the CommerceTracking attribute to the Index action:

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

Consume recommendations. In the Features/Start/Controllers/StartController controller, 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);
}

In the Views/Start/Index.cshtml view, 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 CommerceTrackingAttribute

Create, send, and consume recommendations on a page or an action without CommerceTrackingAttribute. The example below applies the integration to a product package page.

Create and send a tracking request. In the Features/Product/Controllers/PackageController controller, add the following code to the Index action:

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

Add the _recommendationService.TrackProduct() 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);
}

Consume recommendations. In the Features/Product/Controllers/PackageController controller, add the 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();
    ...
}

In the Views/Package/Index.cshtml view, add the following:

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