My TNEW Template Needs Updating, Again!

Here’s the case: Once again our ticketing site needs an update, the calendar moved to a new location, and our new season starts soon. Our developer can make the changes, but this happens all the time. We need a better solution. Fortunately one exists!
In the past there were two solutions for a TNEW template; the first was to make it general enough that it hardly ever needed updates, the other was to make it identical to your website and make changes often.
The first required less work but it was obvious that the user was taken away from your site. The second maintains the appearance that your ticketing site and main website are one in the same. Now we can maintain the visual integrity of your website without needing a developer to make changes specifically to and for your TNEW template.
Here is the technical jargon. Tessitura has an implementation called TNEW that provides a way to sell tickets on a secure server while providing a template which can be styled to maintain the branding of your site. This is done by making a content-less page that looks like your website and a css file to style the data, this is your TNEW template.
In the past, we would make our TNEW template a static HTML file that would be updated manually by a developer to be sure it followed all of the set requirements. So we needed a new solution that wouldn’t require manual entry.
Our solution was to create a page template inside our web project, alongside our other templates, that has no content except the TNEW comment and the navigation. This would be generated the same way as the main site and we just needed to send the only instance of the template URL to TNEW. Problem solved!
Except it isn’t yet. The reason we had that separate HTML file in the beginning was that TNEW has requirements that were tricky to follow. Since this template is going to be used on a different server with a different URL we can’t use relative links which is how your navigation is often rendered. Umbraco actually doesn’t let you have an absolute link if you use the ‘Choose internal page’ option. We might not want to render the entire site using absolute links, this includes js and css files you want to include, but we don’t want to go back to that HTML file either. So here is the full solution.
Relative links were used in the header and footer navigation because we deployed to multiple unique URLs. Our solution needs to include 3 things:

1. Absolute links for everything in the header and footer
2. Correct links for all link entry options
3. Links that change for each environment

Good UX Means Good Business

In a world where technology is rapidly advancing and user expectations are rising, it’s no longer enough to have an average user experience; to delight your users and surpass your competition you must strive for the exceptional.

Get the Guide

Getting the absolute URL for a link isn’t too difficult if it is an internal page, Umbraco has a helper called ‘UrlAbsolute’ that takes the page ID and will give you the full path. Since your JS file isn’t a page it needs to have a URL that updates. Create a key in your web.config that contains your current domain and have each transformation update it. Now we have the hard part, Umbraco’s Rich Text Editor.
Since this content can be anything, we need to search the whole thing and find any links that need to change.

//Check content for a link
if (content != "" && content.Contains("href="))
{
    //create an HtmlDocument
    HtmlDocument document = new HtmlDocument();
    document.LoadHtml(content);
    //check if the link is relative
    if (content.Contains("href=\"/"))
    {
        //take each instance of a link
        foreach (HtmlNode node in document.DocumentNode.SelectNodes("//a[@href]"))
        {
            //assign the link to a variable
            string isrc = node.Attributes["href"].Value;
            //does the link contain the domain
            if (!isrc.Contains("domain.com"))
            {
                //add the domain to the begining of the relative link
                var newValue = node.Attributes["href"].Value.Insert(0, "https://domain.com");
                //remove the original relative link
                node.Attributes["href"].Remove();
                //add the new absolute link
                node.SetAttributeValue("href", newValue);
            }
        }
    }
     //all links already meet our requirementse
}
else
{
    //there is no content or there aren’t any links in the content
}

Now we have our TNEW template within our project so it will get content updates as they occur. We can make changes as we need to without concerning ourselves with the TNEW template. And if you have your testing environment set up you can even test the changes without the fear of breaking the website.