A Case Study
Savings Calculator
a custom plugin
Savings Calculator
Contracted By:
This custom WordPress plugin provides an interactive savings calculator while also provided a long form more technical savings calculation page.
Achieved with
The Brief
Our White Label Partner Site-Seeker Inc, came to us with a pretty cool project. They needed a specialized sales tool created that would show potential buyers exactly how much their product would save them long term. This tool had to be a WordPress plugin. Perform a variety of calculations based on a number of data points. Calculations would be processed in real time and display both cost and ecological savings to their customer.
The Requirements
- Integrate with WordPress via the Plugin API
- Code from PSD design
- Mobile Responsivity
- Shortcode capable to UI calculator can be placed on any page.
- Shortcode must accept a variety of parameters for future custom changes to the calculations
- Short Form must transfer values dynamically to Detail Form
- Detail Form must output PDF of calculated values
The Strategy
After listening to the requirements of the project and we recommended the technologies that would best meet the overall needs. We would then create the various components in a series of phases to make sure everything was performing as expected and needed.
The Solution
Unlike most calculators, this one was based on a dial as a point of input. We knew it would be heavily based on CSS3 and jQuery. We also knew it would have to be PHP as it had to be implemented as a WordPress Plugin. The first step was to get our hands on the calculations to determine all of the data we would be keeping tracking and what, if any of that information was static, but possibly could change in the future.
One we had the calculations, we created an HTML/CSS3 version of the calculator in accordance with the provided PSD. With that laid out we would proceed to the jQuery part of making the calculator an interactive UI element. The jQuery was implemented as a custom jQuery Plugin to provide extended functionality and re-useability. We weren’t sure if, in the future, the client might need to have more than one calculator on the page or one with different calculation parameters or not. So we created the jQuery Plugin to be as versatile and re-usable as possible.
Finally we integrated everything into a WordPress plugin, complete with shortcode implementation and custom Hooks and Filters to make it all as future proof as possible. We added the Long calculation form via a Template, loaded from the Plugin directory, but in an easy way that any WordPress developer in the future could override from the theme’s functions.php for a custom layout, should the need to. For a little icing on the cake we also set up the plugin to allow users to print their calculations straight from the website to a PDF.
The Results
In the end the client ended up with a versatile custom plugin that did exactly what they needed and was as future-proof and customize-able as possible. From out first meeting to the end of the project, including internal testing, end user testing and several meetings. The overall project took 4 weeks to complete.
Do you need a website, custom plugin or custom integration? What are you waiting for, schedule a FREE consultation with us today!
