UmbUKFest LogoIt’s that time of year again, the run up to Christmas, the weather turns cold and we’ve all swapped to our winter wardrobe.  But more importantly it’s time for the Umbraco UK Festival 2013!!

On Thursday 7th November, The Outfield team headed down to London town to meet up with the Umbraco crew.  The annual Umbraco UK Festival is hosted and organised by the team at Cogworks, and what a great job they did. 

The turnout for the event was massive, with lots of new faces and some really inspiring talks.  And, as always, the day was captured by the brilliant Doug Robar of Percipient Studios, with his amazing photography skills.  So good are the photos he took, we’ve borrowed a couple to show you guys, thanks Doug!

UmbUKFest Niels

The first day was dedicated to a Hackathon, a chance for the developers to do a bit of bug bashing.  A whopping 48 bugs were fixed, a new #UmbUKFest record – well done everybody!!!

The second day of the event was dedicated to talks from various Umbraco teams and individuals,  including our very own Matt Brailsford, who gave a great talk (biased!) on the potential solutions for ‘Bridging the Gap’ between frontend and backend development (slides and video presentation coming soon). 

Matt Lucy UmbUKFest

Now as a non-developer (although I am Umbraco level 1 certified – not sure I mentioned that to anyone!), attending this event was just as interesting for me as it was for Matt.  Whilst the majority of the talks were super technical, it gave me more of an insight into what Matt does, enabling me to understand his requirements as a developer, as well as those of our clients, since I take care of project management, sales and accounts.

UmbUKFest Talk

UmbUKFest MerchPerhaps the most important part for me was the chance to meet so many new people and catch up with those whom I have already met.  The warm, friendly and fun atmosphere is always great at an Umbraco event, whether it be training, attending talks or simply taking part in social activities (the pub).  Every time we meet with people and discuss ideas, talk about what we have done and ask advice, it always gets us thinking and inspires us to perhaps do something new, make changes to what we’re currently doing, or in turn help others by imparting the knowledge we have.  It’s great to talk to people, understand their businesses and forge friendships, all the while strengthening connections and the Umbraco community.  

HyperlinkHere at The Outfield we work on quite a few websites for people and so we get to see a lot of common patterns emerging. One such pattern is that of having links in the sites navigation that should link to external web pages.

As you may or may not know, there are some special property aliases in Umbraco that allow you to redirect between pages on the current site, however unfortunately there is no built in method for having a page redirect to an external URL.

After speaking with Lee Kelleher though, I think we came up with a pretty nice way of handling these, so what follows is a short guide on how you can do just this in Umbraco 6.

Create a Property
We start the process by creating a text string property on our doc types (or better yet, just on your master doc type) with an alias of umbracoExternalUrl.

umbracoExternalUrl

Next, go ahead and enter an external URL in the property for one of your content nodes.

property

Create an IUrlProvider
Now that we have our property set up, we now need to let Umbraco know that whenever this property is set it should use this value as a nodes URL instead of the default generated URL. To do this, we will use a cool new feature in Umbraco 6 which is an UrlProvider. The IUrlProvider interface allows us to define our own logic when generating a URL for a given node. With that said then, go ahead and setup a class that implements that interface as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using Umbraco.Core;
using Umbraco.Web;
using Umbraco.Web.Routing;

namespace TheOutfield.Routing
{
    public class ExternalUrlProvider : IUrlProvider
    {
        public string GetUrl(UmbracoContext umbracoContext, int id, Uri current, UrlProviderMode mode)
        {
            var node = umbracoContext.ContentCache.GetById(id);
            return node.HasValue("umbracoExternalUrl") 
                ? node.GetPropertyValue<string>("umbracoExternalUrl") 
                : null;
        }

        public IEnumerable<string> GetOtherUrls(UmbracoContext umbracoContext, int id, Uri current)
        {
            return Enumerable.Empty<string>();
        }
    }
}

The interface itself is pretty simple and all we are doing is implementing the GetUrl method checking whether the current node has an umbracoExternalUrl property and if so, return that as the URL otherwise null (if the response is null then Umbraco will move on to the next UrlProvider it finds and so will eventually fall back to the default UrlProvider and thus the default internal URL).

Now that we have defined our UrlProvider, we need to make Umbraco aware of it, so to do this, create an ApplicationEventHandler like so:

using TheOutfield.Routing;
using Umbraco.Core;
using Umbraco.Web.Routing;

namespace TheOutfield
{
    public class Bootstrapper : IApplicationEventHandler
    {
        public void OnApplicationInitialized(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        { }

        public void OnApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            UrlProviderResolver.Current.InsertTypeBefore<DefaultUrlProvider, ExternalUrlProvider>();
        }

        public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        { }
    }
}

If you check back to the properties tab of your content node now, you will see that Umbraco does indeed return your external URL as the nodes URL.

url

Create a PublishedContentRequest Event Handler
We could just finish up here, but there is one small problem, which is if you navigate to the internal, Umbraco URL for your node, Umbraco will attempt to render the page rather than redirecting us to the external URL. As that's not what we want, lets go ahead and setup a redirect. To do this we will use a handy event from within the Umbraco request pipline, PublishedContentRequest.Prepared which simply allows us to execute some code after the request context has been created, but before the page is actually executed. We'll declare our event handler in our ApplicationEventHandler class as follows:

using TheOutfield.Routing;
using Umbraco.Core;
using Umbraco.Web;
using Umbraco.Web.Routing;

namespace TheOutfield
{
    public class Bootstrapper : IApplicationEventHandler
    {
        public void OnApplicationInitialized(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        { }

        public void OnApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            UrlProviderResolver.Current.InsertTypeBefore<DefaultUrlProvider, ExternalUrlProvider>();
            PublishedContentRequest.Prepared += (sender, args) =>
            {
                // Check to make sure the request is valid
                var request = sender as PublishedContentRequest;
                if (request == null || !request.HasPublishedContent)
                    return;

                // Check for external url
                var url = request.PublishedContent.GetPropertyValue<string>("umbracoExternalUrl");
                if (string.IsNullOrWhiteSpace(url))
                    return;

                // Perform the redirect
                request.SetRedirect(url, 301);
            };
        }

        public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        { }
    }
}

So now if you attempt to navigate to your nodes internal URL, you should find Umbraco will happily redirect you away to your external URL as required.

Tada!

Finishing Touches
Now that we have everything working, a nice finishing touch we like to add is to give our editors a bit of feedback to let them know the page is set to redirect. The best way we have found to do this is to use the amazing Page State Icons package by the umBristol gang.

Simply install the package then edit the PageStateIcons.config file as follows:

<pageStateIconsConfigurationSection xmlns="UmBristol.PageStateIcons">
  <rules>
    <add name="umbracoNaviHide" xPath="umbracoNaviHide = '1'" overlayIconPath="/Umbraco/Plugins/PageStateIcons/UmbracoNaviHide.png"
      description="Adds overlay to show the page is hidden from navigation."
      top="7" left="11" />
    <add name="umbracoRedirect" xPath="self::*[@isDoc and (normalize-space(umbracoRedirect) or normalize-space(umbracoExternalUrl))]"
      overlayIconPath="/Umbraco/Plugins/PageStateIcons/UmbracoRedirect.png"
      description="Adds an overlay to show the page is a redirect page."
      top="0" left="22" />
    <add name="umbracoInternalRedirectId" xPath="self::*[@isDoc and normalize-space(umbracoInternalRedirectId) and not(normalize-space(umbracoRedirect) or normalize-space(umbracoExternalUrl))]"
      overlayIconPath="/Umbraco/Plugins/PageStateIcons/umbracoInternalRedirectId.png"
      description="Adds an overlay to show the page is a redirect page."
      top="0" left="22" />
  </rules>
</pageStateIconsConfigurationSection>

And now within the content tree you'll see a nice little arrow overlay on your node to notify you that the page is set to redirect.

icons

As mentioned at the start of the article, this seems to becoming a fairly regualr feature request and we have found this solution to be an effective way to implement external redirects within Umbraco.

We hope you find it handy too.

stripeAfter attending the Tea Commerce training in Manchester a couple of weekd ago we thought we'd do a little exercise to help strech our legs with the new things we'd learnt and give something back at the same time.

One of the simplest ways to give back to the project is to help contribute with the list of supported payment providers (after all, there are millions out there). We had a look at the providers they had and noticed they were missing one for Stripe. As this service has recently launched in the UK, we thought it would be a perfect opportunity for us to contribute and to learn a bit more about Stripe at the same time.

Well, one day later and here it is :)

Installing the Provider
Installing the Stripe payment provider is a little trickier than most of the out of the box providers, but that is because stripe payments are processed inline on your actual website rather than being redirected away to a payment portal. That said, it's only an extra couple of steps and should be more than easy enough for most developers to implement.

(NB If you are using the newly released TeaCommerce 2.2 you can skip ahead to Configuring the Provider as the Stripe provider will be pre-installed for you)

You can find the source for the payment provider over on bitbucket. To install, you can either compile the whole solution and copy over the TeaCommerce.PaymentProviders.dll, Stripe.net.dll and the StripePaymentForm.cshtml file located in the TeaCommerce.PaymentProviders.UI project (this should go in your MacroPartials folder). Or you can just copy out the Stripe.cs file located in the TeaCommerce.PaymentProviders project into your own project, along with the Stripe.net.dll and StripePaymentForm.cshtml files and compile as part of your solution.

Either way, once you have done this, that should be all the files you need, and you should now be able to choose Stripe as a Payment Provider within Tea Commerce.

Payment Provider Dropdown

Configuring the Provider
To begin configuring your stripe provider, start by creating a new payment method in your store settings section selecting Stripe as the payment provider from the dropdown and click the load default settings button.

Payment Provider Settings

Edit the settings by copying your api keys from Stripe and setting up the various required URLS. The form_url parameter should point to the page on your site which will contain the payment form (you'll set this up in a moment). The continue_url should point to the page the user should be sent to after processing payment and the cancel_url should point to the page to redirect to if the user wants to cancel processing the payment at any point. In addition, you can also toggle between test and live modes and decide whether payments should be captured instantly, or whether to just take pre-authorization.

Setting up the Payment Form
Once the payment provider is setup, we'll want to setup the payment form macro. To do this, navigate to the developer section and create a new Macro selecting the StripePaymentForm.cshtml file you copied over earlier as the source script file.

Payment Form Macro

Next, create your checkout process Templates as you normally would in Tea Commerce, however this time be sure to create an additional Template for your payment step and drop in the macro you just created.

Payment Form Template

Finally, create your checkout process including a page for the payment step, using the payment template you just created (making sure the various urls match those in the provider settings) and when a call to the TC.GeneratePaymentForm method is made, it will generate a form which should now redirect you to your payment page.

Payment Form

Filling in the form will automatically submit the entered credit card details to Stripe via javascript over a secure connection and return an encrypted token which is posted back to the payment provider to take the actual payment. Once payment is processed, the provider will then automatically forward you on to the continue url declared in the provider settings.

Job done!

There are of course a few nicities you could and probably should add to this process, like making your checkout process run over https and you might also want to modify the StripePaymentForm.cshtml file to fit in more with your site design. But those things we will leave to you to implement :)

We had great fun implementing the Stripe payment provider, and learnt more about Tea Commerce and Stripe. We hope then that by releasing it freely, it will also help others to add Stripe support to their Tea Commerce solution and maybe encourage some to have a go at creating one themselves.

Certified Level 1 BadgeAs you will have no doubt gathered, The Outfield loves all things Umbraco.  Matt Brailsford, the developer behind the company, is a keen advocate for Umbraco and a well-respected, contributing member of the Umbraco community. 

Nearly four months ago I, Lucy Brailsford, joined Matt at The Outfield, taking on all manner of roles; project manager, admin, accounts and chief brew maker.  I also began to use the Umbraco CMS for taking care of the website for our other business The Big Watch Shop.  It soon became apparent that I should learn more about the Umbraco interface and the basic building blocks behind the CMS.  Now Matt of course could teach me many things, but we both felt it necessary that I embark on the Umbraco Level 1 certification, not only for the badge of honour but for the teachings of the one and only Doug Robar.

Now as a complete novice to all things dev, including basic HTML, this I admit was more than a little daunting to me.  I understood some of the lingo having lived with a developer for over 11 years, but the actual coding was a mystery.  However I needn’t have worried, as the two day training course was structured well, with great course material to help you build a responsive site through the Umbraco CMS.  Each step was clear and of course anything that wasn’t understood was quickly explained by Doug, and Matt (I had my own tutor!).

UL1 Training Room

Apart from passing my exam (whoop!), I think the really exciting part for me was to understand more about what Matt does.  The training has given me real insight into the hard work he has and does put in.  The value gained from the training will undoubtedly come when speaking with clients, understanding their requirements and how we, using Umbraco, can meet and exceed their expectations.

So all in all it has been a great experience and one I would recommend, not only to developers interested in Umbraco, but to those with other roles within an agency, such as designers, project managers and sales teams.  This could really help them to better understand their developers requirements, their clients requirements and the processes required for an Umbraco powered site.

TCCDHere at The Outfield, we have shared our love for Tea Commerce before as we think it's one of the best / most flexible e-commerce platforms avilable built on top of the Umbraco CMS framework.

We've already had some great success with it both for the clients we work with and our very own side project The Big Watch Shop

When we found out the guys at Tea Solutions were holding training sessions on the latest v2 release though (in our own back yard of Manchester no less), we knew we just had to join in.

The course spanned two days and was made up of five attendees and was led by Anders Burla, who is one of the main guys working on developing the Tea Commerce solution. On day one we focused on setting up the basic web store from creating product pages through the entire checkout process and ended the day by coverting it all to be AJAX driven.

Photo 09 09 2013 16 16 24

On day two we dived more into how to extend Tea Commerce to do all the advanced features many clients require such as discounts, coupons and advanced shipping costs aswell as integration with different payment providers and how to work with Tea Commerce in a multi lingual setup.

All in all we found the course to be very informative, showing us things we didn't know about the platform and helped confirm what we already knew to be correct (there were lots of little helpful tips and tricks too that you'll only ever get from people who know the product inside out). As an added bonus, by attending the course it now allows us to call ourselves Certified Tea Commerce Developers :)

Photo 10 09 2013 15 03 22

If you work with Umbraco and are keen to learn more about Tea Commerce, we would highly recommend that you sign yourself up on the next sessions. And as for us, we will be working hard towards our next goal of Tea Commerce Solution Provider, so if you do have any e-commerce projects you'd need a hand on, be sure to get in touch.

Newer Posts