How can I save configurations in the user account of my shop/cms site?

Cookbook - How To's 👩‍🍳
#1

Save configuration

After the user saves a configuration, the following message is sent to the parent window.

window.parent.postMessage({ method: 'configurationsaved', code: 'XYZ123' }, targetOrigin);

Communication with the embedded configurator

The embedded configurator uses the postMessage api to notify the parent window about various events, like “add to cart” or “configuration saved”.

The container page can listen to these events, so it can react to them. This can be done in the following way:

<!-- listening to message events -->
<script>
    window.addEventListener('message', (event) => {
        const data = event.data;
        console.log('message posted from the embedded page', data);

        const method = data.method;
        const code = data.code;

        switch (method) {
          case 'configurationsaved': {
            console.log('the user clicked the save button in the top right corner, and received the following code: ' + code);
            // do other actions here
            break;
          }
          case 'addtocart': {
            console.log('the user clicked the "add to cart" button in the bottom right corner, and received the following code: ' + code);
            // do other actions here
            break;
          }
          default: {
            console.log('unhandled or unknown method: ' + method);
          }
        }
    });
</script>

<!-- embedding the configurator -->
<iframe src="/identifier:softshell_creator_2d" width="100%" height="100%" frameborder="0"></iframe>

With the configuration code from the message event, the surrounding page can retrieve the detail information for the saved configuration and the calculation.

https://[configuratorURL]/frontendapi/configuration/loadconfigurationinfo/{code}

The call returns a json object with all relevant information to the configuration, e.g. selected options, selected designareas, and the calculated price. The price is calculated as soon as you load this call, so you can update the price e.g. from your cart. JSON Example:

{
  "code": "XYZ123",
  "item": "Item Name",
  "itemIdentifier": "123456",
  "calculation": {
    "total": 519,
    "totalFormatted": "519.00 €",
    "netTotal": 436.13,
    "netTotalFormatted": "436.13 €",
  },
  "optionclassifications": [
    {
      "identifier": "component_identifier",
      "title": "Component Title",
      "selectedoptions": [
        {
          "identifier": "option_identifier",
          "title": "Option Title",
          "amount": 1
        }
      ]
    },
  ],
  "images": [
    "//urltoimage1"
  ],
  "customdata": {},
  "date_created": {
    "date": "2037-07-13 17:32:41.000000",
    "timezone_type": 3,
    "timezone": "Europe/Paris"
  }
}

More information on the postMessage api: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

1 Like