O akademskoj slikarici Mirni Sišul i njenim razigranim radovima zasigurno ste već čuli – ako ne putem društvenih mreža na kojima je ona sveprisutna, jer ju publika jednostavno obožava i ne libi se dijeliti njene objave, onda putem drugih medija, koji ovu mladu akademsku slikaricu rado prate (jedan takav članak nedavno je objavljen u magazinu InDesign s Mirjanom Mikulec – kliknite za više).
Web trgovina mirnasisul.com je specifična po mnogim aspektima – od vizualnih do funkcionalnih, a u nastavku ćemo se osvrnuti na one za koje smo smatrali da će vama, čitateljima našeg bloga, biti najzanimljivije.
Nekoliko riječi o osnovama stranice
Mirnasisul.com dolazi u dva jezika – hrvatski i engleski. Kod planiranja jezičnih verzija, imali smo manje više dvije mogućnosti. Standardni način koji koriste mnogi u eko sustavu WordPressa, koristiti WPML kao osnovni višejezični dodatak, ili kreirati WordPress Multisite, sa zasebnom web lokacijom za svaki jezik.
Imamo puno iskustva s WPML -om i u određenoj mjeri ga volimo koristiti. No, kod WPML-a je vrlo važno razmišljati o performansama. Iskreno rečeno, apsolutno proždire hosting resurse. To može proći kod korporativnih web stranica, gdje nema puno čestih i opsežnih promjena sadržaja i / ili puno posjetitelja, pa se puno toga može premostiti agresivnim predmemoriranjem web stranice i optimiziranjem skripti i stilova.
No, kod web shopa koji ima mnogo posjetitelja, ovo je previše rizično i može biti prilično skupo zbog ogromnih resursa potrebnih za ispravan i stabilan rad.
Postavljanje stranice s WPML -om u smislu višejezičnosti je mnogo jednostavnije nego postavljanje u Multisite izvedbi. No, performanse su ipak važnije.
Zbog svega gore navedenog, odlučili smo se na Multisite, i nismo požalili. Web shop je brz, stabilan i jednostavan za upravljanje. Još važnije, ne preopterećuje resurse servera, pa nisu potrebne velike cifre za njegov rad.
Zasebna poddomena za englesku verziju
Engleska verzija web stranice nalazi se na en.mirnasisul.com. Klijent se može “prebaciti” na drugi jezik putem standardnog padajućeg izbornika bez potrebe za prijavom u zasebnu jezičnu verziju. Multisite nudi prednosti spremanja podataka jedne web stranice u jednoj bazi podataka (svaka jezična verzija koristi vlastite tablice), ali i dalje omogućava korištenje kao da se radi o potpuno odvojenoj web stranici, tj. WordPress instalaciji, što čini lokalizaciju mnogo jednostavnijom i nudi više mogućnosti i fleksibilnosti u smislu razvijanja zasebne verzije web shopa.
Jednostavnije rečeno, sve što želite prevesti ili izmijeniti mnogo je jednostavnije napraviti, nego s WPML-om. Naravno, postoje funkcionalnosti WPML-a na koje s Multisite-om ne možete računati, no sve se to na kraju isplati zbog stabilnosti i performansi.
SInhronizacija sadržaja i zaliha
Od starta je bila potrebna sinhronizacija određenog dijela sadržaj web stranice, pa smo omogućili sinhronizaciju:
- objava, stranica i proizvoda
- zalihe proizvoda
Stvar funkcionira tako da klijent označava željeni sadržaj koji želi duplicirati na drugu jezičnu verziju, te ga nakon dupliciranja prevodi.
Zaliha, tj. stanje na skladištu proizvoda se automatski sinhronizira kod prodaje pojedinog proizvoda.
Također, kada klijent želi omogućiti prodaju proizvoda na drugoj jezičnoj verziji, može inicijalno prekopirati sve informacije proizvoda na izvornoj jezičnoj verziji (naslov, sadržaj, fotografije, atributi, varijacije, zaliha, i sl.).
Posebna valuta za svaki jezičnu verziju
Engleska verzija web shopa koristi EUR (€) kao baznu valutu (za razliku od hrvatske, koja koristi HRK (Hrvatsku kunu). Valutna konverzija je postavljena na razini cijelog web shopa, te se ažurira svakodnevno prema tečajnoj rati ECB-a (Europske centralne banke).
Narudžbe i računi
Kreirali smo vlastito rješenje integrirano sa WooCommerce-om za generiranje računa, kako bi se klijentu omogućilo da što manje vremena troši na rad s narudžbama. Rješenje za generiranje računa integrirano je sa TCPDF skriptom i WooCommerce-ovim nativnim modulom za narudžbe.
Kako stvar funkcionira? Kada administrator prebaci status narudžbe u “Završeno”, u pozadini se automatski generira PDF račun, te se prilaže e-mail obavijesti koja se automatski šalje kupcu. Također, PDF račun se sprema i u meta podatke narudžbe, kako bi bio dostupan za download na nativnom WooCommerce-ovom ekranu za uređivanje narudžbi. Račun se generira kao PDF dokument u skladu s hrvatskim poreznim zakonima i regulativama.
Modul za generiranje računa smo lokalizirali, te time omogućili kreiranje računa na hrvatskom i engleskom jeziku, dok se na engleskoj verziji kao valuta koristi EUR. Ovime smo klijentu uštedili vrijeme potrebno za ručno generiranje i slanje računa kupcima.
Dizajnom minimalistička, a sadržajno vrlo bogata web trgovina kojom se jednostavno upravlja
Prilikom planiranja dizajna i koncepta web trgovine mirnasisul.com, klijenti (supružnici Mirna i Marin Sišul) su bili vrlo eksplicitni – proizvod ne smije pasti u drugi plan, a to žele postići minimalizmom i odabirom neutralnih nijansi boja. Imali su konkretne želje i zahtjeve po pitanju koncepta web trgovine i sadržajnih okvira koji trebaju biti na naslovnici. S obzirom da od ranije imaju bogato iskustvo s online alatima, te da je klijentica kao već etablirana slikarica dosta dobro poznavala sklonosti svoje ciljne skupine, njihove ideje bile su nam velika pomoć i važan preduvjet za budući uspjeh ove web trgovine.
Kao i u slučaju drugih projekata koji su izašli iz naše radionice, web trgovina mirnasisul.com temelji se na WordPressu i WooCommerceu, pri čemu je izrađena custom tema – prilagođena potrebama i željama naručitelja. Neke od vizualnih i funkcionalnih specifičnosti te teme opisujemo u nastavku.
Upravljačko sučelje za sadržajne module naslovnice
Prilikom izrade svih naših web stranica osnovni cilj nam je omogućiti klijentu samostalno upravljanje što većim dijelom sadržaja koji su na web stranici prisutni. Stoga u većini slučajeva proširujemo nativne mogućnosti WordPress CMS-a i uz korištenje što manjeg broja pluginova kreiramo framework za upravljanje predviđenim sadržajnim modulima.
Tako smo i u slučaju web trgovine mirnasisul.com osigurali mogućnost samostalnog mijenjanja sadržaja na najvažnijim segmentima naslovnice – izmjenjivaču fotografija (slideru), središnjim sadržajnim blokovima i blokovima podnožja.
Izmjenjivač fotografija na naslovnici 
Content slider management console
Horizontalni blokovi na naslovnici
Dodatni istaknuti blokovi naslovnice 
Upravljanje horizontalnim blokovima naslovnice
Podnožje web stranice
Moduli podnožja na front endu 
Upravljanje modulima podnožja u sučelju web stranice
Proširenje nativnih mogućnosti WordPressa za upravljanje unutarnjim stranicama
aš kao i kod naslovnice, klijent je imao specifične želje po pitanju izgleda unutarnjih stranica. Primjera radi, htio je da na svakoj unutarnjoj stranici postoji zaglavlje u vidu slike pune širine, s naslovom i podnaslovom na toj slici. WordPress nema mogućnost postavljanja slike zaglavlja na pojedinačnim podstranicama i arhivama članaka/proizvoda (kategorije), a ujedno nema niti mogućnost pokazivanja podnaslova (isključivo predviđa polje za naslov).
Stoga je bilo važno prije svega isprogramirati ovaj dizajnerski i funkcionalni element (pozicioniranje slike u zaglavlje, postavljanje naslova i podnaslova na sliku), te osigurati klijentu mogućnost unosa slika i teksta na zaglavlje – za svaku pojedinačnu podstranicu, te stranice arhiva (kategorije čanaka i proizvoda).
Stranica “O Mirni Sišul” sa specifičnim zaglavljem 
Upravljačko sučelje za zaglavlja pojedinačnih podstranica 
Stranica kategorije proizvoda sa specifičnim zaglavljem 
Upravljanje zaglavljima na kategorijama proizvoda
Odmak od klasičnog WooCommerceovog izgleda proizvoda
Klasičan WooCommerceov predložak proizvoda je korektan, ali zašto ne otići korak dalje i prezentaciju proizvoda učiniti zanimljivijom i ugodnijom za korištenje. U slučaju web trgovine mirnasisul.com postigli smo to na sljedeći način:
- Izbacili smo klasični bočni izbornik koji je samo stvarao “gužvu”, te smo informacije i elemente “razvukli” po cijeloj širini stranice.
- Transformirali smo klasične WooCommerce tabove (kartice), te “otkrili” atribute i ocjene (inače skriveni u tablicama), pozicionirajući ih na desnu stranu stranice proizvoda. Umjesto klasičnih WooCommerce tabova ispod galerije fotografija su postavljene custom kartice na koje ćemo se osvrnuti u nastavku.
S obzirom da osim klasičnog opisa proizvoda, na stranici proizvoda trebaju biti i druge važne informacije (o dostavi, načinima plaćanja i sl.), odlučili smo kreirati custom tabove (kartice) i omogućiti klijentu jednostavno upravljanje njihovim sadržajima. Tako klijent za svaku kategoriju proizvoda može definirati univerzalne tabove koji će se prikazivati na svim proizvodima te kategorije.
Tabovi na font endu 
Upravljanje sadržajem tabova u sučelju
Napredne funkcionalnosti za automatizaciju prodaje i uštedu resursa
Registracija korisnika i e-mail marketing
Prilikom pregledavanja proizvoda, jedna od stvari koju ćete vjerojatno odmah uočiti jeste potreba za registracijom – ukoliko želite vidjeti cijene. Bez obzira koliko je korisnost ovakve prakse dvojbena, zahtijevanje od korisnika da se registrira da bi mu cijena bila otkrivena je stvar poslovne politike portala mirnasisul.com, koja se do sada nije pokazala štetnom. Čak što više, portal funkcionira kao platforma za obožavatelje Mirninih radova, koji nemaju problem s davanjem svojih osobnih podataka da bi zauzvrat mogli vidjeti cijenu proizvoda svoje omiljene slikarice. Prilikom registracije sustav ih pita da li žele putem newslettera dobivati zanimljivosti sa shopa, na što mnogi pristaju, pa se njihovi podaci automatski pohranjuju u sučelje e-mail marketing servisa Mailchimp i zatim koriste prilikom promotivnih kampanja.
Ova strategija je vrlo jednostavna, a izrazito učinkovita za izgradnju baze kontakata, koji, s obzirom da se radi o deklariranoj ciljnoj skupini, predstavljaju pravo malo bogatstvo.
Kalkulator za izračun cijene tapeta po mjeri
Jedan od noviteta na web trgovini mirnasisul.com jeste kategorija Tapete (kliknite za pregled).
Riječ je o proizvodima koji nisu standardizirani i ne mogu se prezentirati kao klasični jednostavni (primjer pogledajte ovdje) ili varijabilni proizvodi (primjer pogledajte ovdje), već se korisniku mora omogućiti da sam definira željene dimenzije i dobije automatiziran obračun cijene (kliknite za primjer).
Da bi tako nešto bilo moguće, ugradili smo online kalkulator i isprogramirali formulu za obračunavanje cijene proizvoda, uz unos širine i visine željene tapete. Unos širine i visine se vrši u “cm” jer je preciznost u izradi tapete ovdje ključna, ali se obračun cijene vrši u “m2”. Programiranje ove konverzije je bio dodatan izazov, koji smo uspješno riješili.
Nakon upisa željenih dimenzija i obračunavanja cijene, kupac biva preumjeren na blagajnu na kojoj još jednom vidi koje je dimenzije unio, a istu informaciju dobiva i u automatiziranom e-mailu kojim se narudžba potvrđuje. Na isti način je o narudžbi i unesenim dimenzijama informiran i administrator web trgovine, čime su potencijalne greške prilikom procesuiranja narudžbi svedene na minimum.
Zaključak: Web shop treba biti motivator za kupovinu
Mnogi se pitaju što je potrebno da bi jedna web trgovina bila uspješna. Odgovor na ovo pitanje mogu vam dati vlasnici portala mirnasisul.com, supružnici Mirna i Marin Sišul – koji su svakog dana svjedoci korisnosti ovog alata. Odgovor na ovo pitanje bez puno razmišljanja glasi: jednostavnost, preglednost, pragmatičnost.
O web trgovini mirnasisul.com bismo imali još puno toga za napisati, postoji jako puno tehničkih specifičnosti koje su “običnom oku” nevidljive, a vama čitateljstvu teško da bi bile i zanimljive – bez obzira koliko fascinantne one bile. Vjerujemo da smo vas i kroz ovih nekoliko ulomaka uspjeli upoznati s prednostima ove web trgovine, koja je postala put do srca mnogih Mirninih obožavatelja, i ujedno dodatna motivacija ljudima širom regije da kupuju njene živopisne radove.
