Oatlands Park Hotel
Brief
Oatlands Park Hotel required a completely new website that operated over all devices and put forward the professional and rich history that the hotel has. It needed stayed on-brand, successfully promoting the hotel and its facilities to potential customers. They required an online 'calendar' or upcoming events, that tied into an event database that they could administer, as well as the ability to control layout on the front page choosing which offers were to feature prominently at various locations.
As discussions grew the brief grew to include the ability to purchase gift cards on the website, using secure payments on the site (and not redirecting off to a payment provider), and an interactive map of meeting and event rooms that could be booked.
Challenges
The initial challenge was to build the responsive site using semantically correct and manageable blocks of code, for a site that altered its look drastically from the front page to all inner pages. The on-site payments that needed to not only be secure and consistent with todays modern web security standards, but also proficiently up-sell the hotels gift cards and various offers, offered up its own challenge as I tied in a bespoke payment solution to the Wordpress build.
I knew that the site needed to be manageable long term from the backend, and so I wanted to delve deep into Wordpress's admin alteration hooks and actions to ensure that the backend was succinct and streamlined as possible for the client once handover had taken place.
Build notes
With the bespoke layout for the home page, I decided to opt for a flex-box build, where orders of boxes could be switched based on user device resolutions and orientations, and with the site requiring on-site payments, it was decided to use the Stripe payment gateway and enabling https / SSL on the server.
I first built up two core templates for the site, one for the distinct home page, and then another for the internal pages, which would cover 90% of the build. All pages were mapped out and common design choices were classified, which then allowed me to create a set of classes unique to this project, yet mutual to a host of elements that were to be used. Once this initial groundwork had been done, I broke the site down further to individual elements and created a separation of concerns, by allowing each element to have its own PHP and SASS files.
I approached the online booking system and gift card offer next, programming up a bespoke calendar where the custom post types could be shown on the visual calendar display.
After implementing the various custom post types for the site to tie in with all this, and ensuring all custom fields were available for the client in the backend, it was a case of adding the content to the template files and testing before tweaking and launching.
Technology used
With Stripe being utilised on the site, we opted to use their JS code blocks, along with server side libraries to ensure payment was taken and received correctly. For the bespoke backend I used the popular Advanced Custom Fields to add appropriately named and obviously laid out admin forms for the client.
Google maps was utilised to show local attractions nearby, dynamically adding markers based on a loop of Wordpress custom post type in the backend, and I also used Google fonts to use the popular Lato font.
We implemented a custom YourReservation.net form that allow room bookings to be taken, and relied heavily on jQuery and jQueryUI to do some of the heavy lifting with the JS requirements.
Running all the code through GULP, a pre-processor, minifying and ensuring code consistency of the JS, whilst combining the SASS CSS files into useable front end files, enabled us to work cleanly and succinctly on long-term manageable blocks of code.
Oatlands Park Hotel
From an initial meeting at the hotel when?the All Blacks were staying during the Rugby World Cup, to the final launch of the website, the build was enjoyable and fun to work on,?as I tried to bring the brand vision over to the screen. Working closely with the hotel?from start to finish, and beyond,?the website looks and works great, and?utilised a host of?new technologies that were invaluable the final product.