Telepítési útmutató a PostaPont API implementálásához webes felületre

Átírás

1 Telepítési útmutató a PostaPont API implementálásához webes felületre Egy egyszerűen beágyazható JavaScript kóddal a megrendelési folyamat végére beilleszthet egy térképes keresőmodult, amivel vásárlói kényelmesen ki tudják választani, mely PostaPontra kérik csomagjukat. Mikor a kliens modul megkapja a megrendelő irányítószámát a webshoptól, a térképes felületen, illetve felette egy listában megjeleníti az ügyfélhez legközelebbi PostaPontokat. A térképen olyan kivágás látszódik, amibe a 10 legközelebbi PostaPont fér bele. Ezután a vásárló a listából, vagy a térképre kattintva kiválaszthatja a legmegfelelőbb átvevőhelyet. A kiválasztott PostaPontot a modul visszaadja a webshopnak, amely bekerül a rendelési adatok közé, így automatikusan továbbítódik a Posta felé a megrendelés leadásakor. A beágyazandó modul paraméterezhető, így a legtöbb webshoppal együtt tud működni. A kliensoldali JavaScript modulon belüli jquery csak az adatcserét biztosítja, a szerver oldalon viszont több, kizárólag ehhez a rendszerhez megírt programrész fogja feldolgozni az adatokat.

2 A telepítés fázisai: 1) jquery függvénykönyvtár beillesztése Ezt a könyvtárat meg kell hívni az oldal fejlécébe, lehetőleg a <head> és </head> HTML tag-ek közé kerüljön. A könyvtár elérése (beillesztendő kód): <script type="text/javascript" src=" Példa ennek a fázisnak az alkalmazására (a head nyitó és záró tag-ek közé illessze): <head> <script type="text/javascript" src=" </head>

3 A telepítés fázisai: 2) Google térkép API beillesztése Illessze be az alábbi kódrészletet a jquery függvénykönyvtár meghívásához használt kódrészlet után, szintén a <head></head> tag-ek közé. <script type="text/javascript" src=" ion=hu"></script> A térkép használata ingyenes, azonban nagyobb forgalom esetén üzleti licence szükséges. Készíthet úgynevezett API kulcsot is a térkép alkalmazásához, amellyel nyomon követheti a használatát, statisztikákat kérhet, és más előnyökkel járhat. Erről bővebben a Google térkép leírásában olvashat:

4 A telepítés fázisai: 3) PostaPont API beillesztése Végül meg kell hívni magát a PostaPont alkalmazást és a hozzá tartozó stílusosztályt is az alábbi módon: (szintén a <head></head>-ben az előző sorok után). <script type= text/javascript src= ascripts/postapont-api.js ></script> <link rel= stylesheet type= text/css href= >

5 A telepítés fázisai: 4) A PostaPont kiválasztó térkép beillesztése Ezt már a megrendelő form-hoz kell beépíteni. Ha még nem létezik, akkor hozza létre az irányítószám beviteli mezőt, vagy adjon id értéket a beviteli mezőnek az alábbi módon (az id értékre figyeljen, mert a későbbiekben ez alapján lesz összekapcsolva a postapont kiválasztóval). Irányítószám: <input type="text" id="ugyfelform_iranyitoszam"> Szükség van egy rejtett mezőre a form-ban, ebbe fogja visszaírni a postapont kiválasztó a felhasználó által kiválasztott postapont adatait, hogy a form továbbítani tudja. <input type="hidden" id="valasztott_postapont" name="valasztott_postapont" value="">

6 A telepítés fázisai: 5) Végül a következő kódot beillesztve jelenítheti meg a térképet (2/1):  <div id="container" action="" method="post" onsubmit="return false;"></div>  <div id="postapontvalasztoapi"></div>

7 A telepítés fázisai: 5) Végül a következő kódot beillesztve jelenítheti meg a térképet (2/2): <script type="text/javascript"> ppapi.linkzipfield('ugyfelform_iranyitoszam'); //<-- A megrendelõ form input elemének a megjelölése (beállítása a kiválasztó számára) ppapi.insertmap('postapontvalasztoapi'); //<-- PostaPont választó API beillesztése (ilyen azonosítóval rendelkezõ DOM objektumba) ppapi.onselect = function(data){ //<-- Postapont kiválasztásra bekövetkezõ esemény lekötése // Minta! A kiválasztott PostaPont adatainak visszaírása a megrendelõ form rejtett mezõjébe. jquery('#valasztott_postapont').val( data['name'] + ' ' +data['zip'] +' '+ data['county'] +' '+ data['address'] ); // Minta! Adatkiírás, a PostaPont minden adatát megjeleníti. Csak fejlesztési segédlet! var s = "A választott átvevõhely adatai:\n"; for(i in data) s += i+': '+data[i]+"\n"; s += '\na választott átvevõhely adatai beleíródtak a megrendelõ form megadott objektumába is:\n'; s += jquery('<div/>').append(jquery('#valasztott_postapont').clone()).html(); alert(s); }; </script> <! >

8 A telepítés fázisai: 6) PostaPontok, MOL PostaPontok, Csomagautomata markerek, szűrők megjelenítése (2/1): Alapértelmezésben a js vezérli a szűrők megjelenését a következő kód részlet szerint: for (var i = 0; i < postdata.groupnames.length; i++) { //ppapi.symbols[postdata.groupnames[i].groupname] = new google.maps.markerimage(postdata.groupnames[i].iconname,new google.maps.size(25, 20), new google.maps.point(0,0), new google.maps.point(13, 20)); ppapi.symbols[postdata.groupnames[i].groupname] = new google.maps.markerimage(postdata.groupnames[i].iconname,new google.maps.size(80, 80), new google.maps.point(0,0), new google.maps.point(13, 20));

9 A telepítés fázisai: 6) PostaPontok, MOL PostaPontok, Csomagautomata markerek, szűrők megjelenítése (2/2): // szuro hozzadas var title = document.getelementbyid('container').value; var node = document.createelement('label'); if (i % 2) { node.innerhtml = '<label for="checkbox_pp_csomagautomata" class="checkbox_skin cbs_active" title="csomagautomaták megjelenítése"><input type="checkbox" name="pp_csomagautomata" id="checkbox_pp_csomagautomata' + i + '" class="checkradio" title="csomagautomaták megjelenítése" checked="checked"></label> <label for="checkbox_pp_csomagautomata" class="biglabel" id="label_pp_csomagautomata" title="csomagautomaták megjelenítése"><strong>' + postdata.groupnames[i].description + '</strong> megjelenítése</label><br>'; document.getelementbyid('container').appendchild(node); } else { node.innerhtml = '<label for="checkbox_pp_csomagautomata" class="checkbox_skin cbs_active" title="csomagautomaták megjelenítése"><input type="checkbox" name="pp_csomagautomata" id="checkbox_pp_csomagautomata' + i + '" class="checkradio" title="csomagautomaták megjelenítése" checked="checked"></label> <label for="checkbox_pp_csomagautomata" class="biglabel" id="label_pp_csomagautomata" title="csomagautomaták megjelenítése"><strong>' + postdata.groupnames[i].description + '</strong> megjelenítése</label>'; document.getelementbyid('container').appendchild(node); } // label generálás }

10 Egyes szűrő kategóriák egyedileg kikapcsolhatók. Ehhez a postapont-api.js állományt kell módosítani ami azzal jár, hogy egyes szűrők megszűnéséről, bevezetéséről nem fog értesülni. A következő szűrési kategóriák vannak: Postán maradó: 10_posta Coop üzletek: 50_coop MOL kutak: 20_molkut Csomagautomaták: 30_csomagautomata Media Markt: 70_mediamarkt Példa egy szűrő kikapcsolására (a kiemelt rész amit bele kell írni):

11 reloadpp: function(fitbounds){ var skipgroups = Array(); for(i in ppapi.skipgroups) if(ppapi.skipgroups[i]) skipgroups.push(i); var alwaysskipgroup = '10_posta'; skipgroups.push(alwaysskipgroup); ppapi.apicall('listpp', { 'zipcode': ppapi.zipcode, 'lat': ppapi.zipkrd.lat(), 'lng': ppapi.zipkrd.lng(), 'group': ppapi.opts.group, 'skipgroups': skipgroups.join(',') }, function(data, textstatus, jqxhr ){ ppapi.pplist = data; ppapi.displaypp(fitbounds); } ); },

12 mapinitialize: function(){ google.maps.visualrefresh = true; var mapoptions = { backgroundcolor: '#ffffff', maptypecontrol: true, maptypecontroloptions: {style: google.maps.maptypecontrolstyle.dropdown_menu}, scalecontrol: true, zoom: 7, center: new google.maps.latlng(47.2, 19.6), maptypeid: google.maps.maptypeid.roadmap }; ppapi.map = new google.maps.map(document.getelementbyid('pp-map-canvas'), mapoptions); ppapi.infowindow = new google.maps.infowindow({}); for (var i = 0; i < postdata.groupnames.length; i++) { if (postdata.groupnames[i].groupname!= '10_posta') { ppapi.symbols[postdata.groupnames[i].groupname] = new google.maps.markerimage(postdata.groupnames[i].iconname,new google.maps.size(64, 64), new google.maps.point(0,0), new google.maps.point(13, 20)); }

13 // szuro hozzadas var title = document.getelementbyid('container').value; var node = document.createelement('label'); if (postdata.groupnames[i].groupname!= '10_posta') { if (i % 2) { node.innerhtml = '<label for="checkbox_pp_csomagautomata" class="checkbox_skin cbs_active" title="csomagautomaták megjelenítése"><input type="checkbox" name="pp_csomagautomata" id="checkbox_pp_csomagautomata' + i + '" class="checkradio" title="csomagautomaták megjelenítése" checked="checked"></label> <label for="checkbox_pp_csomagautomata" class="biglabel" id="label_pp_csomagautomata" title="csomagautomaták megjelenítése"><strong>' + postdata.groupnames[i].description + '</strong> megjelenítése</label><br>'; document.getelementbyid('container').appendchild(node); } else {

14 node.innerhtml = '<label for="checkbox_pp_csomagautomata" class="checkbox_skin cbs_active" title="csomagautomaták megjelenítése"><input type="checkbox" name="pp_csomagautomata" id="checkbox_pp_csomagautomata' + i + '" class="checkradio" title="csomagautomaták megjelenítése" checked="checked"></label> <label for="checkbox_pp_csomagautomata" class="biglabel" id="label_pp_csomagautomata" title="csomagautomaták megjelenítése"><strong>' + postdata.groupnames[i].description + '</strong> megjelenítése</label>'; document.getelementbyid('container').appendchild(node); } } // label generálás } displayppmarkers: function(){ for (var i = 0; i < ppapi.markers.length; i++) ppapi.markers[i].setmap(null); delete(ppapi.markers); ppapi.markers = []; if (!ppapi.ppmarkerslist) return; $.each(ppapi.ppmarkerslist, function(key, item) { if ( ppapi.skipgroups[item.group] ) return; if ( item.group == '' ) return; if ( item.group == undefined ) return; if ( item.group == '10_posta') return;

15 7) A program által visszaadott változók Miután vásárlója kiválasztotta a PostaPontot, ppapi.onselect esemény data változójában, a modul a következő adatokat adja vissza Önnek a kiválasztott PostaPontról (egy részük nem feltétlenül lesz szükséges az Ön számára): id: a PostaPont azonosítókódja group: csoport(réteg)azonosítója lat: szélességi koordinátája lon: hosszúsági koordinátája name: pontos elnevezése zip: irányítószáma country: a település (és kerület), ahol a PostaPont található address: a PostaPont címe phone: telefonszáma (előfordul, hogy nincs megadva) distance: távolsága az irányítószámhoz tartozó terület középpontjától A fenti példában, a PostaPont kiválasztását követően ebből a data változóból íródnak vissza az adatok a megrendelő form-ba. // Minta! A kiválasztott PostaPont adatainak visszaírása a megrendelő form rejtett mezőjébe. $('#valasztott_postapont').val( data['name'] + ' ' +data['zip'] +' '+ data['county'] +' '+ data['address'] )

16 További információra lenne szüksége? Amennyiben bármilyen kérdése van, kérjük forduljon bizalommal ügyfélszolgálatunkhoz az címen.