Configuration options - Product card widget
The Product card widget's appearance and behaviour can be influenced by configuration options. All configuration options are used by setting the respective properties on the "window.porterbuddy" object.
Available configuration options - items in bold are required
| Key | Type | Description |
|---|---|---|
| token | string | The public API token given to you by Porterbuddy |
| view | availability | checkout | deliveryInfo | The view to start the widget in |
| apiMode | test | production | Use this to switch between test or production mode. The default mode is the one for the environment the widget source code is loaded from. |
| apiBaseUrl | string | Base URL for fetching delivery windows. Note: this configuration option is used for testing purposes only, in general, setting this option should be not necessary. This setting overrides the url determined by apiMode. |
| resetContext | boolean | If set to true, all previously set properties will be reset to the default value if not defined with a new value in this context |
| allowStorage | boolean | If enabled, the widget will store the users postcode in localstorage |
| allowGeoLocation | boolean | Allow geolocation detection. This will trigger a popup in the users browser asking for permission. |
| postalCode | string | If you already have the users postcode you can set it here to check availability immediately. For Checkout mode, this sets the store postcode to the specified value |
| cssClassPrefix | string | All CSS classes in the widget are prefixed by this string. |
| alternateAvailabilityView | boolean | Allows to set the white background color in product card widget with black font, default value -> false |
| language | NO | EN | Language is necessary when custom texts are provided. It will set proper variable texts regarding the language set. It is only necessary when custom texts are provided. By default language is detected by users browser setting |
| text | object | Texts used in the widget |
| pickupWindows | PickupWindow[] | Use the specified pickup windows for querying availability |
| discount | number | Discount to be applied on all delivery prices shown, specified as hundreds of a value unit (e.g. discount=5000 for a price reduction by 50 NOK) |
| additionalDiscounts | Dictionary: string to number | Additional discounts for price calculation in text replacements. Please check the documentation page "Multiple Discounts" for usage examples |
| onUpdateDeliveryWindows | function (callback, additionalInfo) | Function that runs when delivery windows should be updated. The function is given a callback function that must be executed with an availability response once they are fetched. This is to support async fetching. The additional info object (second parameter) should be added to the availability call to the Porterbuddy API. |
| updateDeliveryWindowsInterval | number | Time in seconds to wait before requesting updated delivery windows |
| hideIfUnavailable | boolean | Hide the widget if Porterbuddy delivery is not available for the specified postcode, default=true |
| availabilityCacheTTL | number | Time in seconds to cache availability responses. If the time is set to 0, availability responses will not be cached. |
| now | string | For testing only. Hardcode the value of now to get predictable results when testing with test data and date functions |
| originAddress | boolean | The origin address from which the merchandise will be sent. If not specified, Oslo is assumed as the origin. |
| onStartFetchAvailability | function(string, (Address | CustomMessage | null) => void) | This functions is called when availability is fetched. It is called with the entered postcode and a callback function, which parameter can be one of the following things: 1. the new origin address, 2. a custom message to display instead of doing an availability call, 3. null to use the previously set origin address |
| onSetCallbacks | function(callbacks) | Function that gets called after initialization of the widget. The function argument is an object containing callback function references, which can be used to to interact with the widget from externally. |
The property "onSetCallbacks" has a special behaviour. This is a callback function that gets passed function references to methods to interact with the widget during runtime. The usage of this function is explained here.