Workstation configurator for the DELTACO OFFICE product lineup.

Refer to the wiki if you wish to use this configurator with your own products.

Default configuraton. The whole DELTACO OFFICE product lineup available in this configurator will be imported, and you would have to add your own measures to avoid products not available on your webshop from being added to your user's shopping cart.

1. Embed the configurator on your webshop within an <iframe>.

 <iframe id="officeConfigurator" style="width:1200px;height:800px" src="https://office-configurator.github.deltaco.eu/public"></iframe>

2. A MessageEvent is dispatched to window.parent when the user submits their configuraton. Append the EventListener snippet as close to your closing </body> tag as possible.

<script>
  window.addEventListener("message", (event) => {
    const data = JSON.load(event.data);
    if(event.origin !== "https://office-configurator.github.deltaco.eu" || event.data.type != "cart") {
      return;
    }

    // ...
  },false);
</script>

3. Replace // ... with code to handle the shopping cart flow on your webshop. See event.data.type = "cart" for message content semantics.

Hide products not available on your webshop.

1. Follow all steps from the basic implementation
2. Append the awaitConfig=true search parameter to the configurator URL

 <iframe id="officeConfigurator" style="width:1200px;height:800px" src="https://office-configurator.github.deltaco.eu/public?awaitConfig=true"></iframe>

The configurator won't initialize until you provide it with a custom config.

3. Download a copy of the default configuration
4. Locate a product you wish to hide, and replace its category value with 0 to make it inactive.

Example:

"DELO-0151": {
  "category": 0,
  "incompatible": [],
  "add": [],
  "flags": {}
}

5. Submit your modified config using Window.postMessage() when the frame has loaded.

The configurator dispatches a MessageEvent with event.data.type = "ready" when it's ready to accept a config.

window.addEventListener("message", (event) => {
  const data = JSON.load(event.data);
  if(event.origin !== "https://office-configurator.github.deltaco.eu" || event.data.type != "ready") {
    return;
  }
  
  const frame = document.getElementById("officeConfigurator").contentWindow;

  frame.postMessage({
    type: "config",
    payload: config // Your config.json
  },"*");
},false);

6. The configurator will initialize using your config when the message is received. This catches up on step 2 from the basic implementation

Sample script that submits a custom config.json (represented as "officeConfigurator.json") from an URL to the configurator and prints the user's summary when a configuration is submitted.

window.addEventListener("message",event => {
  const data = JSON.load(event.data);
  switch(event.data.type) {
      // Fetch custom config.json and send it to configurator
      case "ready":
          const frame = document.getElementById("configurator").contentWindow;

          fetch("https://example.com/content/officeConfigurator.json").then(response => response.text()).then(config => {
              frame.postMessage({
                  type: "config",
                  payload: config
              },"*");
          });
          break;

      // Log configuration summary to parent console
      case "cart":
          for(const [product,quantity] of Object.entries(event.data.payload)) {
              console.log(`User added ${quantity} of '${product}' to their shopping cart.`);
          }
          break;

      default: console.log(event.data); break;
  }
},false);

Make the configurator display a message if the user isn't logged in on your webshop.

1. Append the loggedIn=true search parameter to the configurator URL

 <iframe id="officeConfigurator" style="width:1200px;height:800px" src="https://office-configurator.github.deltaco.eu/public?loggedIn=true"></iframe>

2. Flip the value when the login state changes to toggle the message.

The configurator uses MessageEvents to communicate with its parent window and vice versa.

The arbitrary protocol for bidirectional messages consists of a JSON-encoded type and optional payload string.

{
 "type": "foo",
 "payload": "bar"
}

Dispatched when the configurator has loaded all necessary assets to accept incomming messages

This event should be listened for if you intend to use a Filtered configurator

{
 type: "ready",
 payload: null
}

Dispatched by the configurator when the user has added their configuration to the shopping cart.

{
 type: "cart",
 payload: {
  // EAN-13 code : quantity
  7333048043504: 1,
  7333048043528: 4,
  7333048043610: 1
 }
}

Dispatched by the configurator when a product is added to the configuration. This includes all instances where a product is added, not necessarily a direct user triggered action (multipacked- and featured products etc.)

{
 type: "addedProduct",
 payload: "7333048043504" // EAN-13 code
}

Dispatched by the configurator when a product is removed from the configuration. This includes all instances where a product is removed, not necessarily a direct user triggered action (multipacked- and featured products etc.)

{
 type: "removedProduct",
 payload: "7333048043504" // EAN-13 code
}

Dispatched by the parent window to initialize the configurator with a custom config.json.

Example using postMessage(message, transferLis):

const config = '{
 "type": "config",
 "payload": "..." // config.json 
}';

const frame = contentWindow; // Configurator frame*

frame.postMessage(config,frame.origin);

* See: HTMLIFrameElement.contentWindow

It's possible to upgrade from version 1.3 to 2.0 without making any major changes to your existing code. You need to filter out any event.data.type that isn't cart - as that's the only MessageEvent implemented in 1.3.

If you didn't modify the if statement when implementing 1.3 from the 1.3 README; you already have this check in place.

if(event.origin !== "https://office-configurator.github.deltaco.eu" || event.data.type != "cart") {
 return;
}

To ensure backwards compatability, the base path will remain on version 1.3 until EOL @ 01/Jan/2022

Deltaco-AB/office-configurator is licensed under the MIT License.

Please report bugs and suggest new features by creating an Issue