We continue with part 2, this time in English.
Wir machen weiter mit Teil 2, diesmal auf Englisch.
Again I made some adjustments to the JSON file to make it on the one hand comply to standards (and not have weird data conversion in the code), while on the other hand keep it easy to use. That’s why I made one exception to the otherwise „flawless“ JSON and titled the three examples with A, B and C, cause they are automatically sorted alphabetically. I could have sorted it in the code using the ID of each element, but that way saved me a few lines of pretty ugly sorting, so simplicity wins here. Finally I started to work on the actual code. I tied it to the window.load event and fetch the JSON, „load“ in my „templates“, both in quotes cause I actually don’t load anything, but it’s easier to understand what happens here, if you imagined I would load some smarty-like template file. In the screenshot you can see, the templating part does work as expected, but the JSON part does not yet. On top I have to find a way to deal with some Options having a single value, while others have an array of values, but each array value should be displayed repeadately with it’s key, like this: „Additional Option“: „foo“, „Additional Option“: „bar“, … while JSON doesn’t allow for repetition of keys. I’ll fix the issues and we should be finished with that part – then we can start working on the calculator.
I still have one last problem to solve as mentioned before, the list of additional services now is just one point on the lower right of the „Pixel Perfekt“ box, but I want them as individual items.
First I added the eventlistener ES6 style to the link button – I also went back to the Template and added a data-attribute to the link as well as changed the function replace() to replaceAll() so I can easily access the name of the clicked profile. I also passed the JSON object on to the event. This part is another source for a few mistakes, e.g. we could accidently pass the event object instead of the JSON object (independent of the actual name we type) – if that happens, beginner often retreat to using globals. But as you can see, this is not neccessary here (and most of the time you code, it is not). And once more, important is not what we know right of the bat, but HOW we work. I wasn’t sure how to get the data from the clicked element, so I simply logged the „e“ and checked in the console, what I have available. I found there’s e.g. e.originalTarget, but this wouldn’t let me access the getAttribute(data) method. Via StackOverflow I found out that JQuery uses e.target instead, so I used that one too, and it worked reliably.
I will move off from „generic“ now a bit, cause I want to save a bit of time and it’s no problem to adapt the code later either way. But if I wanted to keep it mostly generic, I would have added a meta-section in the JSON to provide me with additional IDs and class names, which we will be using next to hide the other two plans.
My last project I made with Node.js and JQuery in the frontend. So I thought: If I can do it with JQuery instead of, say, something like Angular.js, I can do it without any third-party-framework. Yeah, that took a bit more time, but I also learned a lot. For a project bigger than this, I wouldn’t recommend this method. The code has, besides all efforts, become a bit too long for a vanilla JS project (imo), although roughly 200 lines is not too shabby for such an app.
I only lag 3 more things, but these should go rather quick:
1.) The ability to add or remove the „Additional Services (Zusatzleistungen)“ elements
2.) The actual calculations for time and price
3.) The „Get Quote“ button which will be tied to PayPal, cause these quotes will cost money. Why am I doing that? I got a lot of fake requests in the last couple of years, and no serious company will take offense in charging for a quote, on a 5000-25000€ project anyways.
Follow-up in part 3, where we will build in the Paygate, finalize the project and wrap it into a WordPress plugin.
Es folgt Teil 3, in dem wir das Paygate einbauen, das Projekt zu Ende bringen und in ein WordPress-Plugin packen.