Overview

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.

Detailed

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'.

Integration

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 structures

Data structure definitions are not final yet. From the early analisys we managed to prepare an early draft:

visual elements:

non visual elements:

Events

IFrame will send two types of events to the host webpage:

Host webpage will send two types of events to the IFrame:

change and order events:

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

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

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

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