Tredjeparts-konfigurator

Tredjeparts-konfiguratorn är ett tillägg som låter användaren konfigurera artiklar med stöd från en lösning som utvecklats av en tredje part. När användaren väljer att konfigurera en artikel med tredjeparts konfigurator visar en del av webbsidan en IFrame i vilken konfiguratorn från tredje part visas.

Tredjeparts-konfiguratorn måste kunna kommunicera med webbshoppens konfigurator. Detta kräver alltså utveckling i tredjepartslösningen.

Det finns två olika sätt att hantera visningen när du använder en konfigurator från tredje part.

  • Full – som gör att inga inmatningsfält eller val visas i webbshopen, all konfiguration och alla val överlåts till tredjepartslösningen.
  • Visuell – som är tänkt för att tredjeparten endast ska visa något, t.ex. en 3D-modell. Inmatningsfälten ligger då i webbshopen och om du t.ex. ändrar en variabel kan tredjepartslösningen reagera på detta och visa ändringen i 3D-modellen.

I webbshopen styrs detta med fyra inställningar på artikelnivå som enbart visas om artikeln är en konfigurerad artikel.

  • Använd tredjeparts-konfigurator – styr om artikeln ska visa en tredjeparts-konfigurator.
  • URL till tredjeparts-konfigurator – en länk till sidan som visar konfiguratorn.
  • Typ av konfigurator – här väljer du vilket av sätten som ska användas. Full eller Visual. Se beskrivning av Full och Visual ovan.
  • Bredd i procent – styr hur mycket av bredden tredjeparts-lösningen ska ta upp. Detta visas bara om Visual är vald. Om Full är vald så används alltid hela bredden.

För utvecklare av tredjepartslösningar

Det finns tre olika meddelanden som utväxlas mellan Monitor Webbshop och tredjeparts-konfiguratorn. För bättre läsbarhet och tolkning är följande på engelska. Koden nedan är 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:

Kopiera 
{

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

Kopiera 
{

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

Kopiera 
{

    "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

        }

    ]

}