Unified Shipping Module - Configuration
Configuration Options
The unified shipping module appearance and behaviour can be influenced by configuration options. All configuration options are used by setting the respective properties on the "window.porterbuddy" object.
See Data Model for further information on the types.
Available configuration options - items in bold are required
| Key | Type | Description |
|---|---|---|
| getShippingOptions | function(recipientInfo: RecipientInfo): Promise<{ homeDeliveryOptions: ShippingOption[], pickupPointOptions: ShippingOption[], storeOptions: ShippingOption[] }> | Called when address form is submitted. Should produce the complete set of shipping options, and will replace the existing shipping options if any. See "Consolidation" page for an example. Can also be defined as a node.js-style callback-calling function ((recipientInfo, callback: (err, data) => void) => void) |
| onSelectionChanged | function(category: ShippingCategory, selected: SelectedShipping) | Function that is called when the selected delivery option changes. The argument "category" contains which shipping category is selected (home, pickupPoint, store) and "selected" contains the detail data for the selected shipping option. |
| homeDeliveryOptions | ShippingOption[] | Configures the home delivery options to be displayed. If undefined is passed, the category "Home Delivery" will not be shown. If an empty array is passed, the category will be shown as inactive. It is recommended to define getShippingOptions instead of using this option. |
| pickupPointOptions | ShippingOption[] | Configures the options for delivery to a pickup point to be displayed. If undefined is passed, the category "Pickup Point Delivery" will not be shown, if an empty array is passed, it will be shown as inactive. |
| storeOptions | ShippingOption[] | Configures the options for store pickup to be displayed. If undefined is passed, the category "Store Pickup" will not be shown, if an empty array is passed, it will be shown as inactive. |
| 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 |
| now | string | For testing only. Hardcode the value of now to get predictable results when testing with test data and date functions |
| text | CheckoutText | Texts used in the consolidated checkout |
| language | NO | EN | Language is necessary when custom texts are provided. It will set proper variable texts regarding the language set. By default language is detected by users browser setting |
| recipientInfo | RecipientInfo | Info about the delivery recipient. |
| allowStorage | boolean | Allow storing form info in localStorage (default: true) |
| recipientInfoLocked | boolean | If set to true, the address form is locked for editing. If this is set, complete recipientInfo should be provided. (default: false) |
| enableHtmlDescriptions | boolean | If enabled, the values of the description properties of the various shipping options are interpreted as html content. WARNING:This is -in essence- HTML injection and allows for breaking the unified shipping module layout. If you chose to use this, make sure to not include any tags that might have serious side effects for the widget layput. Default value is false. |
| getPbAvailability | function(recipientInfo: RecipientInfo): Promise<AvailabilityResponse> | Called when recipientInfo (address form) is submitted. Should produce an availabilityResponse from Porterbuddy availability API. If you want to update more than just porterbuddy availability, define getShippingOptions instead. See "Consolidation" page for more details. Can also be defined as a node-style callback-calling function ((recipientInfo, callback: (err, data) => void) => void) |
| getStreetAddress | function(recipientInfo: { email: string, postCode: string }): Promise<string | undefined> | Called when the first line of the address form is submitted. Define this to populate streetAddress based on some external source. If a streetAddress is produced the second line of the form is populated, and the address form is submitted. Can also be defined as a node-style callback-calling function (({email, postCode}, callback: (err, data) => void) => void) |
| onUnselectedShipping | function() | Function that is called when the previously selected shipping option becomes unavailable, e.g. because the shipping options were updated and do not contain the previously selected one anymore |
| onFirstLineEntered | function(data: { email: string, postCode: string }) | Function that is called when the user submits the first line. If you want to respond with a street address, use getStreetAddress instead. |
| onRecipientInfoEntered | function(recipientInfo: RecipientInfo) | Function that is called when the user submits full recipient information |
| onSetCallbacks | function(callbacks: CheckoutCallbacks) | Function that gets called after initialization of the consolidated checkout. The function argument is an object containing callback function references, which can be used to to interact with the checkout from external scripts. |
| padding | "none" | undefined | The USM has some padding by default, but if it is rendered on a white background with sufficient spacing around it, this padding can be disabled by setting `padding: "none"`. |