A Viltor webáruház rendszer a termékek kosárba helyezését, a kosárban lévő termékek
számának módosítását, a felső és kinyitható alsó kosár tartalmának frissítését és a pénztár kezelését AJAX
technikával végzi.
De mi az az AJAX technika? Ha pl. egy termék lapján a "Kosárba" gombra kattintunk,
akkor nem töltődik újra a weblap, hanem a háttérben zajlik le a kommunikáció a kliens és szerver oldal között.
A kliens megüzeni a szerver oldalnak, hogy mely termékből hány darabot tettünk a kosárba, a szerver oldal pedig
visszaüzen, hogy sikerült-e a tranzakció. A válasznak megfelelően a vásárló vagy azt látja a képernyőn, hogy
kosárba helyezték a termékét, vagy egy hibaüzenetet.
Az AJAX technika működése Javascript kódokon keresztül történik. Ezen kívül Javascript
dolgozik az egyes termékek termékképeinek kinagyítása közben, az alsó, nyitható kosár kinyitása és bezárása
közben, stb.
Látható tehát, hogy egy Viltor áruház a megfelelő Javascript kódok nélkül nem működhet.
Az előre elkészített kódokat a {{ script.xxx }} típusú változók töltik be. A legtöbb kód felhasználja a jQuery
keretrendszert (melyet a {{ script.jquery }} változó tölt be), így ha járatosak vagyunk a jQuery használatában
(vagy akár a sima Javascript programozásban), magunk is írhatunk kódot a sablon HTML lapjaira.
Tegyük fel például, hogy minden egyes oldal betöltésekor egy kitüntetett helyen
az adott oldal témájához kapcsolódó képet szeretnénk megjeleníteni. Ha pl. a pénztárban vagyunk, akkor egy
pénztárgép képét, ha a szállítási és fizetési módok tájékoztató oldalán vagyunk, akkor egy furgon képét szeretnénk
az adott helyen látni. Ezt – mivel a szerver oldal kódját nem változtathatjuk – a kliens oldalon, némi jQuery
Javascript használatával is könnyen megtehetjük.
<script type="text/javascript">
$(document).ready(function()
{
if (location.search != "")
{
var valtozo_tomb = location.search.substr(1).split("&");
for (var i=0; i < valtozo_tomb.length; i++)
{
var egy_valtozo = valtozo_tomb[i].split("=");
if (egy_valtozo[0] == "mod")
{
switch(egy_valtozo[1])
{
case 'penztar':
document['design_kep'].src = 'saját_áruház_mappa/saját_áruház_azonosító/feltolt/sablon/kep/penztargep.jpg';
break;
case 'szallitas_fizetes':
document['design_kep'].src = 'saját_áruház_mappa/saját_áruház_azonosító/feltolt/sablon/kep/furgon.jpg';
break;
default:
document['design_kep'].src = 'saját_áruház_mappa/saját_áruház_azonosító/feltolt/sablon/kep/alapkep.jpg';
}
}
}
}
}
);
</script>
.
.
<img name="design_kep" src="" />
Szintén ebben a dokumentum szakaszban
