In my Magento career I have had to build a product configurator twice, it's a very challenging concept with a lot of things to think about before jumping into it. With this post I would like to tell you how I ended up building them and what kind of issues I came across and how I solved those issues.
My first case was for a scooter webshop, the idea was to create your own scooter with your own colors and accessories, this being our first configurator we quickly took the obvious way of using custom options. I'll try to explain the way we handled this in a nutshell. There were several parts of the scooter you could give separate colors and there were certain dependencies which would need to be handled.
The problem with this method
Aside from the slightly bad implementation we did, here's what's wrong with using this method:
- The custom options are rendered in a block and are quite challenging to change, this leaves us with little flexibility unless we rewrite the entire block.
- There was no way we could keep track of stock, luckily this wasn't necessary but would have been good for the future.
- Without creating some complicated piece of UI, I couldn't imagine getting the dependencies manageable.
- You can't freely pick your price for every combination.
Here's a case I'm quite proud of how it turned out. This one is for a lights shop, the idea was to be able to assemble lights by choosing between fixtures, lampshade shapes, colors and so forth. Knowing the difficulties we had with using custom options we initially decided to go down the configurable product road. First things first I created an import script which would import an excel which had all the dependencies in it. This import gave me a lot of flexibility throughout the project.
There were several different types of lights: floor lights, ceiling lights, table lights, etc. Each type of light was a configurable product, then I would calculate every single possible combination and created a simple product of it. The combinations were defined in its attributes which were needed to create the configurable product with the right options. I ended up having configurable products which had about 4000 simple products.
We quickly switched over to creating our own product type, making it as light as possible and only get what we need. I called it the "Configurator Product" (the module is called Configurator). I chose to stay away from creating any "tight" relations between the simple products and the configurator product so I thought I'd use a code which would identify the configurator product it belongs to. The so called collection code was the key to connect the simple products to the configurator product and vice versa. I made it possible to select the attributes that were supposed to show up as steps on the frontend. Now I was in full control of the amount of information I would have to retrieve and process on my product view page.
I handled the dependencies by getting every option of every attribute and storing all the product ids that have that option in a data attribute, I was able to execute these queries quickly thanks to MySQL's wonderful GROUP_CONCAT. The only thing stopping me from using it were limits that were set by configuration. Making sure these limits were increased before I would do the query resolved this issue (and I hope to never hit the limit again...). So GROUP_CONCAT enabled me to get all the product ids for that option instead of having to go through ~2000 rows multiple times.
Every time the user would advance a step I would create an ajax request for every option in that step to retrieve the image and price that were used by that simple product. It's better to ajax the images and price because if Magento would have to load the products and resize a couple thousand images on one page it would take ages and probably crash. This way I have the load spread across the process and I keep my page load at around a second or two without caching (decent for a configurator with 4000 combinations if you ask me).
At the end of the steps I would setup the add to cart button to add the finally simple product to the cart and the default Magento workflow applies.
Case 1 vs Case 2
Here's what case 2's method does better than case 1's:
- Stock management is possible.
- Images are uploaded on the simple product, no more "slug this, concatanate that and hope it exists".
- I can define prices for every combination possible.
- I created a platform which I can extend easily because I built it from scratch.
- Special prices, catalog and shopping cart price rules apply for every individual combination.
The most important thing is to make sure you know the requirements, it's the small details that can force you to change your entire plan. I can't stress this enough, I've done far too much refactoring because I didn't foresee some of the details. Luckily this refactoring was easily done because I had a flexible platform to work with.
Product configurators in Magento are challenging and fun if you are given the time to work on it. I don't think there's one method that works for all situations but I do believe that what I have now is very reusable for future projects! I am looking forward to case 3!
I hope I explained it well enough, it's hard putting such a huge process into a couple words and I have skipped many things but I hope I covered the important parts. Feel free to ask me anything!
Read the full post |