Server-side API integration

10 min

📘 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 overviewAPI 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 <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. 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
        });
    }
}