Just Racing UK - Selling an Event with Drupal, Ubercart, Views, Dates and some glue

In October 2008, NuMedia Advantage launched the new Just Racing UK website, a racing and Triathlon (running, cycling and swimming) event management website. The build process was relatively complicated, involving a lot of modules, some of which were dropped, some of which worked right out the box, and some of which required a good degree of hacking and customisation.

Requirements

Just Racing's first website was created by a different design company and offered the visitor the ability to view up and coming race events, and book races electronically through a third party. As well as bulking out the process for the visitor, Just Racing incurred very high processing fees.

We were asked to take inspiration from the exiting site, but add the ability to: -

• Promote and Process events
• Offer payment processing online
• Vary sponsorships
• Create and manage online start-lists (based upon age and swim-times)
• Display previous years race results
• Manage race-specific newsletter subscriptions
• Utilise an existing database

It went without saying, but a fresh new look was also required.

The Core Modules

With it's powerful, open framework and incredible array of modules, Drupal (version 5.x) was the first choice for a base platform (we did want Drupal 6, but at the time, Ubercart was not available for this release). The usual modules such as CCK, Views, FCKEditor and Webform were installed as standard.

The tricky part was finding an appropriate event booking and payment system, that could be developed into a larger database for the start-list tracking and newsletter subscriptions.

We looked at CiviCRM, Event, E-Commerce and Ubercart. After a lot of testing, trial and error, Ubercart was chosen as a base for the payment processing. We just needed to turn an event into a product taking into account product expiry (after the event date), single quantity (each user can only register once) and links to previous years' results and start-lists.

For a full list of modules we used, see the technical information at the bottom of this article.

Selling an Event with Ubercart

As with most Drupal concepts, there are many ways to achieve a task. Although there is an Ubercart Event module, after some testing we decided an integration with CCK Date was a better way to go. CCK works so well with views and allows for a much greater level of customisation on the date field that the Event module.

So, a Race Event CCK content type / Ubercart class was created using a combination of CCK Date, CCK Filefield (for results), CCK Imagefield as well as the standard CCK text fields.

By default, Ubercart has loads of physical product fields such as weight, stock level etc.. A custom module was created at this stage to hide these unnecessary inputs using the Form API. After all, an event needs to look like an event for the race editors as well as the visitors.

The final customisation for the race event was an expiry module. Once a race has occurred, we do not want visitors to be able to register for it, although they will revisit the node to view race results. This custom module simply hides the "Add-to-cart" button if a certain date has past and checks again upon payment (for saved carts from the past).

Race events have a different price depending upon UK club membership discounts as well as single / team registrations. For this reason, Ubercart's Fixed Price and AAC (Ajax Attribute Calculation) contributions were installed and several minor module and theme hacks were required to make it all work as required.

The Sponsors

Just Racing have a variety of sponsors for each event, as well as varying sponsors over time (which are displayed on the home page). A simple view was created to randomly vary the position of the sponsors. The sponsor nodes themselves use CCK Redirection and CCK Image to display a hyperlinked image to the sponsors' website.

Event-Specific Newsletter Subscriptions

Just Racing UK needed to manage E-mail lists of people who have entered a particular event. Most of the events repeat annually, and Just Racing did not need year-specific filtering for the newsletters. This made the task very simple - we just created roles for each race name and created an Ubercart product feature to automatically add purchasers of a race to its particular role. 

The Simplenews with Simplenews Roles modules can be setup to send newsletters to the race-specific roles but this made it difficult to unsubscribe users from the list. At the time of writing, Simplenews Roles will automatically resubscribe users on the next CRON run.

We created a custom Workflow NG rule to subscribe users to newsletters when they complete the checkout with specific products. This works well, because they can manage their own subscriptions.

The Existing Database

One of the critical tasks was to import an existing database of over 5000 records. Essentially, the only information required was the name, E-mail address, date-of-birth and the races entered.

As the primary purpose of this database was for the newsletters mentioned above, a simple User Import was all that was required. The User Import module does not support varying roles out-the-box, but modifying the module allowed us to map role based columns from the CSV to roles on the user account.

Finally, users were notified on their new account on the website which greatly promoted the site and resulted in a phenomenal increase of event registrations.

The Theme

The theme itself was the usual two and three column CSS / XHTML using a PHP template.

As a varying two / three column theme was required, some of the CSS positioning is dependent on the visibility of the sidebars. To make the columns fill to the bottom, we used the overflowing margin trick with a solid back-colour.

The only other point worth mentioning is the primary-links. We wanted to vary the links depending upon whether we have a logged in user, but make sure that they are justified on both sides. We simply set the overflow of the primary-link container to hidden, and positioned the varying items towards the end. This navigation is actually perfect and required no further modifications.

Automated Start-Lists

The start list is the positioning of people at the beginning of the race. These are usually grouped by age and estimated swim time, but can vary upon other factors.

Collecting the information is tricky in itself because people will want to register races for themselves as well as their friends. Also, there are team entries which further complicates things. It is critical that this information is correct as t-shirt ordering and race positioning is calculated from this data.

Upon registration, users are asked for their personal details including swim times, t-shirt size and British Triathlon membership numbers.

An Ubercart "order pane" module was written to collect the start list information. By default, this information is taken from the user's profile fields but the module allows for this information to be edited if for example, the order is for a friend.

To display the start-list information another custom module was required, using Drupal's theme table functions as a display mechanism. Each race event has a custom SQL order clause which can be applied to a SELECT query which generates the list. Certain fields can be exluded, and these are passed as URL arguments.

The automated start list is used as a guide until the final Excel based version is released just before the race.

Drupal 6

Eventually, we want the site running on Drupal 6. At the time we created the site, Ubercart was not production-ready for Drupal 6 and most of the Ubercart contributions were for Drupal 5 only.

Drupal 6 and version 6 modules offer a lot of the functionality we were looking for out of the box, which will make things much easier to maintain. Drupal 6's AJAX admin area (including views) is so much better than Drupal 5, and we look forward to the end of "weight" settings!

Now that Ubercart is ready for Drupal 6, we are keeping an eye on the contributions. It is critical that the site functions correctly as the traffic is very high. For this reason, we expect an upgrade will take place at the end of the race season. At the same time, a new theme will also be designed making the site fresh for the next season's races.

And finally...

The site is doing extremely well attracting a large number of visitors and registrations, and we will continue to promote and optimise the site. Just Racing have plans to include social networking features on the site taking advantage of forums, chat and personalised user home pages which is exciting.

So far the site has over 7000 registered users and race registrations are up by 400% compared to last year which is an unexpected surprise considering the current financial climate - a great success for Just Racing and a great success for Drupal and Ubercart.

Technical Details
 

Contributed Module List

• Administration Menu - a must for all sites! This makes navigating the admin system so much easier. It also means the theme does not need to include the naviagtion menu block so we get a similar view to the visitors.
• CCK field modules - including fieldgroup, download dropdown, redirection, file field, imagefield
• CCK Blocks and Node Reference - used to display and link to sponsor information on the races. 
• Date / Time - Calendar, Date and Date Popups
• Devel - helps a lot with debugging!
• Mail / Newsletter - Mime Mail, Simplenews, Simplenews Template and Simplenews Action for Workflow-NG integration
• Usernode - views integration for users and searching
• FCKEditor / IMCE - the WYSIWYG choice for most of our sites
• Pathauto - automatic URL creation
• Secure Pages - the admin and order pages are SSL protected
• String Overrides - the easiest way to make some of the Ubercart text UK friendly - ugly, but it works!
• Update Status - again, absolutely essential
• Webform - another must-have module
• Ubercart - including attributes, legal aspects, roles, taxes, ajax attribute calculations, fixed price, importer, product kit, restrict quantity, payment method adjustments (covers PayPal fees), PayPal, store coupons
• Views - including the bonus pack
• Workflow NG - An Ubercart requirement, but also used with SimpleNews to automatically subscribe customers
• Google Analytics and XML Sitemap - submits nodes only

Custom Module List

• Start List - creates an extra order pane both for customers and administrators as well as displaying start lists generated from race order information
• Ubercart Availability- makes a product expire after a certain date and time. The node is still visible to allow for result sheets to be published
• Ubercart Custom Product Form - hides certain fields from the product node view using FormsAPI
• Order Export - exports a detailed list or order information including attributes, profile fields, start list data etc..

About NuMedia Advantage

NuMedia Advantage are a website design and development company based in the UK specialising in Drupal and PHP development.