Oh fiddlesticks
Something's gone wrong here. Try again and see if it works, if it doesn't you're allowed to shout at me.

Marldon Christmas Trees website 2014

Posted: January 18th, 2015

Today’s post covers the website I built for Marldon Christmas Trees, my workplace, for the 2014 festive season. The basic website is built on WordPress, with a slew of custom plugin code to handle two booking forms and a customized letter from Santa designer which we’ve seen before. So, let’s dive in.

marldon christmas trees website 2014 front page

Design

The basic look isn’t changed much from 2013, except we lost the fixed position font page and brought back scrolling! As a result there’s a proper footer, and a lot of the crud that stuffed up the header in 2013 has been moved down there. The simple drop down menu is almost entirely unchanged from 2013.

Our front page is a selection of slides with various buttons that link in to the booking forms and information pages. This slider is sized to fit the window (leaving a little bit of footer on show to indicate the presence of more content) and advances and loops by automatically – unless you press the pause button.

marldon christmas trees website 2014 front page slide 2 marldon christmas trees website 2014 front page slide 3

The last little design flourish is the header change when the page is scrolled – I often think it’s the little touches in design, even if most people don’t notice them! The height contracts a small amount, revealing a green circular base for the logo.

 

marldon christmas trees website 2014 design header scroll effect

 

Finally, in all the following screenshots please ignore any tiled backgrounds – the long images are assembled from multiple screenshots and thus have the appearance of a tiled background.

 

Custom order and booking systems

Bookings for both Santa’s Grotto and Choose your own Tree (a reservation system where a customer can walk the plantation before the farm is open and reserve their perfect tree) can be made online, as well as a letter designer for Letters from Santa with customization options and generated previews.

Let’s deal with the simplest first: Choose your own Tree.

marldon christmas trees website 2014 choose your own tree booking page 1 marldon christmas trees website 2014 choose your own tree booking page 2 marldon christmas trees website 2014 choose your own tree page 3

The booking form comprises of three pages before the customer is sent off to Paypal to make a payment. The first takes all the customers details, the second allows them to choose a date and time slot, and the third is merely a confirmation before payment.

 

The text input boxes across all the booking forms benefit from a global Javascript validation script which checks each input when it loses focus – this includes numeric checking for phone numbers and an email regexp filter. On error the input field is highlighted in red, and trying to submit the form prompts the user.

In step 2 where we select the date we make use of jQuery UI Datepicker, a feature packed Javascript calendar implentation. Data about already booked times is printed to the page in a php-generated JSON array, current day at a time, and this allows us to block out booked slots in the drop down menus for time. This really annoyed me at the time: I couldn’t think of a good way, or a good form element for time selection. There’s an extension to jQuery’s Datepicker called DateTimePicker which takes care of the problem in the same way I eventually did – with drop downs – but not having much time to investigate the flexibility of the plugin (i.e, whether I could block off specific dates and times) I implemented the time functionality myself. If the user selects a new date we make an AJAX request for that day’s data and reset all the inputs.

Next, Santa’s Grotto!

marldon christmas trees website 2014 santas grotto booking page 1 marldon christmas trees website 2014 santas grotto booking page 2 marldon christmas trees website 2014 santas grotto booking page 3

Santa’s booking form is very similar in most ways to the Choose your own form (well, they do run on the same code!), the only difference of note is on page 2. We allowed parents to pre-select the gift their child would receive so they could use their judgement and get something their child would genuinely like. As we’ll see in a moment, this system also manages stock levels of each gift and removes them from the form when they run out.

Finally, and most interestingly, Letters from Santa!

marldon christmas trees website 2014 santa letter designer page 1 marldon christmas trees website 2014 santa letter designer page 1 marldon christmas trees website 2014 santa letter designer page 3 marldon christmas trees website 2014 santa letter designer page 4

We’ve talked about the technical aspects of this one before – for 2014 it was retooled and the code cleaned up. The only significant change in the image generating code was a switch to using percentage values for each vertex of the wrapping polygon, so we can scale everything to different image sizes. The user experience is all new though, so let’s have a look at that.

Our first page is fairly mundane: Details of the person purchasing, details of the child, and some specifics like gender and age. On the next page we have a series of boxes showing a preview of the available letter texts – clicking one displays the full template below with input fields for each customisable gap. Some of these are text, some drop downs, the latter usually have a “Custom” option at the end which switches the select field out for a text box, as below.

 

marldon christmas trees website 2014 santa letter designer custom fields

 

 

After choosing your design template we come to payment. The payment gateway for all purchases is Paypal IPN, a simple system which can be implemented in minutes thanks to their plentiful code samples. In brief: we give Paypal the URL to our script, when a purchase is made they send all the data to that URL, in order to verify the IPN request we build a cURL request and send the exact same data right back to Paypal. If the request isn’t verified Paypal will continue intermittently sending requests for an undefined period of time.

The data dump contains everything about the transaction including payment method and status, and has a few custom variables which can be sent to Paypal from your checkout page – useful for storing product information, etc. In Marldon’s case the Paypal button actually triggers an AJAX request to an internal handler which saves all the order data. We then fill the hidden input for custom data with the id values given to the order in the database, as well as the product id, and then submit that form to send the user to Paypal. A loading spinner appears in the Pay button while this is going on, and the button is deactivated to avoid multiple clicks.

 

Admin backend

marldon christmas trees website 2014 admin daily action list

 

Several pages were built (or thrown together, owing to time constraints) for the WordPress admin console so people other than myself could also manage and change the bookings. These pages actually became the central location for booking data, being modified shortly after opening to accept manual entry of offline bookings made over the phone. The central part of the system is in the image above, the daily list. This page shows all the booked activities for the day, the idea being we can just print a few copies to distribute among the staff managing each activity – there’s also a datepicker toggled by the “Change date” button to view any days activity.

marldon christmas trees website 2014 admin list santa gifts marldon christmas trees website 2014 admin add edit santa gift marldon christmas trees website 2014 admin add edit santa booking

 

Finally we have the management pages for Santa’s Grotto, from left to right the images above are: the list of all available gifts and their stock levels; the add/edit screen for new gifts; the add/edit screen for Santa bookings. Nothing particularly fancy to see, as I say this is mostly hacked together!

That’s about that! A larger project nearly all custom made, and it worked excellently, the website getting a whole lot of traffic during November and December, and Santa’s Grotto totally booking up after two weeks.

 

— Ben