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.
Design
The basic look isn’t changed much from 2013, except we lost the fixed position front 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.
The 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.
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.
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.
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!
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!
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.
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
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.
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