04
Mar
2020

Building the Urban Lodge Website

Altough there was already a quite nice-looking website for Urban Lodge available, it unfortunately had some huge downsides which the owners of the Urban Lodge wanted to properly address. For this they’ve been working out a new awesome screen design together with their very talented in-house designer Cathrin Schönauer, while I’ve been asked to put those very detailed drafts into “life”

Elementor

One of the major aspects of the new website is the heavy use of the Elementor Page Builder. Unlike similar projects the goal was simple: Create a new website, with a basic custom theme which fully supports elementor and lets us always create new custom designed and styled pages without any programming knowledge. What sounds easy, was surprisingly as easy as expected since Elementor is a truly sophisticated tool which lets you really do what you want to do.

Pages, Menu, Popups, Footer

After working out a basic theme which includes all of the core functionality, layouts and styles, I went straight to work on all the various kind of pages. While Elementor already provides a huge arsenal of nice-looking widgets we still came rather quickly to the point where we needed another similar set of widgets in order to properly showcase the various topics divided in multiple sections. We decided to go for Essential Addons which includes another 40+ set of various widgets. Together with that I layed out all the pages, wrapped up the footer and also created various popups.

Custom Payment Gateway

Well, ok – it is not actually a “gateway” in the classical sense, but more like a “frontdoor”. The actual challenge was that there already was a payment gateway available, but unlike similar situations where you have a website with a shop and an integrated payment gateway, this time the gateway was not integrated – and it certainly didn’t properly reflect the nice-looking CI of the website itself.

Payment Script

I’ve been already asked in the past to develop a simple script which works with URL parameters in order to send out custom links by email and getting payments through the payment gateway with pre-filled informations. That means that it is possible to send out for example an URL like this: https://my-website.com?pay=300&id=123456 and as soon someone clicks on that, the amount of 300 and the id (123456) will be automatically pre-filled in the payment form. Based on that, I’ve been asked to create a custom interface which also acts like another layer before the actual payment gateway comes into play. For this I needed to slighly adjust the initially developed payment script. I then decided to go for Elementor Popups and Elementor Forms in order to keep things simple and the overall number of plugins to a minimum.

Elementor Forms for the Win

Honestly, I really didn’t expected that this will go so well. Altough I was still experimenting with it, I quickly found how straightforward and rather easy this was to implement thanks to a quite perfect play between Elementor Popups and Elementor Forms. After a bit of playing I was able to create a form which, on submission, redirects to an external website (without sending any email), with the values entered in the form added to the URL as parameters in order to get picked up by my initially created (and later a little bit customized) payment script.

And as soon as the functionality was fully given I worked on the layout and design for this simple popup to make it look standing out a little bit more

Easybook Integration

Easybooking is the choice of room management software for Urban Lodge. It is a very sophisticated tool to properly manage bookings coming in from a variety of sources. The goal here was to find a good way to embed the booking and request forms from easybooking into the website, in order to make it easy for possible customers to book a room.

For this I’ve developed a plugin which properly loads the included javascript files, together with a shortcode which can take up some parameters in order to control what gets embedded.

Leave a Reply

Your email address will not be published. Required fields are marked *