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