- Bootstrap 4
- ACF Pro
Vivente Bikes has a long history of updating bicycle models each year to keep up with the onslaught of bicycle industry inventions. When the company changed it’s method to simply designing a bike which could be updated with better parts each year it became necessary to update our bicycle database method as well.
Initially the design of the bike pages were quite minimal and easily maintained through manual FTP. There was only two models after all. Over time, though, more and more models were added to the lineup and then replaced each year which meant manually updating the HTML for each page each year. It wasn’t too much work but it was more cumbersome than was necessary for what amounts to a simple product page. It also meant there were many opportunities for mistakes.
Considering that each bike page wasn’t simply a list of images and features but also a detailed list of bike specifications grouped by area of the bike eg. frame, transmission etc. it made for a very involved editing process for even the smallest edit.
So the plan was simple: create a bicycle part database and use it as building blocks to create bicycles. If any part was shared between two models then updating that part meant updating the database once, not updating every page which referenced the part. Easy!
So to get started we created a custom post type called Bikes (
bikes) and another called Specifications (
specs) and then one more called Features (
feature). These are what we used to create out database so there was no need for them being publicly visible. We could then create a series of custom taxonomies to keep the data neat and tidy.
Overall we wanted to create a series of bike parts and features and then refer to that data within a bike model. Then we can create a new page template called
bike-product-page.php and use that to refer to the bike data.
Then once the data input fields were created using ACF Pro and the data was in place it was time to design a new page which would account both with design principles and code for the variations between models. See images for designs in production.
Now if a single feature or specification exists across more than one bike model (even across several year) we can make a single amendment to update it across the entire site.