Developed and designed at Candidsky.
This website is still in the build phase and is not finalised therefore I cannot reveal too much about any of the project in order to avoid undermining any marketing efforts or providing any opportunities to competitors.
Note: So as to not reveal any branding I have changed the colour scheme in any screenshots, hence the awful grey and yellow.
This project required a step by step order process where the user could build up an order by specifying details about it. They would firstly enter their postcode to see if they were in an accepted area, then they would choose some predefined options about their order, then they would be able to choose a collection and delivery date and timeslot before finally being able to review and confirm the order.
- General additions and changes to the code to aid the work I was doing in styling and user experience. This including things like calling functions, adding interactions such as loader animations, editing code so that the order process flowed as I needed it to and making refinements to functions that had bugs.
- Adding a disabled days functionality to the collection and delivery datepicker. This was so that bank holidays could be excluded from the available dates.
- Creating a function to handle the functionality of the process steps to allow the user to go back to a chosen step in the process.
After the dates were formatted and identical I then wrote an if statement in order for the function to return a required array. This if statement checked if the date on the datepicker was equal to any date in the disabled dates array. If it was, it returned an array of false to indicate the date was disabled, a CSS class so that the disabled date could be styled and finally some text for a popup tooltip. If the date wasn't equal to any of the disabled dates, the array simply returned true with no CSS class or tooltip.
For the steps functionality I had to write a function that fired whenever the user clicked (or tapped) a numbered step. The function accepts 3 parameters, the next step in the process, the current step, and the event that fired it. It checks what the desired step number is and makes sure the step isn't disabled, meaning the user isn't jumping forward. It then shows the desired step, adds an active class to the new current step number, and adds a disabled class to any steps number that is greater than the current one, again to stop the user from jumping forward. This is because there is validation on each step therefore making jumping forward unfeasible.
If the user has simply used the next button to go forward in the process instead of the step numbers, I still needed to write some code in order to make the step numbers update along with the order process. To do this, the step handler function is fired every time the next button is clicked and if the event that fired the function wasn't a click then the code to be used when progressing via the next button is fired. The code takes the next step and current step at the time the next button was pressed and disables the current step (which becomes the previous step) and makes the next step (which becomes the current step) active.</div>
CSS / SASS and PHP
I took the lead on developing the CSS / SASS and PHP templates for this project. This involved adhering to brand guidelines in order to create the styles and the usage of a base Wordpress template to help with the speed of the templating. My role in these areas was similar to that on other projects and there won't be detailed on this page.