Third-party configurator

The third-party configurator is an add-on which allows the user to configure parts with the support of a solution developed by a third-party. When the user chooses to configure a part with a third-party configurator, part of the website will display an Iframe in which the third-party configurator is shown.

The third-party configurator must be able to communicate with the webshop’s configurator. This requires development in the third-party solution.

There are two ways to manage what is displayed when using a configurator from a third-party.

  • Full – which means no input field or selection are shown in the webshop, and all configuration and selections are transferred to the third-party solution.
  • Visual – intended for when the third-party only wants to display something, for example, a 3D model. The input field is then located in the webshop, and if you change a variable, for example, the third-party solution will react and show the change in the 3D model.

This is controlled in the webshop by four settings on part level, which are only shown if the part is configured.

  • Use third-party configurator – controls if the part should display a third-party configurator.
  • URL for third-party configurator – a link to the page that shows the configurator.
  • Type of configurator – here you can select which of the methods will be used. Full or Visual. See descriptions of Full and Visual above.
  • Width in percent – controls how much of the width is taken up by the third-party solution. This is only shown if Visual is selected. If Full is used, the full width is always taken up.

For developers of third-party solutions

There are three different messages that are exchanged between Monitor Webshop and the third-party configurator. The following text is only available in English. The below code format is json.

requestConfigurationUpdate

A postMessage sent from third-party component, via Iframe, to Monitor Web shop. To announce that the Iframe is ready to recieve data.

Example payload of postMessage:

Copy 
{

    "Type": "monitor.requestConfigurationUpdate"

}

onConfigurationUpdate

A postMessage sent from Monitor Web shop with the current state of configuration. From Monitor Web shop to the third-party component.

Copy 
{

    "Type": "monitor.onConfigurationUpdate",

    "PartNumber": "M-240",

    "PartId": 1087439089516495746,

    "PartDescription": "Perforerad plåt",

    "ConfigurationTemplateId": 1087441001850687793,

    "PartConfigurationId": 1094192187638043572,

    "ConfigurationSessionId": "d493b936-bff2-4ebc-9ee3-bd4688a9c957",

    "Quantity": 1.0,

    "UnitPrice": 1000.0,

    "CurrencyCode": "SEK",

    "WeightPerUnit": 0.0,

    "UnitCode": "ST",

    "Variables": [

        {

            "Id": 1087439807849777223,

            "Code": "Width",

            "Description": "Bredd",

            "ValidationResults": [],

            "Value": 1000.0,

        },

        {

            "Id": 1087440094538844227,

            "Code": "Depth",

            "Description": "Djup",

            "ValidationResults": [],

            "Value": 2000.0,

        },

    ]

    "SelectionGroups": [

        {

            "Id": "1091880164606901694",

            "Code": "M240-0",

            "Description": "Hole shape",

            "Values": [

                {

                    "Id": "1091880164606901680",

                    "PartDescription": "Square",

                    "PartId": "1087439375131823821",

                    "PartNumber": "M-240-1",

                    "Quantity": 1.0,

                    "ValidationResults": [],

                },

            ]

        },

    ]

}

returnConfigurationValues

A postMessage sent from third-party component, via Iframe, to Monitor Web shop. Containing the changes made in third-party component.

Copy 
{

    "Type": "monitor.returnConfigurationValues",

    "PartNumber": "M-240",

    "Quantity": 1.0,

    "SelectionGroups": [

        {

            "Code": "M240-1",

            "Values": [

                {

                    "PartNumber": "M-240-1",

                    "Quantity": 1.0

                }

            ]

        }

    ],

    "Variables": [

        {

            "Code": "Width",

            "Value": 1500.0

        },

        {

            "Code": "Depth",

            "Value": 1500.0

        }

    ]

}