The idea is to integrate iframe with Hugo Boss design into PoD eCommerce system. PoD hosts the bussiness logic and handles the customer's data, where the responsibility of na IFrame is to show the UI to the customer and report the customer's choices to the eCommerce system.
PoD eCommerce website will create custom webpage that will host an IFrame and show it in correct dimensions. The communication between IFrame and the hosting web page will be two-way communication. That means either the hosting website or the IFrame can initialte the conversation. The conversation will be done by firing events upon customers change or the life cycle of loading the page.
Both an IFrame and the hosting page will listen to events by registering with window.addEventListener('message',...). That will ensure that whoever sends the message, the other side will recieve it. Sending of a message from hosting website to iframe will be performed by calling document.getElementById("#iframeid").contentWindow.postMessage('...message content...','*'), considering iframe has an id of 'iframeid'.
The hosting site integrates an iframe like this:
<iframe src="http://gersch.tronog-engine.com/hugointegration/iframe/..." id="iframeid" class="iframeclass"></iframe>
In CSS host site makes sure the iframe is shown in fullscreen:
.iframeclass { position: fixed; // must be for IPAD or the swiping will move content around display: inline-block; top: 0px; bottom: 0px; left: 0px; right: 0px; }
CSS can be adjusted if host site wants to display header and/or footer.
On the host site one can communicate with inframe using a small library:
M = { init: function () { console.log("M.init"); M.register(); }, register: function () { window.addEventListener( 'message', function (ev) { M.listener(ev); }, false ); }, // override to add custom functionality listener: function (ev) { var data = ev.data; console.log(data); }, post: function(msg) { document.getElementById("iframe").contentWindow.postMessage(msg) } } M.init();
Host site must call M.init() to register the module to incoming messages. To add custom bussiness logic, override the M.listener function. This function intercepts all messages sent from IFrame konfigurator to the host webpage.
Data structure definitions are not final yet. From the early analisys we managed to prepare an early draft:
visual elements:
non visual elements:
IFrame will send two types of events to the host webpage:
Host webpage will send two types of events to the IFrame:
both events send messages with same structure:
{ "action": "change" or "createorder" or "updateorder", "data": { "hood": "with hood" or "without hood", "sleeve": "fixed sleeves" or "detachable sleeves", "maincolor": "black" of "marine" or "navy" or "olive" or "yellow" or "red", "colorblock": "black" of "marine" or "navy" or "olive" or "yellow" or "red" or "", "lining": "black" or "navy" or "orange", "logo": "sleeve" or "front" or "back", "initials": "string", "basesize": "number", "bodyshortening": "+/- number", "bodylengthening": "+/- number", "sleeveshortening": "+/- number", "sleevelengthening": "+/- number", ""frontImg": "http://...", ""backImg": "http://..." } }
createorder and updateorder events are sent from hosting website to IFrame for the purposes of pushing initial state to the konfigurator when creating new order or updating existing order
{ "action": "createorder" or "updateorder", "data": { "hood": "with hood" or "without hood", "sleeve": "fixed sleeves" or "detachable sleeves", "maincolor": "black" of "marine" or "navy" or "olive" or "yellow" or "red", "colorblock": "black" of "marine" or "navy" or "olive" or "yellow" or "red", "lining": "black" or "navy" or "orange", "logo": "none" or "sleeve" or "front", "initials": "string", "basesize": "number", "bodylengthening": "+/- number", "bodyshortening": "+/- number", "sleevelengthening": "+/- number" "sleeveshortening": "+/- number" "sizes": [46,48,50,52,54,56,58], # or [“36R”,”38R”,”40R”,”42R”,”44R”,”46R”,”48R”] for english "bodylengtheningsizes": [0, 8, 1], # or [0, 3.2, 0.4] for english (stepping needs to be implemented - tronog) "bodyshorteningsizes": [0, 6, 1], # same as above "sleevelengtheningsizes": [from, to, step], # same as above "sleeveshorteningsizes": [from, to, step], # same as above "unit": "string" } }
sizes: list of integer numbers that will be selectable before you order
bodylengthening, bodyshortening, sleevelengthening, sleeveshortening: default states for sleeve and body variation
bodylengtheningsizes, sleevelengtheningsizes: min and max for body and sleeve variation
unit: measurement units (cm, in, ft, km...)
pricechange is also an event that is fired from the hosting website. It is usualy an answer to the change event that IFrame sends. It's puspose is to update the current price
{ "action": "pricechange", "data": { "price": "1234.56" } }
images can be referenced as such:
https://gersch.tronog-engine.com/image/hugoboss/malejacket/cam01/BG.BG.MaleJacket_Colorblock_DetachableSleeves_Black.MaleJacket_Lining_Black.MaleJacket_LogoFront_WithHood.MaleJacket_LogoSleeves_WithHood.MaleJacket_MainFabric_WithHood_DetachableSleeves_Black.MaleJacket_Sleeves_WithHood_DetachableSleeves_Black.MaleJacket_Hood_Black.MaleJacket_Base_WithHood..jpg?q=90