StaffingNation Dynamic Pricing Table
October 2019 - December 2019
Goals
- Create a WP Admin area that was easily editable by the client
- Make a fairly large table viewable on mobile, accounting for future changes
Project Overview
StaffingNation needed a large table that shows pricing for 4 different tiers. My job was to take their design and make a functional toggleable table in their WordPress theme. The table needed to represent the same options on mobile, which proved to be more of a challenge than desktop.
Since there was so much data, some subsections of the table needed to be toggleable.
Mobile matters too!
Process
The process starts with deciding how to take the data from the CMS. At that point, I started off every WordPress project with advanced custom fields. This worked perfectly because the client could easily add/remove rows without the process being convoluted like other themes make it. Once I had the ACF structure and test data in, I built out the design then the JavaScript functionalities. From there, it was just about testing the page and making sure the CMS data was being displayed correctly.
After all the above testing was finished, the last challenge was to adapt the table to a mobile design. We ended up keeping the same layout but changing the headers to be vertical. This proved to be a happy medium and made presenting a large amount of data on a small screen doable.
Technologies Used
WordPress and advanced custom fields were used to collect and display CMS data. CSS for styling and good old JavaScript for functionality.
Want to check out some code demos?
Check out code samples written in JavaScript, React, Node, and more
Demo 1
Converting jQuery Blog Post Component To Vanilla JS
I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]
Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript
I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]
Demo 3
Defining Reusable Column Extends with SCSS
Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]