PostDanmark og Gsl tracking direkte på din forside (Gratis html / jquery kode)

I forbindelse med at jeg hjælper Nina fra www.itan.dk med nogle optimeringer af siden, var der behov for en spor din pakke løsning. Hun havde set en fra en anden side som hun godt kunne tænke sig, men de ville ikke ud med hvem der havde lavet den for dem (6 linjer html og de vil ikke sige hvem deres programmør er). Så derfor har jeg nu lavet en til hende. Der er endnu bedre end den hun så på først :)

Jeg deler den nu med jer alle sammen, så endnu flere kan få glæde af dette.

Det den gør at at du få en html kode du indsætter på din side hvor du vil have boksen. Dine kunder / besøgende kan så der se at der er to felter til at indtaste tracking nummer i. Når de så indtaster og trykker på "søg" - vil der komme et vindue frem (fancybox popup) med informationerne fra trackingnummeret. Forskellen fra den som Nina egentlig bedte om og denne er at kunderne ikke forlader siden ( YAY ;) ).

Nu til koden:

* Start med at downloade fancybox fra http://fancybox.net/ - upload den til din server.

* På din side skal du i <head> tagget indsætte dette:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript">
$(function() {

$("#target1").click(function(event1) {
event1.preventDefault();

$.fancybox.open({
href : 'http://www.postdanmark.dk/tracktrace/TrackTrace.do?barcode=' + $("#trackingcode1").val() + '&i_lang=IND&sourceurl=http',
type : 'iframe',
padding : 5
});
});
});

$(function() {
$("#target2").click(function(event2) {
event2.preventDefault();

$.fancybox.open({
href : 'http://www.gls-group.eu/276-I-PORTAL-WEB/content/GLS/DK01/DA/5004.htm?txtRefNo=' + $("#trackingcode2").val() + '&txtAction=71000',
type : 'iframe',
padding : 5
});
});

});
</script>

Derefter skal du de på din side hvor du vil have denne boks frem indsætte dette:

<div style="float:left; height: 145px; width: 265px;border: 1px #a5a5a5 dottet; padding: 12px 0px 0px 20px; ">
<div style="font-size: 23px; font-weight: bold;">Find din pakke her</div>
<div style="font-size: 14px;">Post Danmark tracking nummer:</div>

<form name="target1" action="http://www.postdanmark.dk/tracktrace/TrackTrace.do" method="get">
<input class="input-text" id="trackingcode1" style="width: 190px;" name="trackingcode1" type="text" value="xxxxxxxDK" />
<input name="submit1" id="target1" type="submit" value="Søg" />
</form>

<div style="font-size: 14px;">GLS tracking nummer:</div>
<form name="target2" action="http://www.gls-group.eu/276-I-PORTAL-WEB/dLink.jsp" method="get">
<input class="input-text" id="trackingcode2" style="width: 190px;" name="trackingcode2" type="text" value="xxxxxxxxx" />
<input name="submit2" id="target2" type="submit" value="Søg" />
</form>
</div>

Gem og åben din side og du ser nu en boks med 2 input felter og fancyboks popup :)

Virker i chrome, Ie og ff (ikke testet andre)

I tilfælde af man har javascript slået fra bliver man sendt til siderne.

Håber der er nogen der får brug for denne kode (må meget gerne skrive det, så jeg ved om jeg vil uploade flere herinde en anden gang)