Kako smo pravili prodavnicu
Krajem prošle godine detaljno je redizajniran sajt PC Press‑a. Jedna od ponuđenih usluga je online kupovina pa je meni, kao poklon za praznike, zapalo da napravim Web prodavnicu našeg omiljenog časopisa.
Projekat nije delovao suviše teško. Dosad su izdanja našeg časopisa prezentirana na zasebnim stranama, na kojima su korisnici mogli da popune podatke i naruče pojedinačno izdanje. Objedinjavanje svih tih stranica u jednu delovalo je jednostavno. No, kao što Marfijev zakon kaže – ako stvari mogu da se zakomplikuju, zakomplikovaće se.Problem s Korpom
Najpre je trebalo da odlučimo na kom principu će funkcionisati prodavnica: s Korpom ili bez nje? Razlika u odabiru je sledeća – korisnici koji kupuju jedan artikal žele samo da kliknu na proizvod i da ga kupe, dok korisnici koji kupuju više proizvoda žele da pregledaju šta se nalazi u njihovoj virtuelnoj korpi i da izbace ili dodaju artikle koje žele. Znajući da su na našem sajtu dosad korisnici uvek kupovali po jedan artikal (jer nije bilo ni mogućnosti za više opcija) i da je za njih pregledanje korpe čist višak, odlučili smo da napravimo prodavnicu za njih i tako je započet projekat.
Tu počinju i prvi problemi. Ono što je naizgled bio jednostavniji pristup već pri prvom pokušaju kodiranja mi se obio o glavu. Kada pravite prodavnicu s Korpom, imate jasno definisane objekte koji su odabrani i njima se lako manipuliše u drugom dokumentu (samoj Korpi). Bez Korpe radite s formularom koji ceo morate da proveravate pri svakom odabiru (da li je korisnik uopšte izabrao artikal, ako jeste, da li je uneo željenu količinu, pa da li je izabrana količina validna itd.), što prilično povećava količinu podataka koji treba obraditi, posebno ako se provera radi u JavaScript‑u. Što nas vodi na odabir tehnologija…
Staro ili novo?
Vreme je bilo da se odluči u kom jeziku napraviti prodavnicu. HTML se podrazumevao, ali po kom standardu? Od davne ‘91. postoji više verzija HTML‑a, a tri su dominantne. Prva je sigurni i oprobani HTML 4.01 (u upotrebi od 1999, danas ćete ga naći na skoro svakom sajtu), druga je njegov mlađi brat XHTML 1.0 sličan HTML‑u 4, ali pisan kao XML dokument), a treći je najnoviji, još ne baš do kraja standardizovani HTML 5, usvojen 2012. godine.
Za one koji se nikada nisu bavili dizajnom Web stranica reći ću da, kada posetite neku stranicu na Internetu, vaš browser najpre ugleda HTML deklaraciju u vrhu stranice. Na osnovu te deklaracije koja definiše verziju i vrstu jezika koja se koristi u dokumentu on može dalje da tumači i prikazuje tekstove i slike koji se pojavljuju na strani. U doba sve bržeg širenja tehnologija, izabrali smo HTML 5 i njegovog prirodnog saputnika CSS 3.
Zanimljivo je da „petica“ ne predstavlja veliki napredak koji su iskusni dizajneri očekivali. Glavna ideja u novom standardu bila je suštinsko vraćanje počecima. Naime, u originalu HTML nije bio namenjen formatiranju dokumenta, već samo definisanju njegovog sadržaja. Uvođenjem <font> taga i color atributa u HTML‑u 3 počelo je i ukrašavanje stranica za Internet kakav znamo danas. „Četvorka“ je kao rešenje uvela stilove (CSS), ali većina Web dizajnera je i dalje prirodno nastavila da koristi način rada na koji su navikli ranije. Trebalo je da „petica“ donese prekid takvog načina razmišljanja, tako što dolazi do „čišćenja“ HTML‑a i izbacivanja većine atributa iz upotrebe. Time bi sam kod bio lako čitak dok bi se sva akcija odvijala u stilovima, tj. CSS‑u. HTML 5 je paralelno doneo revoluciju sa canvas‑om, multimedijalnom podrškom, local storage‑om i mnogim drugim stvarima koje su dovele do toga da danas viđamo online igrice pravljene u čistom HTML‑u, bez upotrebe Flash‑a koji je dosad bio dominantan na ovom polju.
No da ne lutamo – uz rešen način na koji ćemo ispisivati podatke korisnicima, ostao je još izbor mehanizma koji će procesirati sve što oni urade. Ako se formulari proveravaju u JavaScript‑u, to bi značilo da sve radi korisnički računar (client‑side skripta). Ako pak koristimo PHP ili ASP, svi procesi će se obavljati na serveru. Pošto smo na početku odabrali način kupovine bez Korpe i želeli da obezbedimo procesuiranje većih količina podataka, odluka je pala da se sve radi kroz server‑side skriptove (PHP) dok će se JavaScript koristiti samo za vizuelne efekte i tako smanjiti opterećenje za korisnike sa starijim kompjuterima.
Razni browser‑i razni problemčići
Prodavnicu je trebalo testirati u raznim browser‑ima. Zašto je to bitno? Skoro svaki browser danas koristi drugačiji render engine koji tumači kod na stranici. Dominantna trojka su Gecko (Firefox), Webkit (Chrome i Safari) i Trident (IE). Iako tradicionalno dizajneri najviše problema imaju sa Internet Explorer‑om, jer se Microsoft teško odlučuje da ubaci nove stvari, IE9 je napravio veliki iskorak u implementaciji HTML5 i CSS3 standarda. Nažalost, mnogi novi tagovi još nisu uspostavili cross‑browser podršku, tako da dizajnerima trenutno pada teži deo posla pisanja dvostrukog ili čak trostrukog koda kako bi se osigurali da njihova stranica radi u svim varijantama.
Problemi su počeli sa Webkit‑om. Naime, pošto baratamo sa formularom u prodavnici i prenosimo podatke iz stranice u stranice, najjednostavniji način prenosa podataka je putem hidden polja u formularu. Ali, Google Webkit ima bag koji se prenosi iz verzije u verziju – u nekim slučajevima prosto ne prihvata hidden polje kao validno polje u formularu. Tako kod nas u prodavnici dva originalno skrivena radio button‑a, kojima korisnik odlučuje da li će plaćati uplatnicom ili profakturom, prosto nisu htela da rade. Na Webkit board‑u autori su ponudili jednostavno rešenje – koristite normalan radio button i zatvorite ga u hidden layer koji se ne prikazuje korisniku, ali ni to rešenje nije savršeno. Ako korisnik pogreši u unosu nekog podatka ili se iz bilo kog razloga vrati na formular, Webkit ponovo neće umeti da protumači koji način plaćanja je izabran.
Pošto je pitanje ispisa u ovom slučaju samo mali deo stranice, odlučio sam da se ne mučim dalje i da prosto prikažem radio button‑e na stranici. Ukoliko je pak nekom potrebno da sakrije veću količinu podataka na stranici, jednostavan workaround za Chrome bio bi da stavi visible layer, ali s pozicijom ‑10000, tako da dok se rezolucija na monitorima ne poveća pet‑šest puta u odnosu na današnje, nema šanse da iko od korisnika vidi šta se dešava van ekrana. Sve to, naravno, ukoliko Google ne reši ovaj problem u budućim verzijama Webkit‑a.
Uz završetak prodavnice, izradu CMS‑a, zaštite od spamera i svega što moderna Web stranica danas podrazumeva, dodali smo nekoliko vizuelnih detalja, kao što je bila izrada widget‑a za kompletnu arhivu časopisa PC. Tako korisnik jednostavnim izborom broja na prodavnici dobija mogućnost pregleda skraćeni opis tog broja i time potvrdi svoju odluku da baš njega poručuje. O tome kako je rešeno pitanje select polja sa multiple opcijama ćemo nekom drugom prilikom.
Sledeći korak
Pravaca za širenje i izmene postoji mnogo. Od dodavanja Korpe, online plaćanja putem kartica ili SMS servisa, izmene načina ispisa, sve opcije su moguće. O tome šta budućnost nosi, najviše će odlučivati sami korisnici. Pratićemo kako koristite prodavnicu, vaše komentare i primedbe i trudićemo sa da interfejs uvek prilagodimo potrebama većine. Zato svratite na prodavnica.pcpress.rs, iskoristite promotivni period i naručite neke od naših izdanja – za prve kupce predviđeni su pokloni!
Milan Basrak
