Intro
The idea behind the Vacation Planner was to take our biggest destinations and create a travel package around each one. You would go in and select dates and tickets for the main attraction, something like Disneyland for example, and then you would be presented with discounted offers to things like nearby restaurants that you could add to your booking also. At the end of the process you are emailed a PDF with information about the main attraction, all of your tickets, and access to customer support if you need it.
Goals
The four main components to build around this project were the marketing pages for the main attractions, the travel booking creation process, the dynamic PDF generation, and the followup emails sent after someone has finished their purchase. For the marketing pages, we created a data set for each package centered around a main attraction that had a set of images, graphics, and promotional materials such as videos and maps of the park. This data powered all of the marketing pages for each attraction we added.
The Booking System
For the booking system we wanted two main parts, displaying the progression of steps to completing a booking, and showing a real time order summary at all times that reflected your savings and your order total. To accomplish this, we used Vue for this specific section of the site. When you hit any of the routes that are a part of the booking process, Vue takes over the main content area of the page, instantiates the app, and then runs the show. An order confirmation email is sent after completing your purchase, and a follow email reminder is sent 30 days before the start date for your vacation.
Dynamic PDF Generation for Fun and Profit
I was very pleased with the Vue app, especially how smoothly the Order Summary functioned, but the piece that stole the show for me was when we figured out the dynamic PDF generation feature. We used a webkit to PDF library to power it. I researched which version of webkit it supported, tuned Autoprefixer to handle it appropriately, and proceed to figure out a layout that would work for it. Doing this allowed us to customize the PDF to the user’s purchase. This included a custom cover and information about the main attraction, as well as any additional tickets or gift cards the user purchased, all in one document that you download. This PDF was sent in an email and also available on the Order History page on the Vacation Planner site. I had never done something like this before, and I was very pleased with the final product.
Conclusion
Ultimately, we closed down the Vacation Planner standalone app years after its completion, choosing to pull its functionality into our main store. This app was a huge technical success for us, however. It had a massive impact on the refactor of our main app that would follow, and we continually see how features we created while building this continue to benefit our code base today. Abenity had never built something this dynamic before, and it was very satisfying to forge a new path and create a project that was truly cutting edge.
