Usage
To display the widget on a page and to get notified when a buyer makes choices in the widget, an instance of the widget must be created. An instance is created with the createAt function exported from the module.
var widget = UnifaunCheckout.createAt(containerElement, config;)
As argument containerElement pass an element selector as a string or a DOM element. The widget UI will be injected as a child to the containerElement.
The config argument must be a javascript object with any of these keys:
Key | Description | Type | Value |
|---|---|---|---|
language | Language code for the language to be used in the UI | string | da, de, cs, en, es, et, fi, fr, it, nl, no, pl, ru, sv |
useIcons | Use carrier logo icons or not | boolean | true, false |
iconsInFront | Place carrier logo icons before the title and description of the delivery option. Otherwise after. | boolean | true, false |
iconsBaseUrl | Base URL to use for carrier logo icon images. | string | Logos from nShift: |
installCSS | Install standard CSS rules for the widget. The CSS rules will be inserted as a NoticeTo enable the map widget you need to use the "nshift" or "nshift-mp" value. | boolean⎮string | false = No design true = Design 1 nshift = Design 2 nshift-mp = Design 3 (Deprecated: unifaun = Design 2 unifaun-mp = Design 3) |
narrowDisplay | Toggle narrow display mode on. When on the widget layout will stack some UI elements vertically to work better on screens with low horizontal resolution. | boolean | true, false |
narrowBreakpointWidth | The min. width of the widget element when narrow mode will be activated. If this value is supplied an event listener will be added to the window to track size changes. | number | |
ultraNarrowBreakpointWidth | The min. width of the widget element when ultra narrow mode will be activated. | number | |
resultCallback | Callback function that will be called whenever a buyer makes a selection or data entry in the widget UI. | function | |
enableMap | Enable an interactive map where the user can select a pickup point from a map interface. Only visible if pickup points with valid latitude and longitude coordinates are available for the selected option. NoticeFor the map to work you must use the "nshift" or "nshift-mp" CSS in the installCSS parameter. Deprecated: "unifaun" and unifaun-mp" | boolean | true, false (default) |
Once a widget instance has been created it can be used to control the widget. The methods available on the widget are:
Method | Description |
|---|---|
installCSS() | Call this method to install the CSS rules. |
uninstallCSS() | Call this method to remove the CSS rules from the page. |
changeNarrowDisplay(narrow) | Call this method with a boolean argument to change the UI to, or from, narrow mode. |
changeNarrowBreakpointWidth(narrowWidth, ultraNarrowWidth) | Call this method with the pixel width of the widget element when the widget UI should change to narrow mode. A second optional argument sets the pixel width of the widget element when ultra narrow mode should be activated. |
checkWidthBreakpoints() | Call this method to let the widget check the width of its element and update, to or from, narrow/ultra narrow mode. |
enable() | Call this method to enable the widget UI and allow users to change options. |
disable() | Call this method to disable the widget UI and stop users from making changes. |
updateList(optionsList) | Call this method with the result of a call to the |
getResult | Call this method to get the result object last sent to the |
setResult(result) | Call this method with a result object like the parameter to the resultCallback.The widget state will update to reflect the selections made in the result object. |