No stress SVG

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.

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.

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.

Related posts:

Whether your shipments and orders are on the ground, on the high seas, or in the air, project44 tracks it using cloud technology. As a consumer, we are accustomed to knowing that our Amazon package…

A poem about the body’s response to threats. “My Body” is published by Afiyah The Poet in Poetic Tapestry.

Static websites are the future, but are they the present? All the choices and gochas dealing with jekyll, firebase and bitbucket.