User interaction
There are two types of user interaction that affect the widget:
External changes
Internal changes
External changes
When first created and every time the user makes changes to one of the input variables sent to the /delivery-checkouts API this sequence of actions should occur:
Disable the widget with a call to the
disable
method.Make an AJAX request to the
/delivery-checkouts API
. The web shop backend will normally act as a proxy for this type of call so that a secret API key can be sent to the REST API.When a response arrives, call the
updateList
method and then enable the widget with a call to theenable
method.
// Disable widget while AJAX request is in progress. widget.disable(); fetch(url).then(function(response) { return response.json(); }).then(function(data) { //Update the widget with new data. widget.updateList(data); }).catch(function() { //Handle error }).then(function() { //Always enable widget widget.enable(); });
Internal changes
Whenever the user selects one of the delivery checkout options or updates any value connected to the selected option, the resultCallback
function in the widget configuration will be called. The callback function will receive a single argument in the form of a javascript object with the following properties:
Property | Description | Type | Value |
---|---|---|---|
valid | Indicates if the current values in the widget are all valid. Only if this is | boolean | true, false |
deliveryCheckoutId | The delivery checkout ID including version. | string |
|
selectedOptionId | The ID of the currently selected delivery option. | string |
|
optionIds | An array of selected delivery checkout option ID:s from highest to lowest level. | string[] |
|
price | The total price of all selected delivery options and addons | number |
|
agent | The selected agent ID. | string |
|
selectedAddons | An array of selected addons. | AddonResult[] | |
fields | An array of values for additional input related to the selected delivery option. | FieldResult[] |