Clever Point Map Integration

📍 🦉

Introduction

This document describes the functionality available to the Clever Point Map, provided by Clever Services to customers, in order to use its Clever Point services.

Checkout

In order to make the Clever Point service available on your site, it is necessary to modify the existing "check out" process so that your customer can choose the new way receipt "Pick Up from Clever Point".

Your technician should add a new radio button “Receive from Clever Point”.

Once the customer selects "Pick Up from Clever Point", their map should be displayed of Clever Point points, in which Clever Point stores are mapped. Then your customer must choose one Clever Point from which he will receive his parcel.

The map and overall, its functionality is provided by us and all you need to implement by your technician is its integration into your site.

The minimum steps that are actually required are launching the map on the website with a function that will be called when the user chooses to be informed about the store network Clever Point.

Every time he chooses one of the “Clever Points” it would be good if they were shown to him in one text box and the details of the Clever Point (Numeric Code – Alphanumeric Code – Name of Point) that he has chosen.

This will help enrich the user/customer experience in your eshop.

Upon completion of the registration of the order, it is necessary to inform the base given you the details of the selected Clever Point. The items of the selected Clever Point will fetch them using the onselect method of the map plugin which is called every time the customer selects a Clever Point store. In the order index of the site (back office), except for the order details which are also displayed today, the selected Clever Point's data should also be displayed (variable "text" described in the table below) so that later with its use Web Portal to complete the Clever Services update process for this particular one delivery of the order.

HTML setup

To setup the Clever Point Map into your web-page you need to insert the following script tag into the html code:

Development environment

<script type="text/javascript" src="https://test.cleverpoint.gr/portal/content/clevermap_v2/script/cleverpoint-map.js"> </script>

Production environment

<script type="text/javascript" src="https://platform.cleverpoint.gr/portal/content/clevermap_v2/script/cleverpoint-map.js"> </script>

Html code

<body>
    ...
    <div id="clevermap"></div>
    ...
</body>

Javascript instructions

To initialize the Clever Point Map you need to insert the following code into a <script></script> tag or into a JS file.

<script>
clevermap({
    selector: '#clevermap',
    cleverPointKey: '',     // 'YOUR CLEVERPOINT API KEY'
    arcgisMapKey: '',       // 'YOUR ARCGIS API KEY'
    googleMapKey: '',       // 'YOUR GOOGLE MAP KEY'
    header: false,
    defaultAddress: null,
    defaultCoordinates: null,
    defaultCleverPoint: null,
    singleSelect: false,
    display: {
        addressBar: true,
        pointList: false,
        pointInfoType: 'docked'|'dockedSmall'|'floating'
    },
    filters: {
        codAmount: 0
    },
    onclear: () => {
        console.log(`point cleared`);
    }
    onselect: (point) => {
        console.log('selected', point);
    },
    oninitialized: () => {
        console.log(`initialized`);
    }
});
</script>

Clever Point Map parameters

Name	Type	Description
selector	string	The querySelector for the DOM element where Clever Point Map will be created.
onselect	function	The callback function to return the select Clever Point information. Below the detailed information are presented.
cleverPointKey	string	The Clever Point API key sent to you.
arcgisMapKey	string	(1) The API key from ArcGIS (http://developers.arcgis.com/).
googleMapKey	string	(1) The API key from Google (https://developers.google.com/maps/documentation/javascript/get-api-key).
defaultAddress	string	(Optional) In case you want to set an initial map position based on an address. You need to provide a valid address or at least a part of it, post code, area, etc.
defaultCoordinates	string	(Optional) In case you want to set an initial map position based on map coordinates.
defaultCleverPoint	string	(Optional) In case you want to set an initial map position based on a Clever Point (you need to provide the Station ID in form of UUID).
singleSelect	boolean	(Optional) Changes the way the click selects the Clever Point and runs the «onselect» callback function, from choosing the point on the map or the Clever Point list. If set to true the Clever Point is selected without the need to click the «Επίλεξε το!» (Select this) button.
header	boolean	(Optional) Displays the «Notification bar» on Clever Point Map.
display	object	(Optional) JSON object with display parameters for the Clever Point Map.
display.addressBar	boolean	(Optional) Displays or hides the address search bar.
display.pointList	boolean	(Optional) Displays or hides the Clever Point list.
display.pointInfoType	"docked", "dockedSmall", "floating"	(Optional) Changes the Clever Point info panel.
filters	object	(Optional) JSON object with parameters for filtering the displayed Clever Point.
filters.codAmount	number	(Optional) In case the order has cash on delivery (CoD) you can filter to display only Clever Points with CoD availability.
onclear	function	(Optional) Callback function which runs when the user clicks the "Καθαρισμός" (Clear) button. If a callback is defined then the clear button will be shown when a Clever Point is selected.
oninitialized	function	(Optional) Callback function when the Clever Point Map has finished the initialization process.

Map keys note

The base map can only support one key from the following arcgisMapKey and googleMapKey.

Callback function onselect

The onselect callback function is trigger when the «Επίλεξε το!» (Select this) button is clicked.

CleverMap00

and returns the following JSON object with the selected Clever Point information:

Name	Description
StationId	The point UUID: "2e9e5242-081c-4575-94ce-849687ba76ec".
Prefix	The point prefix: "5001".
Code	The point code: "CPHED".
Name	The point name: "CLEVER SERVICES A.E.".
ShortName	The point distinct title: "Clever Point ΠΕΡΙΣΤΕΡΙ".
AddressLine1	The point address: "ΑΡΚΑΔΙΑΣ 3".
ZipCode	The postal code: "12132".
City	The point area: "ΠΕΡΙΣΤΕΡΙ."
Prefecture	The CleverPoint prefecture: "ΑΤΤΙΚΗΣ".
Phones	The CleverPoint contact phones: "+30 2167000580".
IsGlobalStore	Flag defining if the CleverPoint is available for the provided «cleverPointKey».
IsOperational	Flag defining if the CleverPoint is currently operational.
IsOperationalOnSaturday	Flag defining if the CleverPoint is operational on Saturdays.
IsOperationalOnSunday	Flag defining if the CleverPoint is operational on Sundays.
IsOperationalOnWeekend	Flag defining if the CleverPoint is operational on Weekends.
IsAllDay	Flag defining if the CleverPoint is operational 24h.
Lat	The point latitude "38.0047".
Lng	The point longitude π.χ. "23.70195".
PhotoFileNames	The photo files names available for the Clever Point.
OperationalStatus	Description for the operational status for the CleverPoint.

Parameter examples

Following you can find examples for some parameters and the effects on the Clever Point Map.

defaultAddress = "Αρκαδίας 3, 12132"

CleverMap01

header = true

CleverMap02

display.addressBar = true

CleverMap01

display.pointList = true

CleverMap03

display.pointInfoType = "docked"

CleverMap00

display.pointInfoType = "dockedSmall"

CleverMap00

display.pointInfoType = "floating"

CleverMap00

onclear = () => { console.log(`point cleared`); }

CleverMap00

Shipment creation

To inform Clever Services for shipments, we provide two options:

Clever Point Partners Portal

A web-portal for partners, with the following functionality:

Create shipment
Updated shipment details
Cancel shipment
Print vouchers
Print daily sheet with shipments

Development environment

(https://test.cleverpoint.gr/partners/)

Production environment

(https://platform.cleverpoint.gr/partners/)

Clever Point API

A web-api. You can detailed information for our API here.

Clever Point Map Integration #

Introduction #

Checkout #

HTML setup #

Development environment #

Production environment #

Html code #

Javascript instructions #

Clever Point Map parameters #

Map keys note #

Callback function onselect #

Parameter examples #

defaultAddress = "Αρκαδίας 3, 12132" #

header = true #

display.addressBar = true #

display.pointList = true #

display.pointInfoType = "docked" #

display.pointInfoType = "dockedSmall" #

display.pointInfoType = "floating" #

onclear = () => { console.log(point cleared); } #

Shipment creation #

Clever Point Partners Portal #

Development environment #

Production environment #

Clever Point API #

Clever Point Map Integration

Introduction

Checkout

HTML setup

Development environment

Production environment

Html code

Javascript instructions

Clever Point Map parameters

Map keys note

Callback function onselect

Parameter examples

defaultAddress = "Αρκαδίας 3, 12132"

header = true

display.addressBar = true

display.pointList = true

display.pointInfoType = "docked"

display.pointInfoType = "dockedSmall"

display.pointInfoType = "floating"

onclear = () => { console.log(`point cleared`); }

Shipment creation

Clever Point Partners Portal

Development environment

Production environment

Clever Point API