pp-api-widget

Olza Logistic's Pickup Point selection widget.

Table of contents

1. Usage
2. Modal picker
3. Embedded widget
4. Important notes
5. Widget configuration
6. Usage examples
7. External links
8. Change log
9. License and credits

Usage

Olza Widget can operate in two modes - as modal picker (recommended), that shows up overlaying current page content and blocks underlying UI unless dismissed or as embedded component, sitting in your page layout.

Modal picker

To open modal picker simply call Olza.Widget.pick(config); whenever needed. The config argument is widget configuration object. Once user accepts his selection, your onSelect callback will be invoked with detils of selected location. For example:

function pick() {
    const options = {
        api: {
            url: '<URL>',
            accessToken: '<ACCESS-TOKEN>',
            country: 'cz',
            speditions: ['zas', 'zas-econt-pp'],
        },
        callbacks: {
            onSelect: function(item) {
                console.log(`Picked PP: ${JSON.stringify(item)}`);
            },
        }
    };
    Olza.Widget.pick(options);
}

Embedded widget

To embed Widget in your layout, put empty DIV element with olza-widget ID and call Olza.Widget.embed(config); on page load. For example:

window.onload = function() {
    const options = {
        api: {
            url: '<URL>',
            accessToken: '<ACCESS-TOKEN>',
            country: 'cz',
            speditions: ['zas', 'zas-econt-pp'],
        },
        callbacks: {
            onSelect: function(item) {
                console.log(`Picked PP: ${JSON.stringify(item)}`);
            },
        },
    };
    Olza.Widget.embed(options);
}

Notes

• Widget code is NOT reentrant, which means only one instance can run at the same time, therefore you cannot have both embedded widget and modal on the same page.

• speditions is a list of spedition codes requested to be used. Final list may differ as not all requested speditions might be available at runtime.

Examples

See example/ folder for Widget usage examples.

Links

• BitBucket project website: https://bitbucket.org/develart/pp-widget/
• NPM page: https://www.npmjs.com/package/develart-olzalogistic-pickup-points-widget

Credits

• Copyright © 2022-2024 DevelArt
• Olza Logistic Widget software is open source and licensed under MIT license.