Hotflips wooCommerce WordPress theme
May 2018 - June 2018
Goals
- Create a fresh WordPress theme without losing any of the old data and category structures
- Implement custom pages in a timely manner
- Transfer thousands of products in Drupal to WordPress
Project Overview
Hotflips has been around for over 10 years. Their Drupal site got the job done, but not so elegantly. It was outdated, slow to load, and most importantly: not so user friendly. After years of user requests, they decided to give their shop a refresh. The technology of choice was WordPress with wooCommerce due to its ease of use and flexibility.
My job was to implement the new design from scratch while keeping the old product data intact.
Hotflips gallery
See more of hotflips
Hotflips has dynamic sliders, including price. This is a huge upgrade because their old Drupal site had to process a whole query and reload each time a filter was changed.
Hotflips has hundreds of products, so filtering by things like popularity, old, and new is necessary and easily accessible.
Process
The overall process was typical, aside from the data transfer part. The biggest challenge was transferring the existing data from their old Drupal site.
The designs came from sketch files, so I did my regular process which involves coding and styling one page at a time based on the design. Once all of the views are done, I go through and make sure they work across all browsers and all of the desired features are working. Once the main designs were finished, the next important step was making sure the product price filters were in place.
AJAX price filters
AJAX price filtering for wooCommerce/WordPress isn’t too difficult, but it did require some tweaking and testing. Sometimes, custom PHP and JavaScript is needed to get things to work. In this case the process was fairly straightforward thanks to great WordPress plugins and some modifications I made.
Transferring product data
The client wanted as much price data transferred as possible. Transferring this data by hand wasn’t feasible, so we needed to automate the process. Many WordPress plugins exist, but there weren’t many that could transfer data the way we wanted. We thought about writing a custom script to do it, but we eventually found something that worked for us and was able to use a plugin after all.
Technologies Used
This project was done on the sage 9 starter theme, which includes Webpack, Laravel Blade, SCSS, and ES6+ JavaScript compilation out of the box. Some modifications were needed to get wooCommerce views to work with sage 9. After that was set up, sage 9 worked great.
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 […]