No stress SVG

One of our biggest challenges in 2017 was a website, where people can create different bathroom cabinet configurations. Sounds not so interesting? Well, add to it realtime “3D” preview with interactivity, and all that loaded and rendered in a couple of milliseconds.

In 2017 Sidler introduced new customizable cabinet with add-ons. We were building a web-based configuration tool for that product.

We’ve decided to go with drag and drop interface, also we wanted users to be able to interact with cabinets: open doors, switch side, place and check add-ons. Due to several cabinet sizes and mount types (hanged on the wall, built into the wall and partially built in), there was a need to display cabinets depth. Perfect case for some 3D library? Well, not so fast, on top of all that configurator should be lightweight and without any preloading screen. That’s why we decided to go with SVG.

End-result

Overall the idea of using SVG seemed suitable. SVG is lightweight both for network and for GPU rendering, totally editable, and has structure, so we could hide and show layers. But there was one problem, how to code it?

In nutshell SVG elements behave really similar to HTML blocks. We can position them, show or hide, resize and change colors. We took a jam-packed SVG with doors opened/closed, shadows and all add-ons included (magnifying mirror, cosmetic box, electrical outlet, side mirror), then we enclosed SVG in HTML blocks to create a drag and drop functionality. We were able to hide and show specific layer of SVG with CSS opacity. Tricky thing was that SVG container was bigger visibly than cabinet with door closed.

Jam-packed SVG (red line — container)

We’ve developed an algorithm, which positions cabinets in the way, that every next cabinet to the right is positioned below cabinet to the left and displaced accordingly. Another part of code is responsible for vertical aligning and resizing. We wanted cabinets to fit into one line according to one-point perspective rule.

Positioning algorithm (red line — container)

For cabinets state we’ve developed some React-based logic. Basically it asks: is cabinet opened, if yes, what side; does it have any add-ons, etc. This simple methods gave us ability to interact with cabinets.

Frontend relies deeply on it’s Redux state which handles almost everything you see: drag and drop’s state, previews of mirrors and add-ons.

All data about current prices and add-ons availability is shipped by our Rails-based backend. In 2017 Sidler had limited stock of electrical outlets, so we implemented additional logic to disable it if needed — this way they have ability to update an availability of everything you see in the configurator with a click of button in admin area.

For checkout part we’ve developed cheque with configuration code, products list and total price, which you can download as PDF with print option or sent via email.

Configurator is available on desktop and mobile, check it out!