−−Vyber dopravy bez omezeni na krehke zbozi
@bBasketWithFragile= 1ANDISNULL(db.bFragileRestriction,0) = 0OR
@bBasketWithFragile= 0 ) AND
Výpis 10: Omezení doprav dle křehkostí
5.5 Redesign
se stará jeden programátor a kodér. V rámci redesignu většinou u nových a velkých e-shopů dochází také přizpůsobení vzhledu pro menší rozlišení, tedy pro mobily a tablety. Vzniká tedy plně responzivní web, který je pak snadno ovladatelný ze všech druhů zařízení.
Rozmezí takových úprav bylo pro tento konkrétní případ naceněno na přibližnou dobu 60 pracovních dní programátora a kodéra. Jelikož se od začátku nepodařilo odhadnout množství drobností, které se musely změnit, opravit nebo upravit, úpravy trvaly ještě déle. Navíc, zákazník v průběhu přidal několik nových funkčností, které také protáhly implementační dobu.
Náplní programátora u redesignu je nejen zapracování nových funkčností, ale hlavně úpravy XSLT šablon, základních stylů a celkového rozložení jednotlivých stránek. Důležitá je spolupráce s kodérem, který potřebuje pro stylování stránky určité struktury. Hlavně pokud bude web re-sponzivní, je důležité od začátku jít správnou cestou, jinak by se na konci u tvoření jednotlivých rozlišení musely například předělat pozice bloků, což neblaze ovlivní původní vzhled. Pro pro-gramátora redesignů je tedy velmi důležité znát používané struktury a ještě důležitější je se učit nové.
Grafika bývá zpravidla dodávána ve formátu PSD, tedy v programu Adobe Photoshop. Návrh bývá dodáván v jednom souboru s velkým počtem vrstev, kde každá zastupuje jeden druh stránky. Jedna speciální vrstva pak zastupuje hover efekty na jednotlivých elementech. Kodér má pak na práci řezat prvky a skládat kousek po kousku web do nového vzhledu. Díky základním znalostem grafiky a dovednosti CSS stylů jsem měl od začátku k Photoshop přístup. To mi umožnilo část věcí individuálně nařezat z komplexního návrhu a nebyl jsem tímto závislý na práci kodéra, což oběma ušetřilo čas.
Asi nejdůležitější část je však schůzka s klientem. Na schůzce se zákazníkem se upřesní jednotlivé stránky webu, funkčnosti a grafika. Pokud je potřeba, jsou se zákazníkem dořešeny některé záležitosti. Případně se rozebírají první prvky návrhu, které už na první pohled nepůjdou zapracovat a klient má hned od začátku možnost s grafikem ještě probrat jejich úpravu. Po schůzce probíhá analýza celého designu a funkcí, která trvá i desítky hodin. Po analýze je klientovi předložena cenová nabídka a zákazník má možnost projednat některé dražší úpravy, zda je bude chtít, či nikoliv. V momentě odsouhlasení započnou práce na vývojovém serveru, kde se postupně kontrolují jednotlivé části, funkce a úpravy.
Nacenění bývá většinou rozděleno do úseků, které se postupně po zapracování a odsouhlasení klientem fakturují. Náročnost úprav se velmi liší a tím i výsledný počet řádků kódu. Jelikož jsem si upravoval základní styly a tím šetřil práci kodérovi, můj výsledný stylesheet měl kolem jednoho tisíce řádků. Pro porovnání má finální kodérův CSS soubor něco kolem 3500 řádků. Redesign je však hlavně o měnění šablon, upravování procedur a občasně se zabrouzdá i do jádra. V šablonách bývají úpravy od desítek do maxima stovek řádků, podobně tak v procedůrách (ke stovce jsem se přiblížil při zpracování procedury pro výběr zboží do filtru). Během redesignu jsem změnil téměř 25 šablon a přibližně 40 procedur. Úpravy jádra jsou povětšinou zanedbatelné, maximálně pak desítky řádků.
5.5.1 Domovská stránka
První a největší úsek byla domovská stránka. Domovská stránka se skládá z několika modulů, zahrnujících hlavičku, tělo a patičku. Nejtěžší na začátku je fakt, že se vypnou všechny CSS styly. Vzhled je pak čistě textový a lze si jen těžko představit jednotlivé struktury, které vedou k úspěšnému stylování webu.
Práce začaly horní lištou v hlavičce, která obsahuje několik odkazů na články, změnu měny a odkazy pro přihlášení a registraci. Přihlášení se předělalo na box, který po kliku na odkaz s pomocí funkce "slideToggle"zajistí jeho zobrazení. Dále se do hlavičky vložily elementy vy-hledávání, přepínání jednotlivých e-shopů a odkaz do košíku. Poslední položkou hlavičky je horizontální menu kategorií.
Následovala implementace animovaného banneru, který je navíc plně responzivní. V admi-nistraci byla připravena funkčnost pro základní slider (Možnost vkládání obrázků s odkazy). Do šablony jsem tedy vyvedl obrázky do speciální struktury a pomocí jQuery pluginu Owl Carousel se vytvořil animovaný slider [3].
Další blok byl přehled kategorií, ve kterém jsem opět použil z administrace základní slider a vyvedl jej do struktury, ale bez animací a nastylován byl do čtverců s odkazem. Další bloky byly náhodně vybrané produkty novinek, pomocí článku udělané hodnocení zákazníků a přehled posledních vydaných článků.
Jako poslední se řešila patička, která obsahovala 4 sloupce. První tři sloupce jsou odkazy na různé části webu a čtvrtý sloupec slouží k odebírání novinek.
5.5.2 Detail produktu
Druhý úsek byl detail produktu. Zde nepřibylo mnoho nového, takže práce zde byly hlavně změny struktur a přesun již existujících bloků.
Detail byl rozdělen na dva sloupce. V levém sloupci vznikl velký obrázek detailu a pod ním menší alternativní obrázky, které bylo možno přesouvat a prohlížet opět s pomocí Owl Carouselu. Všechny obrázky jsou navázány na jeden společný lightbox. V pravém sloupci je přehled cen produktu, skladovost a možnost zboží zakoupit. Další blok je opět dvousloupcový a obsahuje parametry produktu v levé a popis produktu v pravé části. Poslední modul před patičkou jsou související produkty.
5.5.3 Katalog produktů
Další úsek redesignu byl katalog produktů neboli výpis zboží. Jelikož z úvodní strany již byly hotové boxy zboží, největší a prakticky jedinou velkou úpravou katalogu byl filtr zboží. Samotný
nový modul katalogu. Díky zaslaným informacím se modul katalog vytvoří s upravenou pro-cedurou a tím i odlišným zbožím a vygenerovaná šablona je pak pomocí JavaScriptu přenačtena namísto stávající. Stejně funguje i stránkování nebo zobrazení dalšího zboží.
5.5.4 Objednávkový proces a ostatní
Jako poslední úsek byl zpracován košík a celý objednávkový proces. Došlo k restrukturalizaci všech kroků. Původní první krok, ve kterém bylo vyplnění všech potřebných údajů k dodání, se přesunul do nového třetího kroku. První krok tak zůstal jen přehled zboží s možností zadat sle-vový kupón. Pokud byl zákazník B2B, v prvním kroku se také zobrazovala daňová rekapitulace.
Druhý krok zůstal téměř neměnný, stále se zde volila platba a doprava. Navíc zde přibyl krátký přehled zboží v košíku, který byl plovoucí při scrollování. Třetí krok nyní zahrnoval všechny potřebné údaje. Pokud bylo v košíku zboží pro zletilé, byl zde i blok pro zadání a potvrzení dospělosti. Nově pro B2B partnery vznikl čtvrtý krok rekapitulace, kde si mohl zákazník zkont-rolovat veškeré zboží, dopravu i platbu. Po odeslání objednávky vznikla nová děkovná stránka, na které taky nově vznikl přehled zakoupeného zboží, ale i přehled nových článků nebo odkaz na facebook firmy [4].
Mezi ostatní se řadí úprava registračního formuláře, který byl velmi podobný tomu z třetího kroku objednávky. Nově se však dělil na B2C zákazníka a B2B firmu. Formulář se pomocí stylů a JavaScriptu přeměňoval a zobrazovaly se rozdílná pole a rozdílné povinnosti vyplnění. Edi-tační formulář se velmi podobal tomu registračnímu. Dále se musely nastylovat tabulky faktur, objednávek a jejich detaily. Mezi ostatní se řadilo i stylování jednotlivých kroků odebírání news-letterů, speciální katalogy v účtu, unikátní článek s hodnocením, kontaktní formulář, reklamační formulář a jiné.
6 Závěr
Během posledního půl roku jsem ve společnosti poznal všechny produkty a měl tu možnost navštívit všechna oddělení. Firma je už na trhu nějaký čas a tak měla možnost utřídit si priority a hlavně interní strukturu. To jí zajišťuje úspěšnost na poli e-commerce jak u nás, tak v zahraničí.
Systém zpracování tiketů je vyladěn do takové úrovně, že nabízí špičkovou kvalitu servisu a podpory s téměř okamžitou reakcí na jakýkoliv problém. Klienti se tak mohou spolehnout, že pokud se objeví na jejich e-shopu závada, bude ihned odstraněna. Nejdůležitější je ale fakt, že firma drží krok s nejnovějšími trendy a používá nejnovější technologie, takže zákazníci mohou využívat moderní systémy, které jsou svižné a efektivní.
Praxe pro mne byla velkým přínosem, jelikož jsem mohl poznat skutečný programátorský svět a rozšířit si své znalosti. Nejvíce jsem prohloubil se dovednosti v oblasti XSLT šablon a hlavně CSS stylů, které od nové verze CSS3 nabízí spoustu nových funkcí, jako jsou například animace, transformace a přesuny elementů [6]. Dále jsem prověřil své schopnosti v oblasti ASP.NET a jazyka C#, do kterých jsem měl základ z předmětu "Architektura technologie .NET". V nepo-slední řadě jsem se zdokonalil v JavaScriptu a hlavně v odvětí jQuery, které má na starosti celé klientské ovládání e-shopu.
Absolvování praxe však nepřineslo jen zdokonalení schopností, ale je to také dobrý základ pro budoucí kariéru a v dnešní době, kdy jsou potřeba hlavně praktické znalosti, je praxe nesmírně cenná a jsem velice rád, že Vysoká škola báňská umožňuje svým studentům tuto možnost.
Literatura
[1] Ecomail [online]. [cit. 2016-03-24]. Dostupné z: https://www.ecomail.cz/
[2] Ecomail Apiary [online]. [cit. 2016-03-25]. Dostupné z: http://docs.ecomailczv2.apiary.io/#
[3] Owl Carousel [online]. [cit. 2016-04-10].
Dostupné z: http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html [4] Facebook Page Plugin [online]. [cit. 2016-04-15].
Dostupné z: https://developers.facebook.com/docs/plugins/page-plugin [5] AJAX API Documentation [online]. [cit. 2016-04-17].
Dostupné z: https://api.jquery.com/category/ajax/
[6] CSS3 Introduction [online]. [cit. 2016-04-19].
Dostupné z: http://www.w3schools.com/css/css3_intro.asp