Blog posts by Prins Mark

Calculate Tax on a Single Variation

Fri, 08 May 2020 12:05:14 GMT

On a Episerver Commerce project I'm currently working on, prices are displayed primarily excluding Tax (because it is primarily targeted on B2B customers). So on the Market we set the setting 'Prices Include Tax' to false. However since B2C customers can also order from this site, the price including Tax should be displayed as well (next to the price without Tax)

Normally Tax is calculated on the cart, and based on the shipping address. So how can we calculate the Tax without adding the product to the Cart. You can't, so you have to create a dummy cart, add an address, and then calculate the tax using this cart.

This might sound daunting, but in fact it is not that complex at all.

What I ended up with is a HtmlHelper that will get the price including Tax for a variation.

public static class VariationTaxHelper
{
    private static readonly Injected<ICurrentMarket> _currentMarket;
    private static readonly Injected<IOrderRepository> _orderRepository;
    private static readonly Injected<IOrderGroupFactory> _orderGroupFactory;
    private static readonly Injected<ITaxCalculator> _taxCalculator;
    private static readonly Injected<IPromotionService> _promotionService;
    private static readonly Injected<ICurrencyService> _currencyService;

    private static IMarket CurrentMarket => _currentMarket.Service.GetCurrentMarket();

    public static Money PriceIncludingTax(this HtmlHelper helper, VariationContent variation)
    {
    	// Create a temporary cart
        ICart cart = _orderRepository.Service.LoadOrCreateCart<ICart>(
       	    CustomerContext.Current.CurrentContactId, "TempCart", _currentMarket.Service);

        // Reads the selected currency from a cookie, defaults to Current Market DefaultCurrency
            cart.Currency = _currencyService.Service.GetCurrentCurrency();

	var address = _orderGroupFactory.Service.CreateOrderAddress(cart);
        address.CountryCode = CurrentMarket.Countries.FirstOrDefault();

	// Get the correct price for the currently logged in Contact
        var defaultPrice = PriceCalculationService.GetSalePrice(variation.Code, CurrentMarket.MarketId, cart.Currency);
        if (defaultPrice == null)
            return new Money(0, cart.Currency);

	// Check if any Item discounts should be applied 
        var discountedPrice = _promotionService.Service.GetDiscountPrice(
            defaultPrice.CatalogKey, CurrentMarket.MarketId, cart.Currency).UnitPrice;

	// Create a lineItem to add to the temporary Cart
        ILineItem lineItem = _orderGroupFactory.Service.CreateLineItem(variation.Code, cart);
        lineItem.Quantity = 1;
        lineItem.PlacedPrice = discountedPrice;
        lineItem.TaxCategoryId = variation.TaxCategoryId;
        cart.AddLineItem(lineItem);

	// Calculate the Tax amount using the ITaxCalculator
        var taxAmount = _taxCalculator.Service.GetSalesTax(lineItem, CurrentMarket,
            address, new Money(lineItem.PlacedPrice, cart.Currency));

	return new Money(discountedPrice.Amount + taxAmount.Amount , cart.Currency);
    }
}

Since our site is based on Episerver Foundation, any services you would be missing using this code can be found there.

Country VisitorGroup routing in URL domain/visitorgroup/language/ (domain.com/nl/nl/)

Fri, 08 Nov 2019 09:09:35 GMT

Every once in a while a client mentions the request for their global website to have country specific content based on a country segment in the URL. Resulting in specific URLs like domain.com/nl/nl/ for Dutch content in Dutch, and domain.com/be/nl/ for Belgian content in Dutch.

Most times we talk the client into using the region parts in cultures. So use the en neutral culture for global English, the culture nl-NL for Dutch content in Dutch and the nl-BE culture for Belgian content in Dutch. However sometimes, using this approach we run into problems when a culture does not exist. Say we want the Dutch content to be available in German too, the de-NL culture does not exist.

This got me thinking about adding an URL segment to the URL for a specific country, where the country is represented by an episerver visitor group.

With the help of this blog explaining custom routing for Episerver I created my custom segment and a custom visitor group.

    public class VisitorGroupSegment : SegmentBase
    {
        public VisitorGroupSegment(string name) : base(name)
        {
        }

        public override bool RouteDataMatch(SegmentContext context)
        {
            SegmentPair nextValue = context.GetNextValue(context.RemainingPath);
            
            // For the first fragment, check if it is a 'visitor group' segment
            if (context.LastConsumedFragment is null && IsVisitorGroupSegment(nextValue.Next))
            {
                context.RemainingPath = nextValue.Remaining;
                
                // Data Token to be used by VisitorGroup Criterion
                context.RouteData.DataTokens.Add("visitorgroup", nextValue.Next);

                return true;
            }

            return false;
        }

        private static bool IsVisitorGroupSegment(string segment)
        {
            var visitorGroupRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRepository>();
            foreach (var vg in visitorGroupRepository.List())
            {
                foreach (var criterion in vg.Criteria)
                {
                    if (criterion.Model is RouteVisitorGroupSettings model &&
                        model.RouteSegment.Equals(segment, StringComparison.InvariantCultureIgnoreCase))
                    {
                        return true;
                    }
                }
            }

            return false;
        }

        public override string GetVirtualPathSegment(RequestContext requestContext, RouteValueDictionary values)
        {
            if (GetContextMode(requestContext.HttpContext, requestContext.RouteData)
                != ContextMode.Default)
            {
                return null;
            }

            return GetRoutingVisitorGroupByCurrentUser(new HttpContextWrapper(HttpContext.Current));
        }

        private static ContextMode GetContextMode(HttpContextBase httpContext, RouteData routeData)
        {
            var contextModeKey = "contextmode";

            if (routeData.DataTokens.ContainsKey(contextModeKey))
            {
                return (ContextMode)routeData.DataTokens[contextModeKey];
            }

            if (httpContext?.Request == null)
            {
                return ContextMode.Default;
            }

            if (!PageEditing.PageIsInEditMode)
            {
                return ContextMode.Default;
            }

            return ContextMode.Edit;
        }


        private static string GetRoutingVisitorGroupByCurrentUser(HttpContextBase httpContext)
        {
            var visitorGroupRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRepository>();
            var visitorGroupRoleRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRoleRepository>();

            var user = httpContext.User;

            // Check all visitor groups and check if one is active, if one is active return the segment.
            var visitorGroups = visitorGroupRepository.List();
            foreach (var vg in visitorGroups)
            {
                foreach (var criterion in vg.Criteria)
                {
                    if (criterion.Model is RouteVisitorGroupSettings model && visitorGroupRoleRepository.TryGetRole(vg.Name, out var virtualRoleObject))
                    {
                        if (virtualRoleObject.IsMatch(user, httpContext))
                        {
                            return model.RouteSegment;
                        }
                    }
                }
            }
            return null;
        }
    }

The custom visitor group:

    public class RouteVisitorGroupSettings : CriterionModelBase
    {
        [Required]
        public string RouteSegment { get; set; }

        public override ICriterionModel Copy()
        {
            return ShallowCopy();
        }
    }

    [VisitorGroupCriterion(
        Category = "Technical",
        DisplayName = "VisitorGroup Routing",
        Description = "")]
    public class RouteVisitorGroupCriterion : CriterionBase
    {
        public override bool IsMatch(IPrincipal principal, HttpContextBase httpContext)
        {
            // Check for DataToken added by RouteSegment.
            var routeDataTokens = httpContext.Request.RequestContext.RouteData.DataTokens;

            return routeDataTokens.ContainsKey("visitorgroup")
                   && ((string)routeDataTokens["visitorgroup"]).Equals(Model.RouteSegment, StringComparison.InvariantCultureIgnoreCase);
        }
    }

Use an initializable module to make this work:

    [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class RouteEventInitializationModule : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
            var segment = new VisitorGroupSegment("visitorgroup");

            var routingParameters = new MapContentRouteParameters()
            {
                SegmentMappings = new Dictionary<string, ISegment>()
            };

            routingParameters.SegmentMappings.Add("visitorgroup", segment);

            RouteTable.Routes.MapContentRoute(
                name: "visitorgroups",
                url: "{visitorgroup}/{language}/{node}/{partial}/{action}",
                defaults: new { action = "index" },
                parameters: routingParameters);
        }

        public void Uninitialize(InitializationEngine context)
        {
        }
    }

Now by adding this to a default Alloy site and creating two vistorgroups, one with segment ‘nl’ for Netherlands called 'NLD', and one with segment ‘en’ for United Kingdom called 'ENG'. I can display different content using personalization by visitor groups.

http://localhost:23529/	http://localhost:23529/en http://localhost:23529/en/en	http://localhost:23529/nl http://localhost:23529/nl/en

This is just a simple proof of concept, all seems to be working correctly, but I would not copy paste this into a production environment.

Let me know what you think or if you have any questions!

Country VisitorGroup routing in URL domain/visitorgroup/language/ (domain.com/nl/nl/)

Fri, 08 Nov 2019 08:09:35 GMT

This got me thinking about adding an URL segment to the URL for a specific country, where the country is represented by an episerver visitor group.

With the help of this blog explaining custom routing for Episerver I created my custom segment and a custom visitor group.

    public class VisitorGroupSegment : SegmentBase
    {
        public VisitorGroupSegment(string name) : base(name)
        {
        }

        public override bool RouteDataMatch(SegmentContext context)
        {
            SegmentPair nextValue = context.GetNextValue(context.RemainingPath);
            
            // For the first fragment, check if it is a 'visitor group' segment
            if (context.LastConsumedFragment is null && IsVisitorGroupSegment(nextValue.Next))
            {
                context.RemainingPath = nextValue.Remaining;
                
                // Data Token to be used by VisitorGroup Criterion
                context.RouteData.DataTokens.Add("visitorgroup", nextValue.Next);

                return true;
            }

            return false;
        }

        private static bool IsVisitorGroupSegment(string segment)
        {
            var visitorGroupRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRepository>();
            foreach (var vg in visitorGroupRepository.List())
            {
                foreach (var criterion in vg.Criteria)
                {
                    if (criterion.Model is RouteVisitorGroupSettings model &&
                        model.RouteSegment.Equals(segment, StringComparison.InvariantCultureIgnoreCase))
                    {
                        return true;
                    }
                }
            }

            return false;
        }

        public override string GetVirtualPathSegment(RequestContext requestContext, RouteValueDictionary values)
        {
            if (GetContextMode(requestContext.HttpContext, requestContext.RouteData)
                != ContextMode.Default)
            {
                return null;
            }

            return GetRoutingVisitorGroupByCurrentUser(new HttpContextWrapper(HttpContext.Current));
        }

        private static ContextMode GetContextMode(HttpContextBase httpContext, RouteData routeData)
        {
            var contextModeKey = "contextmode";

            if (routeData.DataTokens.ContainsKey(contextModeKey))
            {
                return (ContextMode)routeData.DataTokens[contextModeKey];
            }

            if (httpContext?.Request == null)
            {
                return ContextMode.Default;
            }

            if (!PageEditing.PageIsInEditMode)
            {
                return ContextMode.Default;
            }

            return ContextMode.Edit;
        }


        private static string GetRoutingVisitorGroupByCurrentUser(HttpContextBase httpContext)
        {
            var visitorGroupRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRepository>();
            var visitorGroupRoleRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRoleRepository>();

            var user = httpContext.User;

            // Check all visitor groups and check if one is active, if one is active return the segment.
            var visitorGroups = visitorGroupRepository.List();
            foreach (var vg in visitorGroups)
            {
                foreach (var criterion in vg.Criteria)
                {
                    if (criterion.Model is RouteVisitorGroupSettings model && visitorGroupRoleRepository.TryGetRole(vg.Name, out var virtualRoleObject))
                    {
                        if (virtualRoleObject.IsMatch(user, httpContext))
                        {
                            return model.RouteSegment;
                        }
                    }
                }
            }
            return null;
        }
    }

The custom visitor group:

    public class RouteVisitorGroupSettings : CriterionModelBase
    {
        [Required]
        public string RouteSegment { get; set; }

        public override ICriterionModel Copy()
        {
            return ShallowCopy();
        }
    }

    [VisitorGroupCriterion(
        Category = "Technical",
        DisplayName = "VisitorGroup Routing",
        Description = "")]
    public class RouteVisitorGroupCriterion : CriterionBase
    {
        public override bool IsMatch(IPrincipal principal, HttpContextBase httpContext)
        {
            // Check for DataToken added by RouteSegment.
            var routeDataTokens = httpContext.Request.RequestContext.RouteData.DataTokens;

            return routeDataTokens.ContainsKey("visitorgroup")
                   && ((string)routeDataTokens["visitorgroup"]).Equals(Model.RouteSegment, StringComparison.InvariantCultureIgnoreCase);
        }
    }

Use an initializable module to make this work:

    [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class RouteEventInitializationModule : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
            var segment = new VisitorGroupSegment("visitorgroup");

            var routingParameters = new MapContentRouteParameters()
            {
                SegmentMappings = new Dictionary<string, ISegment>()
            };

            routingParameters.SegmentMappings.Add("visitorgroup", segment);

            RouteTable.Routes.MapContentRoute(
                name: "visitorgroups",
                url: "{visitorgroup}/{language}/{node}/{partial}/{action}",
                defaults: new { action = "index" },
                parameters: routingParameters);
        }

        public void Uninitialize(InitializationEngine context)
        {
        }
    }

http://localhost:23529/	http://localhost:23529/en http://localhost:23529/en/en	http://localhost:23529/nl http://localhost:23529/nl/en

This is just a simple proof of concept, all seems to be working correctly, but I would not copy paste this into a production environment.

Let me know what you think or if you have any questions!

Country VisitorGroup routing in URL domain/visitorgroup/language/ (domain.com/nl/nl/)

Fri, 08 Nov 2019 08:09:35 GMT

This got me thinking about adding an URL segment to the URL for a specific country, where the country is represented by an episerver visitor group.

With the help of this blog explaining custom routing for Episerver I created my custom segment and a custom visitor group.

    public class VisitorGroupSegment : SegmentBase
    {
        public VisitorGroupSegment(string name) : base(name)
        {
        }

        public override bool RouteDataMatch(SegmentContext context)
        {
            SegmentPair nextValue = context.GetNextValue(context.RemainingPath);
            
            // For the first fragment, check if it is a 'visitor group' segment
            if (context.LastConsumedFragment is null && IsVisitorGroupSegment(nextValue.Next))
            {
                context.RemainingPath = nextValue.Remaining;
                
                // Data Token to be used by VisitorGroup Criterion
                context.RouteData.DataTokens.Add("visitorgroup", nextValue.Next);

                return true;
            }

            return false;
        }

        private static bool IsVisitorGroupSegment(string segment)
        {
            var visitorGroupRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRepository>();
            foreach (var vg in visitorGroupRepository.List())
            {
                foreach (var criterion in vg.Criteria)
                {
                    if (criterion.Model is RouteVisitorGroupSettings model &&
                        model.RouteSegment.Equals(segment, StringComparison.InvariantCultureIgnoreCase))
                    {
                        return true;
                    }
                }
            }

            return false;
        }

        public override string GetVirtualPathSegment(RequestContext requestContext, RouteValueDictionary values)
        {
            if (GetContextMode(requestContext.HttpContext, requestContext.RouteData)
                != ContextMode.Default)
            {
                return null;
            }

            return GetRoutingVisitorGroupByCurrentUser(new HttpContextWrapper(HttpContext.Current));
        }

        private static ContextMode GetContextMode(HttpContextBase httpContext, RouteData routeData)
        {
            var contextModeKey = "contextmode";

            if (routeData.DataTokens.ContainsKey(contextModeKey))
            {
                return (ContextMode)routeData.DataTokens[contextModeKey];
            }

            if (httpContext?.Request == null)
            {
                return ContextMode.Default;
            }

            if (!PageEditing.PageIsInEditMode)
            {
                return ContextMode.Default;
            }

            return ContextMode.Edit;
        }


        private static string GetRoutingVisitorGroupByCurrentUser(HttpContextBase httpContext)
        {
            var visitorGroupRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRepository>();
            var visitorGroupRoleRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRoleRepository>();

            var user = httpContext.User;

            // Check all visitor groups and check if one is active, if one is active return the segment.
            var visitorGroups = visitorGroupRepository.List();
            foreach (var vg in visitorGroups)
            {
                foreach (var criterion in vg.Criteria)
                {
                    if (criterion.Model is RouteVisitorGroupSettings model && visitorGroupRoleRepository.TryGetRole(vg.Name, out var virtualRoleObject))
                    {
                        if (virtualRoleObject.IsMatch(user, httpContext))
                        {
                            return model.RouteSegment;
                        }
                    }
                }
            }
            return null;
        }
    }

The custom visitor group:

    public class RouteVisitorGroupSettings : CriterionModelBase
    {
        [Required]
        public string RouteSegment { get; set; }

        public override ICriterionModel Copy()
        {
            return ShallowCopy();
        }
    }

    [VisitorGroupCriterion(
        Category = "Technical",
        DisplayName = "VisitorGroup Routing",
        Description = "")]
    public class RouteVisitorGroupCriterion : CriterionBase
    {
        public override bool IsMatch(IPrincipal principal, HttpContextBase httpContext)
        {
            // Check for DataToken added by RouteSegment.
            var routeDataTokens = httpContext.Request.RequestContext.RouteData.DataTokens;

            return routeDataTokens.ContainsKey("visitorgroup")
                   && ((string)routeDataTokens["visitorgroup"]).Equals(Model.RouteSegment, StringComparison.InvariantCultureIgnoreCase);
        }
    }

Use an initializable module to make this work:

    [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class RouteEventInitializationModule : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
            var segment = new VisitorGroupSegment("visitorgroup");

            var routingParameters = new MapContentRouteParameters()
            {
                SegmentMappings = new Dictionary<string, ISegment>()
            };

            routingParameters.SegmentMappings.Add("visitorgroup", segment);

            RouteTable.Routes.MapContentRoute(
                name: "visitorgroups",
                url: "{visitorgroup}/{language}/{node}/{partial}/{action}",
                defaults: new { action = "index" },
                parameters: routingParameters);
        }

        public void Uninitialize(InitializationEngine context)
        {
        }
    }

http://localhost:23529/	http://localhost:23529/en http://localhost:23529/en/en	http://localhost:23529/nl http://localhost:23529/nl/en

This is just a simple proof of concept, all seems to be working correctly, but I would not copy paste this into a production environment.

Let me know what you think or if you have any questions!

Integrating ContentKing in Episerver

Fri, 18 Oct 2019 16:21:24 GMT

Ever since a client of the company I work at came up with the SEO tool ContentKing we have been using this tool to monitor the SEO of multiple sites.

ContentKing uses real-time auditing and content tracking to define a SEO score for each page in a website.

Recently, I found out about the ContentKing CMS API that allows the user to trigger priority auditing of a page through an API. Basically telling ContentKing that a page has changed, and requesting re-evaluation of the SEO score.

In this blog I will explain how I integrated the CMS API in an episerver project.

Publish event

Firstly I needed to hook up to the Episerver publish event. This I did with an Initializable Module.

    [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class PublishEventInitializationModule : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
            var contentEvents = ServiceLocator.Current.GetInstance<IContentEvents>();
            contentEvents.PublishingContent += contentEvents_PublishingContent;
        }

        public void Uninitialize(InitializationEngine context)
        {
            var contentEvents = ServiceLocator.Current.GetInstance<IContentEvents>();
            contentEvents.PublishingContent -= contentEvents_PublishingContent;
        }

        void contentEvents_PublishingContent(object sender, EPiServer.ContentEventArgs e)
        {
            var contentKingService = ServiceLocator.Current.GetInstance<IContentKingService>();
            contentKingService?.TriggerPageAudit(e.Content);
        }
    }

When a page is published now the ContentKingService is called to trigger page auditing. The service reads the ContentKing API key needed using a settingsservice, and uses the UrlHelper and ISiteDefinitionResolver to retrieve the full url of the page published. Then does a POST to the ContentKing API using an HttpClient.

[ServiceConfiguration(ServiceType = typeof(IContentKingService), Lifecycle = ServiceInstanceScope.HttpContext)]
    public class ContentKingService : IContentKingService
    {
        private readonly UrlHelper _urlHelper;
        private readonly ISiteDefinitionResolver _siteDefResolver;
        private readonly ISettingsService _settingsService;

        private string EndPointUrl = "https://api.contentkingapp.com/";

        public ContentKingService()
        {
            _urlHelper = ServiceLocator.Current.GetInstance<UrlHelper>();
            _siteDefResolver = ServiceLocator.Current.GetInstance<ISiteDefinitionResolver>();
            _settingsService = ServiceLocator.Current.GetInstance<ISettingsService>();
        }

        public void TriggerPageAudit(IContent content)
        {
            var settings = _settingsService.GetSettings();

            try
            {
                if (settings != null &&
                    settings.TriggerAnalyzeOnPublish &&
                    !string.IsNullOrEmpty(settings.CmsApiKey))
                {
                    var fullPageUrl = ResolveUrl(content);

                    var url = EndPointUrl + "v1/check_url";
                    var requestHeaders = new NameValueCollection { { "Authorization", $"token {settings.CmsApiKey}" } };
                    var json = JsonConvert.SerializeObject(new
                    {
                        url = fullPageUrl
                    });

                    var result = PostObject<object>(url, json, requestHeaders);
                }
            }
            catch
            {
                //ToDo Do something with exceptions..
            }
        }

        public string ResolveUrl(IContent content)
        {
            var contentUrl = _urlHelper.ContentUrl(content.ContentLink);
            if (contentUrl.Contains("//"))
                return contentUrl;
            
            return new Uri(_siteDefResolver.GetByContent(content.ContentLink, true, true).SiteUrl, contentUrl).AbsoluteUri;
        }

        private static T PostObject<T>(string url, string jsonContent, NameValueCollection requestHeaders = null)
        {
            var httpContent = new StringContent(jsonContent, Encoding.UTF8, "application/json");
            using (var client = new HttpClient())
            {
                if (requestHeaders != null && requestHeaders.Count > 0)
                {
                    foreach (string key in requestHeaders.Keys)
                    {
                        client.DefaultRequestHeaders.Add(key, requestHeaders[key]);
                    }
                }

                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                var httpResponse = client.PostAsync(url, httpContent).Result;

                if (!httpResponse.IsSuccessStatusCode)
                    throw new Exception($"{httpResponse.StatusCode} | {httpResponse.ReasonPhrase}");

                return httpResponse.Content.ReadAsAsync<T>().Result;
            }
        }
    }

CMS Admin Page

To make the integration more flexible I wanted to create a page in the cms-admin section of Episerver to manage the ContentKing API key, and enable or disable the triggering. To create a page in cms-admin section I created a controller for the page and added the EPiServer.PlugIn.GuiPlugIn attribute.

    [EPiServer.PlugIn.GuiPlugIn(
        Area = EPiServer.PlugIn.PlugInArea.AdminMenu,
        Url = "/ContentKingAdmin/Index",
        DisplayName = "ContentKing Admin")]
    public class ContentKingAdminController : Controller
    {
        private readonly ISettingsService _settingsService;

        public ContentKingAdminController()
        {
            _settingsService = ServiceLocator.Current.GetInstance<ISettingsService>();
        }

        public ActionResult Index()
        {
            var model = _settingsService.GetSettings();

            return View(model);
        }

        [System.Web.Mvc.HttpPost]
        public ActionResult Save(SettingsModel model)
        {
            _settingsService.SaveSettings(model);

            return RedirectToAction("Index");
        }
    }

Then I created a view to create a ui for the settings. (I stole some styling from another episerver admin page)

@{
    Layout = null;
}

@model AlloyContentKing.Models.SettingsModel

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Mimic Internet Explorer 7 -->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <link rel="stylesheet" type="text/css" href="/EPiServer/Shell/11.19.1/ClientResources/epi/themes/legacy/ShellCore.css">
    <script type="text/javascript" src="/EPiServer/Shell/11.19.1/ClientResources/ShellCore.js"></script>
    <link rel="stylesheet" type="text/css" href="/EPiServer/Shell/11.19.1/ClientResources/epi/themes/legacy/ShellCoreLightTheme.css">
    <script type="text/javascript" src="/EPiServer/CMS/11.19.1/ClientResources/ReportCenter/ReportCenter.js"></script>
    <link href="../../../App_Themes/Default/Styles/system.css" type="text/css" rel="stylesheet">
    <link href="../../../App_Themes/Default/Styles/ToolButton.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="epi-contentContainer epi-padding">
        <div class="epi-contentArea">
            <h1 class="EP-prefix">ContentKing Settings</h1>
            <p class="EP-systemInfo">
                Settings for ContentKing module.
            </p>
        </div>

        <div class="epi-formArea">
            <form id="cmsApiSettings" method="POST" action="\ContentKingAdmin\Save">
                <strong>ContentKing CMS Api</strong>
                <div class="epi-size20">
                    <div>
                        <label>Trigger Page Analize on Publish</label>
                        @Html.EditorFor(x => Model.TriggerAnalyzeOnPublish)
                    </div>
                    <div>
                        <label>ContentKing CMS Api Key</label>
                        @Html.EditorFor(x => Model.CmsApiKey)
                    </div>
                </div>
                <div class="epi-buttonContainer">
                    <span class="epi-cmsButton">
                        <input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Save"
                               type="submit"
                               name="ctl00$FullRegion$MainRegion$ImportFile"
                               id="FullRegion_MainRegion_ImportFile"
                               value="Save"
                               title="Save">
                    </span>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

The Admin page looks like this:

Dynamic Data Store

To store the settings I use Episerver Dynamic Data Store (DDS). To store data in the DDS you first need to create a model that Implements IDynamicData

    public class SettingsModel : IDynamicData
    {
        public Identity Id { get; set; }

        public bool TriggerAnalyzeOnPublish { get; set; }

        public string CmsApiKey { get; set; }
    }

The SettingsService reads or writes the settings from and to the DDS.

    [ServiceConfiguration(ServiceType = typeof(ISettingsService), Lifecycle = ServiceInstanceScope.Singleton)]
    public class SettingsService : ISettingsService
    {
        private Guid _settingsId = new Guid("05663fcf-9f39-4fc2-af49-bddfb76953e0");

        public SettingsModel GetSettings()
        {
            var store = DynamicDataStoreFactory.Instance.CreateStore(typeof(SettingsModel));
            return store.Items<SettingsModel>().FirstOrDefault(x => x.Id.ExternalId == _settingsId);
        }

        public void SaveSettings(SettingsModel model)
        {
            model.Id = _settingsId;

            var store = DynamicDataStoreFactory.Instance.CreateStore(typeof(SettingsModel));
            store.Save(model);
        }
    }

This concludes my first ever blog. Let me know what you think or if you have any questions!

Integrating ContentKing in Episerver

Fri, 18 Oct 2019 14:21:24 GMT

Ever since a client of the company I work at came up with the SEO tool ContentKing we have been using this tool to monitor the SEO of multiple sites.

ContentKing uses real-time auditing and content tracking to define a SEO score for each page in a website.

In this blog I will explain how I integrated the CMS API in an episerver project.

Publish event

Firstly I needed to hook up to the Episerver publish event. This I did with an Initializable Module.

    [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class PublishEventInitializationModule : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
            var contentEvents = ServiceLocator.Current.GetInstance<IContentEvents>();
            contentEvents.PublishingContent += contentEvents_PublishingContent;
        }

        public void Uninitialize(InitializationEngine context)
        {
            var contentEvents = ServiceLocator.Current.GetInstance<IContentEvents>();
            contentEvents.PublishingContent -= contentEvents_PublishingContent;
        }

        void contentEvents_PublishingContent(object sender, EPiServer.ContentEventArgs e)
        {
            var contentKingService = ServiceLocator.Current.GetInstance<IContentKingService>();
            contentKingService?.TriggerPageAudit(e.Content);
        }
    }

[ServiceConfiguration(ServiceType = typeof(IContentKingService), Lifecycle = ServiceInstanceScope.HttpContext)]
    public class ContentKingService : IContentKingService
    {
        private readonly UrlHelper _urlHelper;
        private readonly ISiteDefinitionResolver _siteDefResolver;
        private readonly ISettingsService _settingsService;

        private string EndPointUrl = "https://api.contentkingapp.com/";

        public ContentKingService()
        {
            _urlHelper = ServiceLocator.Current.GetInstance<UrlHelper>();
            _siteDefResolver = ServiceLocator.Current.GetInstance<ISiteDefinitionResolver>();
            _settingsService = ServiceLocator.Current.GetInstance<ISettingsService>();
        }

        public void TriggerPageAudit(IContent content)
        {
            var settings = _settingsService.GetSettings();

            try
            {
                if (settings != null &&
                    settings.TriggerAnalyzeOnPublish &&
                    !string.IsNullOrEmpty(settings.CmsApiKey))
                {
                    var fullPageUrl = ResolveUrl(content);

                    var url = EndPointUrl + "v1/check_url";
                    var requestHeaders = new NameValueCollection { { "Authorization", $"token {settings.CmsApiKey}" } };
                    var json = JsonConvert.SerializeObject(new
                    {
                        url = fullPageUrl
                    });

                    var result = PostObject<object>(url, json, requestHeaders);
                }
            }
            catch
            {
                //ToDo Do something with exceptions..
            }
        }

        public string ResolveUrl(IContent content)
        {
            var contentUrl = _urlHelper.ContentUrl(content.ContentLink);
            if (contentUrl.Contains("//"))
                return contentUrl;
            
            return new Uri(_siteDefResolver.GetByContent(content.ContentLink, true, true).SiteUrl, contentUrl).AbsoluteUri;
        }

        private static T PostObject<T>(string url, string jsonContent, NameValueCollection requestHeaders = null)
        {
            var httpContent = new StringContent(jsonContent, Encoding.UTF8, "application/json");
            using (var client = new HttpClient())
            {
                if (requestHeaders != null && requestHeaders.Count > 0)
                {
                    foreach (string key in requestHeaders.Keys)
                    {
                        client.DefaultRequestHeaders.Add(key, requestHeaders[key]);
                    }
                }

                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                var httpResponse = client.PostAsync(url, httpContent).Result;

                if (!httpResponse.IsSuccessStatusCode)
                    throw new Exception($"{httpResponse.StatusCode} | {httpResponse.ReasonPhrase}");

                return httpResponse.Content.ReadAsAsync<T>().Result;
            }
        }
    }

CMS Admin Page

    [EPiServer.PlugIn.GuiPlugIn(
        Area = EPiServer.PlugIn.PlugInArea.AdminMenu,
        Url = "/ContentKingAdmin/Index",
        DisplayName = "ContentKing Admin")]
    public class ContentKingAdminController : Controller
    {
        private readonly ISettingsService _settingsService;

        public ContentKingAdminController()
        {
            _settingsService = ServiceLocator.Current.GetInstance<ISettingsService>();
        }

        public ActionResult Index()
        {
            var model = _settingsService.GetSettings();

            return View(model);
        }

        [System.Web.Mvc.HttpPost]
        public ActionResult Save(SettingsModel model)
        {
            _settingsService.SaveSettings(model);

            return RedirectToAction("Index");
        }
    }

Then I created a view to create a ui for the settings. (I stole some styling from another episerver admin page)

@{
    Layout = null;
}

@model AlloyContentKing.Models.SettingsModel

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Mimic Internet Explorer 7 -->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <link rel="stylesheet" type="text/css" href="/EPiServer/Shell/11.19.1/ClientResources/epi/themes/legacy/ShellCore.css">
    <script type="text/javascript" src="/EPiServer/Shell/11.19.1/ClientResources/ShellCore.js"></script>
    <link rel="stylesheet" type="text/css" href="/EPiServer/Shell/11.19.1/ClientResources/epi/themes/legacy/ShellCoreLightTheme.css">
    <script type="text/javascript" src="/EPiServer/CMS/11.19.1/ClientResources/ReportCenter/ReportCenter.js"></script>
    <link href="../../../App_Themes/Default/Styles/system.css" type="text/css" rel="stylesheet">
    <link href="../../../App_Themes/Default/Styles/ToolButton.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="epi-contentContainer epi-padding">
        <div class="epi-contentArea">
            <h1 class="EP-prefix">ContentKing Settings</h1>
            <p class="EP-systemInfo">
                Settings for ContentKing module.
            </p>
        </div>

        <div class="epi-formArea">
            <form id="cmsApiSettings" method="POST" action="\ContentKingAdmin\Save">
                <strong>ContentKing CMS Api</strong>
                <div class="epi-size20">
                    <div>
                        <label>Trigger Page Analize on Publish</label>
                        @Html.EditorFor(x => Model.TriggerAnalyzeOnPublish)
                    </div>
                    <div>
                        <label>ContentKing CMS Api Key</label>
                        @Html.EditorFor(x => Model.CmsApiKey)
                    </div>
                </div>
                <div class="epi-buttonContainer">
                    <span class="epi-cmsButton">
                        <input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Save"
                               type="submit"
                               name="ctl00$FullRegion$MainRegion$ImportFile"
                               id="FullRegion_MainRegion_ImportFile"
                               value="Save"
                               title="Save">
                    </span>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

The Admin page looks like this:

Dynamic Data Store

To store the settings I use Episerver Dynamic Data Store (DDS). To store data in the DDS you first need to create a model that Implements IDynamicData

    public class SettingsModel : IDynamicData
    {
        public Identity Id { get; set; }

        public bool TriggerAnalyzeOnPublish { get; set; }

        public string CmsApiKey { get; set; }
    }

The SettingsService reads or writes the settings from and to the DDS.

    [ServiceConfiguration(ServiceType = typeof(ISettingsService), Lifecycle = ServiceInstanceScope.Singleton)]
    public class SettingsService : ISettingsService
    {
        private Guid _settingsId = new Guid("05663fcf-9f39-4fc2-af49-bddfb76953e0");

        public SettingsModel GetSettings()
        {
            var store = DynamicDataStoreFactory.Instance.CreateStore(typeof(SettingsModel));
            return store.Items<SettingsModel>().FirstOrDefault(x => x.Id.ExternalId == _settingsId);
        }

        public void SaveSettings(SettingsModel model)
        {
            model.Id = _settingsId;

            var store = DynamicDataStoreFactory.Instance.CreateStore(typeof(SettingsModel));
            store.Save(model);
        }
    }

This concludes my first ever blog. Let me know what you think or if you have any questions!