How to embed the Rubens Configurator into your web shop system? An architectural overview
Before you get started we want to give you an architectural overview of embedding the Roomle Rubens Configurator into your web shop system.
Client: the device of the customer of the webshop (the person who browses your webshop)
Server: the webserver which delivers content to the client
The main concept behind the Roomle Rubens Configurator is the idea of a single page application (SPA). If you do not know what a SPA is or if you are unsure how it’s different from server-rendered applications we recommend reading some intros. Wikipedia is a good starting point, also the following Stackoverflow answer gives a pretty good idea about the concept. But there are plenty of explanations. For more details, you can see here.
We will walk you through the steps involved with 2 graphics. We want to divide the things involved in “initial load” and “interaction”.
Imagine a customer browsing your webshop. At some point, the client-side code of a certain page needs to be sent to your customer. Let’s see what’s going on with the help of the following graphic:
the customer of your web shop wants to see a certain page
the request to view this page is sent to your server
your server generates the client-side code (HTML/CSS/JS)
this code is sent to the customer
the client (device of your customer) interprets the client-side code and renders the page
After the client-side code is shipped to the device of the webshop customer, the HTML page is rendered on the customers' device. Now the whole webshop page is interactive and the user can interact with the HTML page via the browser. Since the client-side code of your webshops page contains the Roomle Rubens Embedding Lib the Roomle Rubens Configurator is started with an iframe. The iframe loads everything that is needed and you as a webshop admin does not need to think about anything.
Let’s review the overview of the next graphic:
The blue parts are the Roomle Code. They “just work” and you do not have to do anything. The Roomle Server is only contacted if there is data needed. We do not load everything upfront because this would hinder loading performance. We use an approach of asynchronously loading only what is needed.
Let’s see what is going on in the diagram:
in step one the user interacts with the web shop page
if the user changes something or interacts with the Roomle Rubens Configurator the Embedding Lib sends events to the webshop page. The webshop page can react to those events and trigger other actions if needed
if there is more data needed, for example for price calculation, you can send a request to your webshop server
and 7. are nothing you need to worry about. The Roomle Rubens Configurator communicates with the Roomle server if needed and there is no need that you change something.