pp-api-widget

Olza Logistic's Pickup Point selection widget.

Usage

Widget layout

By default, Olza Widget injects its layout into your HTML page. If for any reason you'd like to keep its main container into specified place in your layout hierarchy, insert empty div named olza-widget:

<div id="olza-widget"></div>

Calling Pickup Point selector

Olza.Widget.pick(config);

where config is a dictionary of parameters overriding widget defaults, for example:

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

Available options are:

| Parameter | Description | Default | Notes | |--------------------|---------------------------------------------------------------------------------------------|---------|-------------------------------------------------------------------| | url | OlzaLogistic's API base URL | null | | | accessToken | OlzaLogistic's API access token. | null | | | country | Target country to use library for. | cz | | | language | Requested UI language | null | Will use browser defined language if not explicitly specified. | | latitude | Latitude of the initial map location | | | | longitude | Longitude of the initial map location | | | | zoom | Initial Leaflet map zoom level. | 12 | | | showOnMapZoomLevel | Zoom level used while "Show on map" button is clicked in PP details pane | 17 | | | speditions | List of requested speditions that are going to be used (passed all the filtering etc.). | [] | If empty list is provided, all available speditions will be used. | | onSelect | Called to pass user selected Pickup Point (as JSON object). | null | | | useBrowserLocation | If true, widget will try to use browser's geolocation to determine initial map location. | true | |

Notes

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

Dev notes

How to start development

• Install devDependencies yarn install --production=false
• Turn on files watching yarn watch
• Make changes in files in src directory
• Build new version yarn build

If you don't want to install node and yarn on your machine you can use docker-compose.yml from repository:

• docker-compose up -d
• docker-compose exec node yarn watch
• docker-compose exec node yarn build

Flags

Country flags sourced from Flagpedia (docs).

Spedition imagery

Widget expects both map pin and spedition logos to be located in relative img/ sub folder and saved as PNG files. The file names must follow the convention <SPEDITION-CODE>.png for pin and <SPEDITION-CODE>-logo.png for spedition logo.

Logo size: 600x600 px