Documentation_Eng

Implementation guide for PickUP Plug in eCommerce websites

A simple and comfortable solution for choosing PickUP location.
Once the customer pays for their purchase, an option will be presented to choose a location with PickUP services.
When the package arrives, the customer will receive an SMS stating that their package is waiting at the chosen PickUP location.

Pickup Button
Implementing Javascript
Catching the returned point data
Setting up a geographic location (Default point)
Try it out now!

Pickup Button

In order to create the PickUP button, copy the HTML code to a place of your choosing:

 <div onclick="window.PickupsSDK.onClick();return;" class="ups-pickups ups-pickups-48" ></div><div class="ups-pickups-info"></div>

Implementing Javascript

Copy the JavaScript code to the Header section of your page.
Replace the word TYPE with one of three following options:

all
stores
lockers

(function ()
 {
     var pkp = document.createElement('script');
     pkp.type = 'text/javascript'; pkp.async = true;
     pkp.src = 'https://pickuppoint.co.il/api/ups-pickups.sdk.TYPE.js';
    document.getElementsByTagName('head')[0].appendChild(pkp);
 })();

Catching the returned point data

In order to get the data about the returned PickUP point, it's necessary to add a listener for a Javascript Event called pickups-after_choosen that sends the appropriate data in a JSON format.

document.body.addEventListener( 'pickups-after-choosen', function(e, data)
{
    var pointDetails = e.originalEvent ? e.originalEvent.detail :e.detail;
});

Here's an example of a PickUP point data:

{
    "lat": 31.2651562,
    "lng": 34.798197,
    "title": "פיקאפ BGPC מחשבים וסלולר ",
    "street": "יצחק רגר 112",
    "city": "באר שבע",
    "zip": "סניף האוניברסיטה.שעות פתיחה: א'-ה' 09-19 ו' 09-13",
    "iid": "PKPS627728",
    "dist": "0.69",
    "stat": true
}

Setting up a geographic location (Default point)

A default geographic search point can be set up by adding a listener for a Javascript Event called pickups-before-open, and implementing one of the following three ways:

Defining Google Maps Coordinates

 document.body.addEventListener('pickups-before-open', function ()
{
     var defLocation = new Object();
     defLocation.location = new Object();

     defLocation.location.lat = 31.255670;
     defLocation.location.lng = 34.801147;

    var json = JSON.stringify(defLocation);
    window.PickupsSDK.setDefaults(json);
});

* If the inserted coordinates are wrong or out of Israeli territory (as defined by Google Maps), option 2 will take place as a default search location

Defining an address by city, street and house number

 document.body.addEventListener('pickups-before-open', function ()
{
    var defLocation = new Object();
    defLocation.location = new Object();

    defLocation.location.city = "Beer Sheva";
    defLocation.location.street = "Wingate";
    defLocation.location.house = "59";

    var json = JSON.stringify(defLocation);
    window.PickupsSDK.setDefaults(json);
});

* In case the defined address is wrong and cannot be resolved, or is out of Israeli bounds (as defined by Google Maps), option 3 will take place as a default search location.

User's current GPS location

 document.body.addEventListener('pickups-before-open', function ()
{
    window.PickupsSDK.setDefaults();
});

* In case there's a problem reading the user's current GPS location, no default location will be chosen, as described in option 4.

If none of the three option was implemented, the map will open without a default search location.

Try it out now!

Set up a default search point, press the "PickUP Access Point" button, choose a point and watch the returned data
Choose a starting point