Za hrvatskazastava.hr izradio sam web shop s personalizacijom proizvoda u kojem kupac svoju narudžbu slaže izravno na stranici proizvoda ili na stranici arhive u “Quick View” skočnom prozoru. Zastave i majice koje prodaje Obrt Holmark izrađuju se po narudžbi, stoga web shop omogućuje kupcu odabir dimenzija, boju, motiv i tekst koji kupac želi na personaliziranom proizvodu, sve to pomoću prilagođenih funkcija napravljenih specifično za ovaj web shop.
U trgovini je danas deset proizvoda u tri skupine: svadbena zastava s vezenim ili tiskanim imenima mladenaca, navijačka zastava s imenom grada ili natpisom po želji, drveno koplje te navijačke i svadbene majice. Sve je izrađeno na WooCommerceu i Avadinoj temi, uz dodatke koje sam napisao posebno za ovaj projekt.
Web shop s personalizacijom proizvoda umjesto varijacija u WooCommerceu
Uobičajen način da se u WooCommerceu ponudi izbor jesu varijabilni proizvodi, gdje se svaka kombinacija atributa zapisuje kao zasebna varijanta proizvoda s vlastitom cijenom, zalihom i slikom. Za majicu koja dolazi u dvije boje i pet veličina to je posve u redu. Na majicama za momačku večer kupac bira između 43 boje, deset veličina i dvadeset motiva tiska, što je 8.600 kombinacija za jedan jedini proizvod, dok ženski model sa svojih 25 boja, šest veličina i 32 motiva donosi još 4.800.
Da sam to izveo kao varijacije, baza bi za dva proizvoda dobila više od trinaest tisuća redaka, otvaranje kartice proizvoda u administraciji postalo bi bolno sporo, a spremanje izmjena vjerojatno bi se prekidalo zbog isteka vremena izvršavanja. Kupac bi pritom i dalje mogao naručiti samo jednu kombinaciju odjednom, iako se te majice u pravilu naručuju za cijelo društvo. Zato sam odabir izveo kao zasebna polja koja ne stvaraju podproizvode.
Vlastiti dodatak za slaganje narudžbe
Dodatak koji sam napisao dodaje na proizvod odgovarajuća polja odabira: boju, veličinu i motiv tiska za majice ili dimeziju i tekst za zastave. Uz popis dostupnih boja za majice stoji krug koji poprima odabranu nijansu, odnosno fotografiju majice u toj boji, pa odabir mijenja glavnu sliku u galeriji i kupac odmah vidi ono što naručuje. Ista se sličica prenosi i u košaricu uz stavku, jer kod narudžbe od osam majica u pet boja popis bez slika brzo prestane biti pregledan.
Iznad gumba za dodavanje u košaricu stoji slagalica u koju se dodaje redak po redak. Svaki redak nosi vlastitu boju, veličinu, motiv i količinu, minimum je pet komada ukupno, a cijela se narudžba jednim potezom šalje u košaricu. Bez toga bi kupac koji naručuje osam majica za momačku večer morao osam puta proći isti postupak, dok ovakvo rješenje pojednostavljuje narudžbu i čini dobro korisničko iskustvo.
Na zastavama personalizacija radi drugačije. Tisak i vez naplaćuju se odvojeno od zastave, cijena ovisi o dimenziji, a polje za upis natpisa pojavljuje se tek nakon što kupac odabere veličinu i ograničeno je na petnaest znakova. Ograničenje nije hir nego posljedica toga koliko slova stane na zastavu tako da ostane čitljivo s udaljenosti.
Brzina učitavanja i stabilnost prikaza
Stranica je na Hetznerovu poslužitelju s Varnishom ispred WordPressa, u koji sam ručno postavio zaštitna pravila koja iz predmemorije izuzimaju košaricu, blagajnu, korisnički račun i sve zahtjeve s prijavljenim korisnikom ili aktivnom WooCommerce sesijom. Vrijeme do prvog bajta na stranicama kategorija iznosi samo 0,89 sekundi.
Trajanje predmemorije podigao sam kroz zaglavlje s-maxage, i to izmjenom postojeće vrijednosti umjesto postavljanjem nove. Razlika je važna: postavljanje bi prebrisalo i zaglavlja kojima WooCommerce izričito zabranjuje predmemoriranje košarice, pa bi Varnish počeo posluživati sadržaj tuđe košarice sljedećem posjetitelju. Više o slojevima predmemorije napisao sam u vodiču kako ubrzati WordPress web stranicu.
Isporuka e-pošte, sigurnost i Cloudflare
Potvrde narudžbi i newsletter idu kroz vanjsku uslugu za slanje, a kako se to postavlja i o čemu se radi opisao sam u tekstu što je SMTP i kako ga postaviti.
Promet prema trgovini danas ide kroz Cloudflare, a stranica šalje sigurnosna HTTP zaglavlja koja isključuju prikaz u tuđem okviru, prisiljavaju vezu na HTTPS i ograničavaju pristup uređajima preglednika.
Plaćanje, dostava i zakonske obveze
Kupci plaćaju karticom preko CorvusPaya, uključujući Apple Pay i Google Pay, ili uplatom na račun. Dostava ide GLS-om te u BOX NOW paketomate. Trgovina traži pristanak na kolačiće, a uvjeti kupnje, podaci o trgovcu i pravo na jednostrani raskid ugovora postavljeni su prema obvezama koje sam opisao u tekstu o izmjenama Zakona o zaštiti potrošača.
Trgovina povezana s AI agentom
Za ovaj sam projekt napisao i dodatke koji WordPressu dodaju mogućnosti dostupne AI agentu preko MCP-a, jer ugrađene mogućnosti ne pokrivaju varijabilne proizvode, atribute, kategorije, slike ni povezane proizvode. Unos asortimana, postavljanje SEO polja i provjera sadržaja radi kanibalizacije time se rade izravno iz razgovora s agentom, umjesto klikanjem po administraciji proizvod po proizvod. Postupak povezivanja opisao sam u tekstu o povezivanju web stranice s AI agentom.
Ako vam treba web shop s personalizacijom proizvoda u kojem kupac sam slaže ono što naručuje, pogledajte što obuhvaća izrada web shopa ili pošaljite upit s opisom svog asortimana.
Podijelite sadržaj!
